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: {}
})
1
2
3
4

HTML：

<div id="app">
  <!-- 若不加v-pre指令，直接编译会报错，因为data中没有a和b属性 -->
  <div v-pre>
    {{a}} + {{b}}
  </div>
</div>
1
2
3
4
5
6

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);
1
2
3
4
5
6
7
8
9
10

HTML：

<div id="app">
  <!-- v-cloak指令只是在标签中加入一个v-cloak自定义属性，在HTML还编译完成之后该属性会被删除，可以CSS对标签设置样式，表示HTML还未被编译，比如可以设置display: none; -->
  <div v-cloak>
    {{a}} + {{b}}
  </div>
</div>
1
2
3
4
5
6

CSS：

<style>
  /* 有v-cloak属性的标签都不显示 */
  [v-cloak] {
    display: none;
  }
</style>
1
2
3
4
5
6