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