場景介紹
當我們需要在js中獲取某個節點的時候，我們一般會採用什麼呢，js中可以是document.getelementById("dom"),jquery中可以是$("#dom"),那麼vue中我們可以怎樣快速獲取指定節點的dom信息呢，我想說的是：ref爲你而來。
實例介紹
在介紹實例之前，我們先來說一下ref 和$refs的區別：
| 屬性 | 詳情 |
|---|---|
| ref | 用於dom元素中，用於標記dom元素。 |
| $refs | 用於create或method方法中，用於獲取標記的dom元素。 |
由以上表格可以看出，我說他們是互生關係實至名歸。
ref在實例中的應用
在以下的代碼片段中，我們將mail註冊在父組件$refs 對象中,第二種是我們將mailMsg註冊到 $refs ,註冊後我們獲取的是整個dom元素。
<div class="mail">
<span>郵箱：</span>
<input type="text" class="text" v-model="mail" ref="mail"/>
<img src="./fhz.png" @click="clearMail" v-show="isClearMail">
<p ref="mailMsg">*請填寫正確郵箱</p>
</div>
$refs在實例中的應用
$refs 用於獲取已註冊的元素。比如下面我們設置mail的焦點（或者或者整個元素）可以通過以下的方式實現。
mounted(){
this.$refs.mail.focus();
},
重要提醒
關於 ref 註冊時間的重要說明：因爲 ref 本身是作爲渲染結果被創建的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應式的，因此你不應該試圖用它在模板中做數據綁定。