深入理解vue $refs的基本用法

更新時(shí)間：2017年07月13日 16:47:51 作者：薛偉杰

本篇文章主要介紹了深入理解vue $refs的基本用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

我最近在研究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>

一般來講，獲取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)的消耗了

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
$refs

相關(guān)文章

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