vue中$refs的用法及作用详解


Posted in Javascript onApril 24, 2018

一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值。

但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。

然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了

用法如下:

HTML:

<div id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</div>

JS:

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

下面给大家介绍下vue $refs的基本用法,具体代码如下所示:

<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节点的消耗了

总结

以上所述是小编给大家介绍的vue中$refs的用法及作用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会

及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
JS高阶函数原理与用法实例分析
Jan 15 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
Ajax实现局部刷新的方法实例
Mar 31 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 #Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 #Javascript
js 图片转base64的方式(两种)
Apr 24 #Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 #Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 #Javascript
vue webpack实用技巧总结
Apr 24 #Javascript
浅谈vue中.vue文件解析流程
Apr 24 #Javascript
You might like
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
python生成验证码图片代码分享
2016/01/28 Python
python 瀑布线指标编写实例
2020/06/03 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
在什么时候需要使用"常引用"
2015/12/31 面试题
2019年c语言经典面试题目
2016/08/17 面试题
SQL Server数据库笔试题和答案
2016/02/04 面试题
高三学习决心书
2014/03/11 职场文书
销售经理岗位职责
2014/03/16 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
租房安全协议书
2014/08/20 职场文书
组工干部对照检查材料
2014/08/25 职场文书
师德师风个人总结
2015/02/06 职场文书
初中政治教师教学反思
2016/02/23 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
Python 阶乘详解
2021/10/05 Python
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers