在沒有學習所以vue之前，我們實現直接操作頁面上的dom元素都是通過js/jquery，因為jquery對dom元素的操作非常的方便。但是學習了vue之後，對dom的操作完全交給vm了，這個時候手動的獲取dom元素再使用js/jquery就沒有那麼方便。於是出現了ref，即ref的功能之一就是獲取dom元素的，當然還有其他的功能。
ref主要的兩個作用如下：
執行**，從結果中可以看到，在beforemount 這個鉤子函式中，我們是無法獲取到這個dom 元素的值，結合之前學習的 vue 生命週期的相關知識，當執行到beforemount 鉤子函式時，vue雖然已經將模板編譯完成，但是尚未掛載到頁面 dom 元素上，還只是掛載在虛擬dom上，因此我們可以得出 ref是在頁面渲染完成後才被建立的。
在child元件中寫入如下**
獲取當前時間
在parent元件中寫入如下**：
可以看到，當我們將 ref新增到子元件上，我們就可以在 vue 例項上獲取到這個註冊的元件引用，同註冊的dom 元素一樣，我們都可以使用新增的ref 屬性值作為key 獲取到註冊的物件。此時，我們就可以獲取到這個子元件上的 data選項和 methods 選項。
因為vue 採用 virtual dom 的做法渲染網頁，如果我們直接操作 dom，很容易產生實際網頁跟 vue 產生的 virtual dom 不同步的問題，而通過使用ref 屬性之後，在一些需要獲取 dom 元素的情況下，我們就可以很方便的獲取 dom 元素。當然，當我們決定在專案中使用 vue，還是需要轉變我們的思路，將操作 dom 轉變成運算元據。同樣的，通過將ref屬性新增到子元件上，我們就可以很輕鬆的獲取到子元件的相關資訊，這無疑給父元件獲取子元件資料、呼叫子元件的方法提供了一種新的思路。
vue中 ref使用說明
ref如果是繫結在元件中，那麼通過this.ref s.re fnam e獲取到 的是乙個 元件物件 ref 如果是綁 定在普通 元素中，那麼通過 this refs.refname獲取到的是乙個元件物件。ref如果是繫結在普通元素中，那麼通過this.refs.r efna me獲取 到的是一 個...
Vue 中的 ref 和 refs 的使用
在vue中一般很少直接操作dom，如果需要操作dom，我們可以通過ref 和 ref來實現。ref 被用來給元素或子元件註冊引用資訊，引用資訊將會註冊在父元件的 refs 物件上，如果是在普通的 dom元素上使用，引用指向的就是 dom 元素，如果是在子元件上，引用就指向元件的例項。當在子元件或者d...
vue中ref的用法
1 ref加在普通元素上，用this.refs.refname獲取dom元素 定義的mycomponent.vue 邊界值練習 data 在methods中 clickf 2 加在子元件上，使用this.refs.refname獲取元件例項，可以使用元件的所有方法和變數 子元件在父元件中被呼叫 提交...