vue中$refs的用法及作用详解
更新时间：2018年04月24日 11:09:59 作者：Nosaj
这篇文章主要介绍了vue中$refs的用法及作用详解,非常不错，具有参考借鉴价值，需要的朋友可以参考下
一般来讲，获取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的用法及作用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会
及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了vue中如何通过iframe方式加载本地的vue页面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了Vue中Table组件Select的勾选和取消勾选事件详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-03-03
这篇文章主要介绍了vue项目引入ts步骤(小结),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
开发中遇到bug是在正常不过了,而程序也基本都是bug堆里爬出来的,对于程序员来说bug调试也是自己工作的重要组成部分,下面这篇文章主要给大家介绍了关于Vue环境搭建报错整理的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍vue3中 provide 和 inject 用法及原理，provide 和 inject可以 解决多次组件传递数据的问题，下面文章是具体的用法和实现原理,具有一定的参考价值，需要的朋友可以参考一下，希望对大家有所帮助2021-11-11
大家都知道vue-router有两种模式，hash模式和history模式，带＃的则是hash模式。接下来给大家带来了Vue 去除路径中的＃号的解决方法，感兴趣的朋友一起看看吧2018-04-04
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue()开始就是vue生命周期的开始。Vue实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等⼀系列过程,称这是Vue的⽣命周期2022-10-10
这篇文章主要介绍了vue项目从node8.x升级到12.x后的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要为大家详细介绍了VueJS实现用户管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了vue使用$http服务端收不到参数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论