這次帶給大家vue中$refs使用詳解，vue中$refs使用的注意事項有哪些，以下就是實戰案例，一起來看一下。
但用ref綁定之後，我們就不需要在取得dom節點了，直接在上面的input上綁定input1，然後$refs裡面呼叫就行。
然後在javascript裡面這樣呼叫：this.$refs.input1 這樣就可以減少取得dom節點的消耗了
用法如下:
HTML:
<p id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </p>
JS:
<script>
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗
}
}
})
</script>下面要跟大家介紹下vue $refs的基本用法，具體程式碼如下所示：
<p id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</p>
<script>
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
}
}
})
</script>一般來講，取得DOM元素，需<a href="//m.sbmmt.com/code/658.html" target="_blank">document</a>.querySelector（".input1"）取得這個dom節點，然後在取得input1的值。
但用ref綁定之後，我們就不需要在取得dom節點了，直接在上面的input上綁定input1，然後$refs裡面呼叫就行。
然後在javascript裡面這樣呼叫：this.$refs.input1 這樣就可以減少獲取dom節點的消耗了
#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是vue中$refs使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
