深入理解vue $refs的基本用法
更新时间：2017年07月13日 16:47:51 作者：薛伟杰
本篇文章主要介绍了深入理解vue $refs的基本用法 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
我最近在研究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节点的消耗了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中的插件：Vuex。本文将围绕它的优缺点、使用场景和示例展开详细的说明，感兴趣的小伙伴可以跟随小编一起了解一下2022-01-01
这篇文章主要介绍了在vue中通过render函数给子组件设置ref操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
今天小编就为大家分享一篇Vue监听一个数组id是否与另一个数组id相同的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue3 vite如何读取文件内容问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
webpack + vue 打包生成公共配置文件（域名） 方便动态修改
这篇文章主要介绍了webpack + vue 打包生成公共配置文件（域名） 方便动态修改,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
这篇文章主要介绍了vue实现留言板todolist功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
本篇文章给大家分享了Vue2.0仿饿了么webapp单页面应用详细步骤，有兴趣的朋友可以跟着操作下。2018-07-07
这篇文章主要介绍了vue中实现checkbox回显效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了一个手写的vue放大镜，组件使用less，文中给出了示例代码,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了Vue CLI 2.x搭建vue(目录最全分析),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
最新评论