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>
复制代码