深入理解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实现一个页面多个css样式实现
May 29 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
理解Javascript闭包
Nov 01 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
webpack external模块的具体使用
Mar 10 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
JS+CSS实现过渡特效
Jan 02 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
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
用python登录Dr.com思路以及代码分享
2014/06/25 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
Python中property函数用法实例分析
2018/06/04 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
python的链表基础知识点
2020/09/13 Python
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
Python面向对象之内置函数相关知识总结
2021/06/24 Python
Redis+AOP+自定义注解实现限流
2022/06/28 Redis