Vue.js Directives Vue 常用的內建指令

之前的幾篇都有介紹此表前半段的 Vue 內建指令用法，這裡要介紹最後面的兩個內建指令ref和v-cloak
先來 codepen 看看：Vue.Js ref 唯一識別與 v-cloak 隱藏表達式

指令	作用	Vue
v-if	如果為 `true`, 當下的標籤元素才會輸出渲染到頁面
v-html	更新元素的 `innerHTML`
v-else	如果為 `false`, 當前標籤才會輸出到頁面
v-show	通過控制 `display` 樣式來達到控制顯示和隱藏效果
v-for	遍歷陣列或物件，渲染出列表
v-text	更新元素的 `textContent`
v-on	綁定事件監聽, 一般簡寫為`@`
v-bind	強制綁定解析表達式, 可以省略 `v-bind` 一般簡寫為`:`
v-model	雙向資料綁定
ref	為某個元素註冊一個唯一標識, vue 物件通過 `$refs` 屬性訪問這個元素物件
v-cloak	使用它防止閃現表達式, 與 css 配合: `[v-cloak] { display: none }`

ref 元素的唯一識別

給需要一個標籤一個唯一識別，可用ref，但如何透過我們給標籤的ref取得標籤的內容，在實例的方法裡，可以使用$refs這個方法取得：this.$refs.content.textContent，可選用innerText或者是textContent效果是一樣的。

ref的作用是為某個元素註冊一個唯一標識, vue 物件會透過 $refs 屬性來訪問這個元素物件或其內容。

參考：API — Vue.js ref

v-cloak 防止在頁面出現 Vue 的表達式

因為程式是一行行執行的，有時因為頁面跳轉的關係，程式還沒讀取完即出現在頁面上，這時 Vue 的表達式像是就會被看見，為了避免這樣的狀況產生，可以使用在標籤上使用v-cloak，並在 Style 以屬性選擇器[v-cloak]選取，並給予display:none先隱藏它，直到程式讀取到資料後，這個屬性會自動地被拿掉，就可預防出現 Vue 的表達式。
HTML 部分

來看看使用ref和v-cloak的範例

<p ref="content">Hello Paris</p>
<button @click="hint">Hint</button>
<!-- v-cloak -->
<p v-cloak>Hello Taipei</p>

JavaScript 部分

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Taipei',
  },
  methods: {
    hint() {
      alert(this.$refs.content.textContent);
      alert(this.$refs.content.innerText);
    },
  },
});

參考：API — Vue.js v-cloak

v-once 只渲染元素和元件一次

有些元素在頁面中並不需要每次都渲染，如果使用v-once，Vue 就只會渲染元素和元件一次，之後如果重新渲染，元素/元件及其所有 DOM Tree 的子節點就會被視為靜態的內容並略過，這樣可以有助於優化效能。
HTML 部分

<div id="app">
    <div v-once>
        {{content}}
    </div>
</div>

JavaScript 部分

const app = new Vue({
  el: '#app',
  data: {
    content: '第一次的文字內容',
  },
});
// 第二次給值渲染
app.content = '第二次的文字更新';

以上的範例即使使用app.content再次選染，但值還是會是第一次被選染的值，因為渲染一次之後就會被當成靜態元素處理。

參考：API — Vue.js v-once