Vue 指令 —— v-cloak

版权声明：solo https://blog.csdn.net/sansan_7957/article/details/86537188

官网用法

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

官网示例

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

HTML:
<div v-cloak>
  {{ message }}
</div>

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

什么意思呢？

大家可能都遇到过在 HTML 中使用 Vue 数据绑定的时候，比如上面例子中如果不加 v-cloak的情况下 {{ message }} 会闪烁一下，然后才会替换为我们要渲染的数据。

这是因为 HTML 在渲染的时候 Vue 实例还没有编译完成，{{ message }} 就相当于一个正常的 HTML 文本，当 Vue 实例编译完成时 {{ message }} 会被替换为对应的数据。

再回过头来看文档上的这句话： v-cloak 指令保持在元素上直到关联实例结束编译。v-cloak 这个指令相当于一个“选择器”，Vue 实例编译完成之前它会一直在元素上，通过这个“选择器”可以给对应的元素设置一些样式。比如上面例子中 {{ message }} 不会显示直到 Vue 实例编译完成 {{ message }} 会直接显示渲染结果。

参考：
v-cloak
vue的v-cloak使用