Vue教程05：v-pre、v-cloak指令

閱讀更多系列文章請訪問個人GitHub博客，示例代碼請訪問這裏。

v-pre指令

代碼示例：/lesson05/01. v-pre指令.html

v-pre能夠用來阻止預編譯，有v-pre指令的標籤內部的內容不會被編譯，會原樣輸出。

若是已知頁面內部有大段內容無需編譯，使用v-pre指令阻止編譯能夠提升性能，同時能夠防止頁面內有可能致使Vue編譯出錯的代碼存在。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或掛載點。
  data: {}
})
複製代碼

HTML：

<div id="app">
  <!-- 若不加v-pre指令，直接編譯會報錯，由於data中沒有a和b屬性 -->
  <div v-pre>
    {{a}} + {{b}}
  </div>
</div>
複製代碼

v-cloak指令

代碼示例：/lesson05/02. v-cloak指令.html

v-cloak指令只是在標籤中加入一個v-cloak自定義屬性，在HTML還編譯完成以後該屬性會被刪除，能夠CSS對標籤設置樣式，表示HTML還未被編譯，好比能夠設置display: none;

JavaScript：

// 延遲3秒實例化Vue，若不加v-cloak指令，在頁面上會顯示{{a}} + {{b}}，1秒以後才渲染出10 + 20。
setTimeout(() => {
  let vm = new Vue({
    el: '#app', // 根元素或掛載點。
    data: {
      a: 10,
      b: 20
    }
  })
}, 3000);
複製代碼

HTML：

<div id="app">
  <!-- v-cloak指令只是在標籤中加入一個v-cloak自定義屬性，在HTML還編譯完成以後該屬性會被刪除，能夠CSS對標籤設置樣式，表示HTML還未被編譯，好比能夠設置display: none; -->
  <div v-cloak>
    {{a}} + {{b}}
  </div>
</div>
複製代碼

CSS：

<style>
  /* 有v-cloak屬性的標籤都不顯示 */
  [v-cloak] {
    display: none;
  }
</style>
複製代碼