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节点的消耗
    }//欢迎加入全栈开发交流圈一块儿学习交流：864305860
  }
})
</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节点的消耗
    }//欢迎加入全栈开发交流圈一块儿学习交流：864305860
  }
})
</script>
复制代码

通常来说，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，而后在获取input1的值。 可是用ref绑定以后，咱们就不须要在获取dom节点了，直接在上面的input上绑定input1，而后refs.input1 这样就能够减小获取dom节点的消耗了 结语

感谢您的观看，若有不足之处，欢迎批评指正。

本次给你们推荐一个免费的学习群，里面归纳移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同窗，欢迎加入Q群：864305860，无论你是小白仍是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时天天更新视频资料。 最后，祝你们早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。