深入理解vue $refs的基本用法


Posted in Javascript onJuly 13, 2017

我最近在研究vue 的路上,看到了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节点的消耗了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
如何使用CocosCreator对象池
Apr 14 Javascript
js自定义弹框插件的封装
Aug 24 #Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 #Javascript
jsonp跨域请求详解
Jul 13 #Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 #Javascript
JavaScript反弹动画效果的实现代码
Jul 13 #Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 #Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 #Javascript
You might like
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
基于mysql的论坛(1)
2006/10/09 PHP
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
快速配置PHPMyAdmin方法
2008/06/05 PHP
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
python中argparse模块用法实例详解
2015/06/03 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
品质主管的岗位职责
2013/12/04 职场文书
学术会议欢迎词
2014/01/09 职场文书
签约仪式策划方案
2014/06/02 职场文书
小学运动会班级口号
2014/06/09 职场文书
房屋过户委托书范本
2014/10/07 职场文书
学校捐款活动总结
2015/05/09 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
团队拓展训练感想
2015/08/07 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL