首页 > 其他分享 >Vue 中的 Ref

Vue 中的 Ref

时间:2022-12-03 16:13:31浏览次数:46  
标签:School Vue name App vue Ref refs


Vue 中的 Ref

1:ref说明


 <!--
    ## ref属性

    1. 被用来给元素或子组件注册引用信息(id的替代者)
    2. 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
    3. 使用方式:
        1. 打标识:```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
        2. 获取:```this.$refs.xxx```

 -->


2:界面代码结构

image

3:具体代码内容

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false /*关闭语法检查*/
})



main.js

 //引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue生产提示
Vue.config.productionTip=false;
// 创建Vm
const vm = new Vue(  {
        el:'#app',
        render: (h) => h(App)
   });

App.vue


 <!--
    ## ref属性

    1. 被用来给元素或子组件注册引用信息(id的替代者)
    2. 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
    3. 使用方式:
        1. 打标识:```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
        2. 获取:```this.$refs.xxx```

 -->

<template>
  <div>
    <!-- ref:标识符 原生Dom的id标识符替代者-->
    <h1  v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDom">点击输出上方的Dom元素信息</button>
    <hr/>
    <div class="divCss">
        <h1 class="h1Css">验证闭合标签组件在脚手架环境下渲染情况</h1>
        <School ref="schoolRef" />
        <School id="schoolId"/>
        <School />
    </div>

  </div>
</template>
<script>

    import School from './components/School.vue';

    export default {
        name:'App',
        components:{
            School
        },
        data(){
            return {
                msg:"欢迎新同学来此学习!"
            }
        },
        methods: {
            showDom(){
               console.log("@@ title ===>",this.$refs.title); //真是DOM元素
               console.log("@@ btn ===>",this.$refs.btn); //真是DOM元素
               console.log("@@ schoolRef ===>",this.$refs.schoolRef); //School组件的 实例对象(vc)
               console.log("@@ schoolId ===>",document.getElementById("schoolId")); //真是DOM元素
            }
        }
    }
</script>

<style>
   .divCss{
        background-color: chocolate;
        margin: auto;
        padding: 20px;
   }
   .h1Css{
        font-size: 36px;
        color: white;
   }
</style>


School.vue

<template> <div class="schoolClassStyle"> <h2>学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> </div> </template>

  <script>

      export default {
        name:'School',
        data () {
          return {
            name:'华南师范大学',
            address:'广州市天河区中山大道西55号',
          }
        }
      }
  </script>

 <style>
    .schoolClassStyle{
      background-color: aquamarine;
    }
  </style>






index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对ie浏览器的一个特殊配置,含义是让ie浏览器以最高的渲染级别进行渲染界面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签的图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页的标题:找 package.json文件里的 "name": "vue_test" 值 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 如果浏览器不支持js,则该标签的元素里的内容将会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>









4:界面效果

image

标签:School,Vue,name,App,vue,Ref,refs
From: https://www.cnblogs.com/ios9/p/16948212.html

相关文章

  • vsCode的css代码提示reference,怎么关闭?
      设置中,去掉Editor:CodeLens对勾 ......
  • vue-router
    1.安装[email protected]要指定版本号否则会报错2.使用2.1在src下创建router目录,在其中新建index.js文件importVueRouterfrom......
  • prefilght请求由来
    工作中配置监控报警参数时,发现请求接口是有两次。第一个是preflight请求,第二个是正常请求,如图:观察preflight方法是options,然后是正常的请求(post)因此了解下什么是prefligh......
  • uni 结合vuex 编写动态全局配置变量 this.baseurl
    在日常开发过程,相信大家有遇到过各种需求,而我,在这段事件便遇到了一个,需要通过用户界面配置动态接口,同时,因为是app小程序开发,所以接口中涉及到了http以及websocket两个类型......
  • vue 添加多条数据 添加日期
    效果图添加多条数据,日期是具体到天。   后端数据格式time:[{s_time:'',e_time:''}]<pv-for="(item,index)inform.third_extend":key="index"style=......
  • vue scss样式预处理在 vscode 中起作用,但是报错
      2.在最外层级,输入代码  "files.associations":{"*.vue":"vue"} ......
  • vue实现按钮多选
    需求是这样: 首先考虑使用elementui中的组建实现,但是有时候会忽略组建。实现方式两种:1.直接使用element实现letweekTimeData:['星期一','星期二','星......
  • SpringBoot启动报错:main ERROR Unable to create file ${sys:log.path.prefix}/log.l
    完整的错误信息:2019-08-2214:17:59,340mainERRORUnabletocreatefile${sys:log.path.prefix}/log.logjava.io.IOException:文件名、目录名或卷标语法不正确。at......
  • Vue的指令与过滤器
    1.内容渲染指令v-text覆盖标签原有内容{{}}插值表达式v-html2.属性绑定指令v-bind为属性动态绑定值简写':'3.事件绑定指令v-on简写'@'vue提供了内置......
  • vue 项目开发记录1
    ---------------------------jbs开发记录---------------------------1,新建vue-cli项目2,win7不能使用node14以上的版本 1,使用save会在package.json中自动添加。npmi......