理论知识
- v-cloak指令(cloak披风、斗篷)
- 由于vue在解析插值表达式时，首先将插值表达式输出在浏览器，其后将插值表达式中的变量替换为具体值，用户可以看到这一过程，即存在闪动问题。
- 原理先通过样式隐藏内容，然后在内容中给插值表达式的变量赋值，最后显示在浏览器中。用户看不到变量替换的过程，进而解决了闪动问题。
实践
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
[v-cloak]{
background: red;
}
</style>
</head>
<body>
<div id="app">
<div v-cloak> {{ msg }}</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
msg:'hello world'
}
})
</script>
</body>
</html>
总结
- 指令的本质是vue作者自定义的网页标签属性。因此他的位置是在标签的左尖括号内部。