v-cloak 用于在 Vue 实例渲染完成之前隐藏绑定的元素

 如果你是后端开发者（php），在接触一些vue2开发的后台时，会发现有这段代码：

# CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
# 或
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script># HTML
<div id="app">{{ message }}
</div># Javascript
var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
})

后台看是分离的，但实际前端部分依旧使用html+css+js(jq)。

你可能会遇到下面的问题：

 

v-cloak 是 Vue.js 中的一个指令，用于在 Vue 实例渲染完成之前隐藏绑定的元素。它的主要作用是防止页面在加载 Vue 实例时，出现未编译的 Mustache 语法（双大括号）或 Vue 绑定指令，以保持页面的外观一致，直到 Vue 实例准备好并替换了这些绑定。

当 Vue 实例渲染完成时，v-cloak 指令会自动被移除，这样就不会影响到页面的最终呈现。

通常情况下，v-cloak 会与一些 CSS 样式一起使用，以确保在 Vue 实例加载完成之前，绑定的元素保持隐藏状态。例如：

# html
<div id="app" v-cloak>{{ message }}
</div>

# css
[v-cloak] {display: none;
}

在这个示例中，v-cloak 指令被应用到了一个包含 Mustache 语法 {{ message }} 的 div 元素上。在 Vue 实例加载之前，这个 div 元素将会被隐藏，直到 Vue 实例准备好后才会显示出来。

总的来说，v-cloak 主要用于确保在 Vue 实例加载完成之前，隐藏 Vue 模板中的元素，以提供更好的用户体验。

---

在使用 Vue CLI 搭建的 Vue 项目中，通常情况下不会直接用到 v-cloak，因为 Vue CLI 生成的项目已经帮助处理了这些初始化时的闪烁问题。Vue CLI 会在项目配置中处理这些问题，通常会有类似的配置：

module.exports = {// 其他配置...css: {loaderOptions: {// 将 v-cloak 应用到所有组件sass: {additionalData: `[v-cloak] { display: none; }`}}}
};

在这个配置中，将 v-cloak 应用到所有组件，并且使用 CSS 来隐藏这些元素，从而解决了初始加载时的闪烁问题。因此，在使用 Vue CLI 搭建的 Vue 项目中，开发者通常不需要显式地使用 v-cloak。