Vue.js中的v-cloak指令及使⽤详解
先来看下vue.js 中的v-cloak 指令
可以使⽤ v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。
员工职业发展规划
当⽹络较慢，⽹页还在加载 Vue.js ，⽽导致 Vue 来不及渲染，这时页⾯就会显⽰出 Vue 源代码。我们可以使⽤ v-cloak 指令来解决这⼀问题。
html：
<div id="app">
{{context}}
</div>
js：
<script>
var app = new Vue({
el: '#app',
data: {
context:'互联⽹头部玩家钟爱的健⾝项⽬'
}
});
</script>
效果：
我们使⽤ v-cloak 指令来解决屏幕闪动的问题吧O(∩_∩)O~
js 不变，在 div 中加⼊ v-cloak 指令。
html：
<div id="app" v-cloak>
{{context}}
</div>
css：
[v-cloak]{
display: none;
99宿舍网准考证找回
}
使⽤ v-cloak 指令之后的效果（ demo ）：
在简单项⽬中，使⽤ v-cloak 指令是解决屏幕闪动的好⽅法。但在⼤型、⼯程化的项⽬中（webpack、vue-router）只有⼀个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要⽤到 v-cloak 指令咯。
下⾯看下Vue中v-cloak使⽤详解
呵责的意思这次给⼤家带来Vue中v-cloak使⽤详解，Vue中v-cloak使⽤的注意事项有哪些，下⾯就是实战案例，⼀起来看⼀下。
v-cloak 的作⽤和⽤法
⽤法：
这个指令保持在元素上直到关联实例结束编译。和 css 规则如[v-cloak] { display: none }⼀起⽤时，这个指令可以隐藏未编译的Mustache 标签直到实例准备完毕。官⽅API{{msg}}
tTimeout(() => {
oceanicnewVue({
el:'#app',
data: {
msg:'hello'
}
同传设备})
},2000)
v-cloak 可以解决这⼀问题，在 css 中加上HTML 绑定 Vue实例，在页⾯加载时会闪烁然后才会出现加载完成字样，为了效果更明显，我们可以延后加载 Vue 实例
[v-cloak] {
display: none;
}
Vue1.x 与 Vue2 中 v-cloak 的不同在 html 中的加载点加上 v-cloak，就可以解决这⼀问题
英语作文经典句型Vue1 中，允许将 Vue 实例挂载在 body 上，⽽ Vue2 是不允许的，想对整个页⾯实例化，需要另外⽤⼀个 p 来容纳整个页⾯内容，对其进⾏实例化
这样在使⽤ v-cloak 时，同样需要⽤到这种⽅法天津街舞
为什么我⽤的 v-cloak ⽆效？
在实际项⽬中，我们常通过 @import 来加载 css ⽂件
@import"style.css"
@import"index.css"
福步论坛
为了避免这种情况，我们可以将[v-cloak]写在 link 引⼊的 css 中，或者写⼀个内联 css 样式，这样就得到了解决。⽽@import 是在页⾯ DOM 完全载⼊后才会进⾏加载，如果我们将[v-cloak]写在@import 加载的 css ⽂件中，就会导致页⾯仍旧闪烁。
总结优游自在>speed demon
以上所述是⼩编给⼤家介绍的Vue.js 中的 v-cloak 指令及使⽤详解，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
