vue.js中ref和$refs的使用及示例講解
更新時間：2019年08月14日 10:51:35 作者：有夢想的咸魚前端
這篇文章主要給大家介紹了關(guān)于vue.js中ref和$refs使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
關(guān)于ref和$refs的用法及講解，vue.js中文社區(qū)（ https://cn.vuejs.org/v2/api/#ref ）是這么講解的：
ref 被用來給元素或子組件注冊引用信息，引用信息將會注冊在父組件的 $refs 對象上。
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件；
vue.js中文社區(qū)文檔上的說明已經(jīng)就比較通俗易懂了，其實(shí)我們可以這么理解，ref和$refs其實(shí)就是用來獲取/操作DOM元素的；類似于jquey中的$(".xxx")；
那么我們?nèi)绾问褂胷ef和$refs呢？
ref可以直接加在HTML標(biāo)簽上，作為一個屬性存在于HTML標(biāo)簽中，如圖
<input title="手機(jī)號" name="mobile" ref="mobile" placeholder="手機(jī)號" type="tel" is-type="china-mobile" required :min="11" :max="11"></input>
這樣，我們就是給input輸入框元素注冊了引用信息，那么我們?nèi)绾潍@取這個DOM元素呢？
同樣，vue.js也給我們提供了特定的方法:
this.$refs.mobile
上面圖片就是我們this.$refs.mobile的輸出結(jié)果 ，vue.js提供的獲取DOM元素的方法確實(shí)還是很方便呢
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。
相關(guān)文章
vue使用mint-ui實(shí)現(xiàn)下拉刷新和無限滾動的示例代碼
本篇文章主要介紹了vue使用mint-ui實(shí)現(xiàn)下拉刷新和無限滾動的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue3的ref和reactive的用法和解析,開始部分講解了ref，reactive的使用實(shí)例，如何進(jìn)行類型的標(biāo)注，配合ts這么使用，接著講解了兩者的區(qū)別，分別需要注意的點(diǎn)，還有ref的頂層自動解包，需要的朋友可以參考下2023-03-03
vue3 element-plus二次封裝組件系列之伸縮菜單制作
這篇文章主要介紹了vue3 element-plus二次封裝組件系列之伸縮菜單制作,是基于vue3 vite element-plus搭建的，值的注意的時候，里面的圖標(biāo)組件是經(jīng)過處理的，結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了解決nuxt 自定義全局方法,全局屬性,全局變量的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
今天小編就為大家分享一篇Vue-component全局注冊實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
使用Vue3新特性構(gòu)建動態(tài)表單的方法詳解
傳統(tǒng)的表單開發(fā)通常需要編寫大量的重復(fù)代碼,例如處理用戶輸入、驗(yàn)證數(shù)據(jù)、更新 UI 等等,為了簡化開發(fā),我們可以借助 Vue 3 的新特性,例如組合式 API 和 ref 對象,所以本文我們將一起學(xué)習(xí)如何使用 Vue 3 的新特性構(gòu)建一個更加靈活、可擴(kuò)展的動態(tài)表單2024-06-06
在Vue項(xiàng)目中引入Echarts繪制K線圖的方法技巧
在Vue項(xiàng)目開發(fā)中,數(shù)據(jù)可視化是一項(xiàng)重要的任務(wù),Echarts是一個由百度開源的數(shù)據(jù)可視化庫,提供了豐富的圖表類型和強(qiáng)大的交互功能,其中,K線圖常用于展示金融數(shù)據(jù)的走勢,本文將詳細(xì)介紹如何在Vue項(xiàng)目中引入Echarts并繪制K線圖,需要的朋友可以參考下2025-04-04
這篇文章主要為大家詳細(xì)介紹了Vue使用NProgress進(jìn)度條的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
vue-music關(guān)于Player播放器組件詳解
這篇文章主要為大家詳細(xì)介紹了vue-music關(guān)于Player播放器組件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了詳解vue如何添加babel?polyfill實(shí)現(xiàn)方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06