深入理解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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
$refs

vue多級復雜列表展開/折疊及全選/分組全選實現(xiàn)
這篇文章主要介紹了vue多級復雜列表展開/折疊及全選/分組全選實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
詳解Vue基于vue-quill-editor富文本編輯器使用心得
這篇文章主要介紹了Vue基于vue-quill-editor富文本編輯器使用心得，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
vue @ ~ 相對路徑路徑別名設置方式
這篇文章主要介紹了vue @ ~ 相對路徑路徑別名設置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
vuejs動態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解
這篇文章主要介紹了vuejs動態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解的相關資料,需要的朋友可以參考下
2016-09-09
vue自定義指令directive的使用方法
這篇文章主要介紹了vue自定義指令directive的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
詳解vue 組件的實現(xiàn)原理
這篇文章主要介紹了詳解vue 組件的實現(xiàn)原理，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下
2020-11-11
vue3時間插件之Moment.js使用教程
這篇文章主要給大家介紹了關于vue3時間插件之Moment.js使用的相關資料,需要的朋友可以參考下
2023-09-09
如何巧用Vue緩存函數(shù)淺析
有時候不希望已經(jīng)請求過的數(shù)據(jù),再次請求重復執(zhí)行刷新操作,我們就需要使用數(shù)據(jù)緩存,這篇文章主要給大家介紹了關于如何巧用Vue緩存函數(shù)的相關資料,需要的朋友可以參考下
2021-09-09
Vue中 Runtime + Compiler 和 Runtime-o
這篇文章主要介紹了Vue中 Runtime + Compiler 和 Runtime-only 兩種模式含義和區(qū)別,結(jié)合實例形式詳細分析了Vue中 Runtime + Compiler 和 Runtime-only 兩種模式基本功能、原理、區(qū)別與相關注意事項,需要的朋友可以參考下
2023-06-06
vue實現(xiàn)頁面打印自動分頁的兩種方法
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面打印自動分頁的兩種方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09