在沒有學習vue之前,我們實現直接操作頁面上的dom元素都是通過js/jquery,因為jquery對dom元素的操作非常的方便 但是學習了vue之後 就比jquery更方便
所以它的作用是什麼呢?
ref在vue中是用來給元素或是子元件註冊引用資訊到父元件或是 vue例項上,註冊後的引用資訊都會呈現在父元件/vue例項的 (.re
fs)上
,這時,
我們就可
以通過(
.refs) 上,這時,我們就可以通過(
.refs)
上,這時
,我們就
可以通過
(.refs) 獲取到引用的 dom 物件或是子元件資訊。
例如,我們可以獲取到頁面上新增了 ref 的input輸入框的值,對於子元件來說,我們可以直接獲取到子元件data 選項中的資料,或是直接呼叫子元件的方法。
js**
var vm = new vue(,
beforemount() ,
mounted() ,
methods:
}});
執行**,從結果中可以看到,在beforemount 這個鉤子函式中,我們是無法獲取到這個dom 元素的值,結合之前學習的 vue 生命週期的相關知識,當執行到beforemount 鉤子函式時,vue雖然已經將模板編譯完成,但是尚未掛載到頁面 dom 元素上,還只是掛載在虛擬dom上,因此我們可以得出 ref是在頁面渲染完成後才被建立的。 vue中ref的用法
1 ref加在普通元素上,用this.refs.refname獲取dom元素 定義的mycomponent.vue 邊界值練習 data 在methods中 clickf 2 加在子元件上,使用this.refs.refname獲取元件例項,可以使用元件的所有方法和變數 子元件在父元件中被呼叫 提交...
Vue中ref的使用
在沒有學習vue之前,我們實現直接操作頁面上的dom元素都是通過js jquery,因為jquery對dom元素的操作非常的方便。但是學習了vue之後,對dom的操作完全交給vm了,這個時候手動的獲取dom元素再使用js jquery就沒有那麼方便。於是出現了ref,即ref的功能之一就是獲取dom...
vue中ref的用法
預期 string ref被用來給元素或子元件註冊引用資訊。引用資訊將會註冊在父元件的 refs物件上。如果在普通的 dom 元素上使用,引用指向的就是 dom 元素 如果用在子元件上,引用就指向元件例項 hellop child component 當v for用於元素或元件的時候,引用資訊將是包...