v-cloak 解决页面加载时的闪烁问题

闪烁问题的原因在于：

网页还在加载 Vue.js ，而导致 Vue 来不及渲染页面，这时页面就会显示出 Vue 源代码。

v-cloak 指令是 Vue 提供的一种机制：

它保证被添加了 v-cloak 指令的元素在 Vue 渲染页面期间该指令，当页面被 Vue 渲染结束后，v-cloak 指令会被 Vue 移除。

简单来说，在 Vue 渲染页面期间，下面是这样的：

<div id="app" v-cloak>
...
</div>

一旦页面被 Vue 渲染结束，页面就变成这样了：

<div id="app">
  ...
</div>

v-cloak 指令可以被加载任何的元素上。

借助这个特性，我们可以结合 display: none; 样式，解决闪烁问题：

<style type="text/css">
  [v-cloak] {
    display: none;
  }
</style>
<div id="app" v-cloak>
  ...
</div>

在 v-cloak 存在期间，即 Vue 渲染页面期间它是不显示的。一旦 Vue 加载页面结束 v-cloak 被移除，该元素才被显示。