v-cloak

• 不需要表达式
• 用法：这个指令保持在元素上直到关联组件实例结束编译。和 CSS 规则如[v-cloak]{display: none}一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。

//CSS
[v-cloak] {
   display: none;
}

//html
<div v-cloak>
	{{ message }}
</div>

<div>不会显示，直到编译结束。

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

<div id="app">
  {{context}}
</div>
js：

<script>
  var app = new Vue({
    el: '#app',
    data: {
      context:'互联网头部玩家钟爱的健身项目'
    }
  });
</script>