深入理解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日历功能对象
Jan 12 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
vue.js todolist实现代码
Oct 29 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 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中的实现trim函数代码
2007/03/19 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP与以太坊交互详解
2018/08/24 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python轻松实现代码编码格式转换
2015/03/26 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
windows下python安装小白入门教程
2018/09/18 Python
Python运行异常管理解决方案
2020/03/09 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
护士的岗位职责
2013/12/04 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
电影雨中的树观后感
2015/06/15 职场文书
未婚证明范本
2015/06/15 职场文书
迎国庆主题班会
2015/08/17 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫