vue.js中ref及$refs的使用方法解析
關(guān)于ref和$refs的用法及講解，vue.js中文社區(qū)（ https://cn.vuejs.org/v2/api/#ref ）是這么講解的：
ref 被用來給元素或子組件注冊引用信息，引用信息將會(huì)注冊在父組件的 $refs 對象上。
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件；
vue.js中文社區(qū)文檔上的說明已經(jīng)就比較通俗易懂了，其實(shí)我們可以這么理解，ref和$refs其實(shí)就是用來獲取/操作DOM元素的；類似于jquey中的$(".xxx")；
那么我們?nèi)绾问褂胷ef和$refs呢？
ref可以直接加在HTML標(biāo)簽上，作為一個(gè)屬性存在于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)绾潍@取這個(gè)DOM元素呢？
同樣，vue.js也給我們提供了特定的方法:
this.$refs.mobile
上面圖片就是我們this.$refs.mobile的輸出結(jié)果 ，vue.js提供的獲取DOM元素的方法確實(shí)還是很方便呢，希望我的博客能夠幫助您更好的理解vue語法的使用。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
el-input限制輸入正整數(shù)的兩種實(shí)現(xiàn)方式
el-input框是Element UI庫中的一個(gè)輸入框組件，用于接收用戶的輸入，這篇文章主要介紹了el-input限制輸入正整數(shù),需要的朋友可以參考下2024-02-02
vue中利用three.js實(shí)現(xiàn)全景圖的完整示例
這篇文章主要給大家介紹了關(guān)于vue中利用three.js實(shí)現(xiàn)全景圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Vue實(shí)現(xiàn)手機(jī)號、驗(yàn)證碼登錄（60s禁用倒計(jì)時(shí)）
這篇文章主要介紹了Vue實(shí)現(xiàn)手機(jī)號、驗(yàn)證碼登錄（60s禁用倒計(jì)時(shí)），幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
最近在做uni-app的時(shí)候需要用到vant組件，在網(wǎng)上看到了很多的使用vant組件的方法，但是講解的大多繁瑣，或者無法使用，現(xiàn)把最新，最實(shí)用的vant組件的使用方法分享給大家,需要的朋友可以參考下2023-02-02
剛學(xué)vue時(shí)候?qū)τ谌纸M件和局部組件有點(diǎn)懵,不知道什么時(shí)候用全局,什么時(shí)候用局部,下面這篇文章主要給大家介紹了關(guān)于Vue組件如何自動(dòng)按需引入的相關(guān)資料,需要的朋友可以參考下2021-12-12
這篇文章主要給大家介紹了關(guān)于Vue3導(dǎo)出pdf文件的相關(guān)資料,最近項(xiàng)目有個(gè)需求,將系統(tǒng)統(tǒng)計(jì)的數(shù)據(jù)生成分析報(bào)告,然后可以導(dǎo)出成PDF,這里給大家總結(jié)下,需要的朋友可以參考下2023-08-08
前端低代碼form-generator實(shí)現(xiàn)及新增自定義組件詳解
這篇文章主要給大家介紹了關(guān)于前端低代碼form-generator實(shí)現(xiàn)及新增自定義組件的相關(guān)資料,form-generator是一個(gè)開源的表單生成器,可以幫助我們快速構(gòu)建各種表單頁面,需要的朋友可以參考下2023-11-11
vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題解決方法
這篇文章主要介紹了vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題的解決方法,需要的朋友可以參考下2018-01-01
在 Vue 中,watch 屬性用于觀察和響應(yīng) Vue 實(shí)例上數(shù)據(jù)的變動(dòng),然而,默認(rèn)情況下,watch 確實(shí)不會(huì)觸發(fā)組件創(chuàng)建時(shí)的變動(dòng),這里有幾種方式可以處理或繞過這個(gè)問題,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vue中如何引用公共方法和公共組件問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05