深入理解vue $refs的基本用法
更新時間：2017年07月13日 16:47:51 作者：薛偉杰
本篇文章主要介紹了深入理解vue $refs的基本用法 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
我最近在研究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節(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é)點的消耗了
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中的插件：Vuex。本文將圍繞它的優(yōu)缺點、使用場景和示例展開詳細的說明，感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01
在vue中通過render函數(shù)給子組件設置ref操作
這篇文章主要介紹了在vue中通過render函數(shù)給子組件設置ref操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue監(jiān)聽一個數(shù)組id是否與另一個數(shù)組id相同的方法
今天小編就為大家分享一篇Vue監(jiān)聽一個數(shù)組id是否與另一個數(shù)組id相同的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue3 vite如何讀取文件內(nèi)容問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
webpack + vue 打包生成公共配置文件（域名） 方便動態(tài)修改
這篇文章主要介紹了webpack + vue 打包生成公共配置文件（域名） 方便動態(tài)修改,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue實現(xiàn)留言板todolist功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
本篇文章給大家分享了Vue2.0仿餓了么webapp單頁面應用詳細步驟，有興趣的朋友可以跟著操作下。2018-07-07
這篇文章主要介紹了vue中實現(xiàn)checkbox回顯效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了一個手寫的vue放大鏡，組件使用less，文中給出了示例代碼,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue CLI 2.x搭建vue(目錄最全分析),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02