Vue.js中ref ($refs)用法举例总结
原文地址:http://www.cnblogs.com/xueweijie/p/6907676.html
<div id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</div>


<script>
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
}
}
})
</script>


一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值。
但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。
然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了
以下内容:
作者:该帐号已被查封
链接:http://www.jianshu.com/p/3bd8a2b07d57
來源:简书
看Vue.js文档中的ref部分,自己总结了下ref的使用方法以便后面查阅。
一、ref使用在外面的组件上
HTML 部分
1 <div id="ref-outside-component" v-on:click="consoleRef">
2 <component-father ref="outsideComponentRef">
3 </component-father>
4 <p>ref在外面的组件上</p>
5 </div>
js部分

1 var refoutsidecomponentTem={
2 template:"<div class='childComp'><h5>我是子组件</h5></div>"
3 };
4 var refoutsidecomponent=new Vue({
5 el:"#ref-outside-component",
6 components:{
7 "component-father":refoutsidecomponentTem
8 },
9 methods:{
10 consoleRef:function () {
11 console.log(this); // #ref-outside-component vue实例
12 console.log(this.$refs.outsideComponentRef); // div.childComp vue实例
13 }
14 }
15 });

二、ref使用在外面的元素上
HTML部分

1 <!--ref在外面的元素上-->
2 <div id="ref-outside-dom" v-on:click="consoleRef" >
3 <component-father>
4 </component-father>
5 <p ref="outsideDomRef">ref在外面的元素上</p>
6 </div>

JS部分

1 var refoutsidedomTem={
2 template:"<div class='childComp'><h5>我是子组件</h5></div>"
3 };
4 var refoutsidedom=new Vue({
5 el:"#ref-outside-dom",
6 components:{
7 "component-father":refoutsidedomTem
8 },
9 methods:{
10 consoleRef:function () {
11 console.log(this); // #ref-outside-dom vue实例
12 console.log(this.$refs.outsideDomRef); // <p> ref在外面的元素上</p>
13 }
14 }
15 });

三、ref使用在里面的元素上---局部注册组件
HTML部分

1 <!--ref在里面的元素上-->
2 <div id="ref-inside-dom">
3 <component-father>
4 </component-father>
5 <p>ref在里面的元素上</p>
6 </div>

JS部分

1 var refinsidedomTem={
2 template:"<div class='childComp' v-on:click='consoleRef'>" +
3 "<h5 ref='insideDomRef'>我是子组件</h5>" +
4 "</div>",
5 methods:{
6 consoleRef:function () {
7 console.log(this); // div.childComp vue实例
8 console.log(this.$refs.insideDomRef); // <h5 >我是子组件</h5>
9 }
10 }
11 };
12 var refinsidedom=new Vue({
13 el:"#ref-inside-dom",
14 components:{
15 "component-father":refinsidedomTem
16 }
17 });

四、ref使用在里面的元素上---全局注册组件
HTML部分
1 <!--ref在里面的元素上--全局注册-->
2 <div id="ref-inside-dom-all">
3 <ref-inside-dom-quanjv></ref-inside-dom-quanjv>
4 </div>
JS部分

1 Vue.component("ref-inside-dom-quanjv",{
2 template:"<div class='insideFather'> " +
3 "<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
4 " <p>ref在里面的元素上--全局注册 </p> " +
5 "</div>",
6 methods:{
7 showinsideDomRef:function () {
8 console.log(this); //这里的this其实还是div.insideFather
9 console.log(this.$refs.insideDomRefAll); // <input type="text">
10 }
11 }
12 });
13
14 var refinsidedomall=new Vue({
15 el:"#ref-inside-dom-all"
16 });
Vue.js中ref ($refs)用法举例总结的更多相关文章
- VUE -- vue.js中$watch的用法示例
Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch( ...
- vue.js中$watch的用法示例
Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch( ...
- vue.js中,input和textarea上的v-model指令到底做了什么?
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- vue.js中父组件触发子组件中的方法
知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...
- [转载]js中return的用法
一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return; 在大多数情况下,为事件处理函 ...
- js中this的用法
经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay
- JQuery之append和appendTo的区别,还有js中的appendChild用法
JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...
- JS中event.keyCode用法及keyCode对…
js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
随机推荐
- Visual Studio项目属性的生产平台,如何改为X64?
如图,我把平台改为x64,可是按打叉,退出后,再进入项目属性,还是 x86,没变. 解决方法: 选择 Setup1项目, 选择"属性" ->选择 "配置管理器&qu ...
- Element Ui中table实现表格编辑效果
主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...
- C++中cin.getline与cin.get要注意的地方
cin.getline与cin.get的区别是,cin.getline不会将结束符或者换行符残留在输入缓冲区中.
- spring+mybatis的多源数据库配置实战
前言: 关于spring+mybatis的多源数据库配置, 其实是个老生常谈的事情. 网上的方案出奇的一致, 都是借助AbstractRoutingDataSource进行动态数据源的切换. 这边再无 ...
- 通过for 来获取数组里面的电话
//存放的是电话号码包含的数字 , , , , , }; //电话号码出现的下标 , , , , , , , , , , }; //方式1 ; i < index.length; i++) { ...
- 开发Canvas 绘画应用(三):实现对照绘画
需求分析 在我的毕设中,提出了视图引导的概念,由两部分功能组成: (1)可以对照着图片进行绘画,即将图片以半透明的方式呈现在绘图板上,然后用户可以对照着进行绘画: (2)可以直接将简笔画图片直接拖拽到 ...
- python 内置函数 进制转换
4.内置函数 自定义函数 内置函数 len Open id() type() range() 输入输出 print() input() 强制转换 int() float() list() tuple( ...
- Mabatis面试题
Mybatis面试题 1请写出Mybatis核心配置文件MyBatis-config.xml的内容? <?xml version="1.0" encoding="U ...
- hadoop MapReduce
简单介绍 官方给出的介绍是hadoop MR是一个用于轻松编写以一种可靠的.容错的方式在商业化硬件上的大型集群上并行处理大量数据的应用程序的软件框架. MR任务通常会先把输入的数据集切分成独立的块(可 ...
- SQL Sever 2012版本数据库的完全安装流程
首先安装SQL Sever 2012数据库,我们要下载好安装包.将安装包存储在磁盘中. 安装前将杀毒软件和相关安全的软件等退出,以免造成安装中的错误. 安装环境:Win7 64位操作系统 注:SQL ...