使用 v-cloak 隐藏 Vuejs 渲染中的元素

你可能在某个地方看到过 v-cloak 这个指令，但是如果你没遇到对应的应用场景的话，估计你也不会注意到这个小小的指令。

问题：Vuejs 在渲染元素的时候，如果我们仔细的去看，应该能看到一个闪现的过程，
这是因为 Vuejs 读取和渲染你的元素需要一定时间。所以会出现这个问题，这对于一下强迫症来说，简直要命，所以我们怎么解决这个问题呢？

使用 v-cloak 指令就好，比如：

    <div id="app">
      <div>
        Hello {{ name }}
      </div>
    </div>

    <script src="vue.min.js"></script>
    <script>
      new Vue({
        el: '#app',
        data () {
          return {
            name: 'CODECASTS'
          }
        }
      })
    </script>

上面的例子极其简单，我们在刷新页面的时候应该可以看到 {{ name }} 的闪现，但是如果我们加上 v-cloak ：

<div id="app">
  <div v-cloak> 注意这里
    Hello {{ name }}
  </div>
</div>

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

我们在对应的元素加上了 v-cloak 指令，并且也要添加对应的 style 样式声明。这样我们就看避免闪现的问题了。
更多的文档可以查看：https://vuejs.org/v2/api/#v-cloak

其实这个指令你是可以用到任何一个 Vuejs 的组件当中的，比如这样 <component v-cloak></component>