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 相关文章推荐
不安全的常用的js写法
Sep 15 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
JS的get和set使用示例
Feb 20 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
基于JavaScript实现留言板功能
Mar 16 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
删除无限级目录与文件代码共享
2006/07/12 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
js操作select控件的几种方法
2010/06/02 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
极简的Python入门指引
2015/04/01 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
火锅店营销方案
2014/02/26 职场文书
借款协议书范本
2014/04/22 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
销售类求职信
2014/06/13 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
2016党校培训心得体会
2016/01/07 职场文书
导游词之太原天龙山
2020/01/02 职场文书
5个实用的JavaScript新特性
2022/06/16 Javascript