今天再來看幾個vue指令，它們跟v-if及v-bind一樣都是帶有v-帶特殊前綴的HTML特性指令，可以讓我們對DOM元素做各種處理！

v-once指令

還記得剛開始學的資料綁定嗎？

Vue[05]-資料綁定( https://ithelp.ithome.com.tw/articles/10201593 )

那時我們綁了一個title資料進去，只要資料一變，頁面重新渲染後也會同步改變，非常方便！但我們做網站，各種情況、需求都會遇上，如果只想要一開始渲染時把資料帶進去就好，之後就不需要再更新它呢？這時就加入v-once，範例如下：

<template>
  <div id="app">
    <h1 v-once>{{ title }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        title:'vue好簡單'
      }
    }
  }
</script>

從上面範例可以看到，套入v-once後的元素，在第一次渲染後就被視為靜態內容，因此如果你的元素不需要一直重複更新，那就使用它！

另外要注意的是v-once不只會讓效果套用在元素本身上，連帶它的子層也會套用此效果，如下範例：

<template>
  <div id="app">
    <div v-once>
      <h1>{{ title }}</h1>
      <p>現在子層也套入了v-once</p>
    </div>
  </div>
</template>

v-pre指令

v-pre這個指令會讓指定元素被忽略，如下範例：

<template>
  <div id="app">
    <h1>{{ title }}</h1>
    <h1 v-pre>{{ preTitle }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        title:'正常綁定資料',
        preTitle:'我被下了v-pre'
      }
    }
  }
</script>

結果會你會發現，兩組都綁了資料，但第二組加了v-pre的<h1>被vue忽略了，只剩下{{ preTitle }}被當成文字包在<h1>裡，沒有綁定的效果發生，其實這是為了加快編譯速度，而用在大量沒指令的結構上，讓vue能跳過它們，當然如果是像上面範例一樣，只用在一組<h1>，那就變的很沒意義了，因為內容太少跟本沒差！

v-cloak指令

v-cloak指令只會存在編譯過程中，到實體編譯結束後就消失，這是做什麼用的？如果頁面在編譯過程裡，不小「走光」讓html標籤裡寫的變數(如：${ item.title })非常短暫的顯示在頁面上(很可能不到1秒)，但實在很難看，這不該發生，這時就加入v-cloak，並用css設定為display:none;如下範例：

<template>
  <div id="app">
    <div v-cloak>${ item.title }</div>
  </div>
</template>

<style>
  [v-cloak] {
      display: none;
  }
</style>

上面這樣寫是什麼意思？記得剛說的「v-cloak指令只會存在編譯過程中」嗎？而我們對v-cloak加了display: none;，相對而言代表「在編譯過程中」是display: none;看不見的，只有在編譯結束後才會顯示，這樣就簡單解決「走光」問題了！但我自已是還沒在實做中遇到「走光」這種問題…。

v-html指令

一般資料綁定，如果我們直接把html標籤綁入，它會變成文字顯示在頁面上(雙大括號會將數據當成文字)，但如果使用v-html，就能實現直接把html標籤綁入頁面中，如下範例：

<template>
  <div id="app">
    <div v-html="ithelp"></div>
    <div>{{youtube}}</div>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        ithelp: '<a target="_black" href="https://ithelp.ithome.com.tw/">it邦幫忙</a>',
        youtube: '<a target="_black" href="https://www.youtube.com/?gl=TW">聽音樂去！</a>'
      }
    }
  }
</script>

• 第一組「it邦幫忙」<a>標籤連結變成字串顯示在頁面上。
• 第二組「聽音樂去！」為html <a>標籤連結。

但要注意的是，Vue不是基於字符串的模板引擎，它不可以代替Component用！！！需要組合或重覆使用元件，一定要用之前教的「Vue[08]-Components」( https://ithelp.ithome.com.tw/articles/10202766 )！
另外，只能對可信任的內容使用v-html，絕不可對「用戶」提供的內容使用v-html，不然很容易中「XSS攻擊」

維基百科 解說XSS攻擊https://zh.wikipedia.org/wiki/%E8%B7%A8%E7%B6%B2%E7%AB%99%E6%8C%87%E4%BB%A4%E7%A2%BC

希望以上內容對大家有幫助！