vue中$refs的用法及作用詳解
更新時間：2018年04月24日 11:09:59 作者：Nosaj
這篇文章主要介紹了vue中$refs的用法及作用詳解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
一般來講，獲取DOM元素，需document.querySelector（".input1"）獲取這個dom節(jié)點，然后在獲取input1的值。
但是用ref綁定之后，我們就不需要在獲取dom節(jié)點了，直接在上面的input上綁定input1，然后$refs里面調(diào)用就行。
然后在javascript里面這樣調(diào)用：this.$refs.input1 這樣就可以減少獲取dom節(jié)點的消耗了
用法如下:
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節(jié)點的消耗
}
}
})
</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節(jié)點的消耗
}
}
})
</script>
一般來講，獲取DOM元素，需document.querySelector（".input1"）獲取這個dom節(jié)點，然后在獲取input1的值。
但是用ref綁定之后，我們就不需要在獲取dom節(jié)點了，直接在上面的input上綁定input1，然后$refs里面調(diào)用就行。
然后在javascript里面這樣調(diào)用：this.$refs.input1 這樣就可以減少獲取dom節(jié)點的消耗了
總結
以上所述是小編給大家介紹的vue中$refs的用法及作用詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會
及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要介紹了沒有搭建腳手架時vue組件的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue3中router路由以及vuex的store使用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue實現(xiàn)el-menu和el-tab聯(lián)動的示例代碼
本文主要介紹了vue實現(xiàn)el-menu和el-tab聯(lián)動的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了詳解Vue路由開啟keep-alive時的注意點，非常具有實用價值，有興趣的朋友可以了解一下2017-06-06
這篇文章主要介紹了vue中實現(xiàn)一個項目里兼容移動端和pc端問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue.config.js常用配置詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了axios攜帶cookie配置詳解(axios+koa)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了nuxt使用vuex存儲及獲取用戶信息踩坑的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了vue+elemet實現(xiàn)表格手動合并行列，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
UniApp是一種基于Vue.js的跨平臺開發(fā)框架,可以快速地開發(fā)同時運行在多個平臺的應用程序,這篇文章主要介紹了uniapp項目國際化標準的配置與實現(xiàn),需要的朋友可以參考下2023-11-11