Vue学习之ref属性

简介

主要讲解vue中的ref属性。

直接先说结论：

专门被用来给html元素和子组件注册引用信息的（id属性的替代者）。
该属性应用在html元素时，获取的是dom元素对象，如果应用在组件标签上，那么获取的是组件实例对象（vc）。
使用方式：
打标志：<h1 ref=“xxx”>ref</h1> 或者 <School ref=“xxx”></School>
获取：this.$refs.xxx

代码：

main.js：

//引入vue依赖
import Vue from 'vue'
//引入组件App
import App from './App.vue'// 关闭生产提示
Vue.config.productionTip = false//创建一个vue实例
new Vue({//这个目前还没学过，先知道他的作用是将app放入容器中。render: h => h(App),//配置该vue实例管理id为app的容器
}).$mount('#app')

App.vue：

<template><!-- 编写结构 --><div><!-- 分别使用id和ref --><h1 ref="h1d">ref属性学习</h1><h2 id="h2d">ref属性学习</h2><hr><school ref="schRef"></school><school id="schId"></school><button @click="showDom">打印dom</button></div>
</template><script>//引入school组件
import school from "./components/School.vue"export default {components:{//注册组件school},methods:{showDom(){//根据id进行打印console.log(document.getElementById("h2d"));console.log(document.getElementById("schId"));//根据ref属性进行获取console.log(this.$refs.h1d);console.log(this.$refs.schRef);}}
}
</script><style></style>

School.vue

<template><!-- 编写组件结构代码，也就是html代码 --><!-- 需要一个div括住，也就是只能有一个根元素，一般使用div --><div class="orange"><div>学校：{{schoolName}}</div><div>地址：{{schoolAddress}}</div></div>
</template><script>
//交互代码编写的地方，需要暴露出去给其他地方引入
//这个需要有一点es6模块化的知识，这里一般使用默认暴露，因为这是单文件组件，只需要暴露一个组件对象，
//并且引入默认暴露的组件引入语法比较简单。
export default {data() {return {schoolName:"尚硅谷",schoolAddress:"北京"}},
}
</script><style>/* 编写样式的地方 */.orange{background-color: orange;}
</style>

效果：

由上面可以得出结论：

当获取的是html元素时，ref和id的效果是一样的。
当获取的是子组件元素时，ref获取的是组件实例vc，而id获取的却是组件根元素及其后代元素。

Vue学习之ref属性相关推荐

Vue 中的 ref 属性详解
Vue 中的 ref 属性详解我们先来读一下vue的官方文档我们来分析官方文档首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
vue中的ref属性
vue中的ref属性使用vue开发时经常会用到ref属性,ref属性有什么作用呢?我刚开始用的时候发现这个属性有点鸡肋,总是感觉可有可无,但是随着不断的使用vue,慢慢地发现它的作用还是挺重要的 ...
vue中通过ref属性来获取dom的引用
ref属性可以用来获取dom的引用,它的值可以随便定义, 但是注意这个名字不要和页面中其他的ref属性名相同,获取定义的ref可以通过this.$refs.ref的名字 <div id=&quo ...
Vue学习记录 (ref,生命周期,组件,router)
ref="名称":注册引用信息 this.$ref.名称:获取对象(此为操作dom节点) 计算属性:computed 在差值表达式中调用此函数会直接返回计算结果,而不是函数本身当 ...
Vue 学习笔记 — css属性计算的问题
简书今天在使用Vue时遇到一个问题:在切换css内联属性时某些特殊属性的计算会有问题,无法得到预期的结果. 例子: https://jsfiddle.net/blqw/cLwau40z/ 上面的页面 ...
Vue学习之监视属性watch
简介设置监视属性的作用: 当被监视的属性发生变化时,回调函数会自动调用,进行相关操作. 监视的熟悉必须存在,才能进行监视. 使用vue的配置对象中的watch属性进行配置. <!DOCTYPE ...
Vue学习之props属性的使用
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.props 二.项目中的使用提示:以下是本篇文章正文内容,下面案例可供参考一.props 功能:让组件接收外部传过来 ...
Vue学习_计算属性
实现姓名案例: 1.插值语法实现姓名案例直接从vm中读取. <!doctype html> <html lang="en" xmlns:v-model=&quo ...
Vue中的ref是做什么的？
Vue 中的 ref 属性详解_前端大猪草的博客-CSDN博客 Vue 中的 ref 属性详解我们先来读一下vue的官方文档我们来分析官方文档首先ref的引用是相当于一个DOM节点(如果是子组件 ...

Vue学习之ref属性

简介

Vue学习之ref属性相关推荐

最新文章

热门文章