技術標籤：前端

在vue中一般很少直接操作DOM，如果需要操作DOM，我們可以通過ref 和$ref來實現。

ref

ref被用來給元素或子元件註冊引用資訊， 引用資訊將會註冊在父元件的$refs物件上，如果是在普通的 DOM元素上使用，引用指向的就是 DOM 元素，如果是在子元件上，引用就指向元件的例項。

當在子元件或者DOM元素上寫 ref="xxx" 時，vm 例項上就有了一個 $refs 屬性，包含了所有註冊過 ref 的 DOM物件

$refs

$refs是一個物件，持有已註冊過ref的所有的子元件。

因此可以通過 this.$refs.xxx.屬性名（style,attr...）從而達到在vue中操作DOM元素的目的了

舉例驗證：

<div id="app">
        <div>
            <h2 ref="name1">這是name1節點元素</h2>
            <p ref="name2">這是name2節點元素</p>
        </div>
 </div>

 mounted() {
                console.log(this);   //vue例項物件
                console.log(this.$refs.name1);   //上面的h2標籤元素
                console.log(this.$refs.name1.textContent);  //標籤內容
                console.log(this.$refs.name2);  //上面的p標籤元素                
            },
 

Vue中ref屬性使用的注意事項

1.在vue中為HTML標籤設定ref屬性，主要是為了一些需要進行操作DOM才能完成的功能而設定的。

2.ref屬性相當於給標籤設定了一個ID，可以使用該特殊標識來進行一些DOM的操作，但是使用的時候有如下幾個注意事項：

• ref屬性值繫結元素都是唯一的，如果一個ref屬性綁定了多個dom節點，那麼這個ref屬性將會預設繫結到最後設定該ref屬性值的DOM節點。
• 使用時不是直接this.ref值進行訪問DOM節點，而是需要通過this.$refs.ref值 進行訪問DOM節點，因為vue會將例項中所有的ref屬性值都儲存到vue例項的,$refs屬性內。
• 所有的ref屬性進行的操作都不是響應式的，所以避免
  在計算屬性 (Computed)，和模板 ({{}})中使用ref屬性。