斗篷指令

斗篷指令

简单来说一下原理

出现闪烁的原因

页面上来就把 {{ msg }} 这类代码加载出来了原样现实在屏幕上，但是那会儿vue环境还没有加载好。等环境加载好了之后会把msg又替换成了正常的样子。故这个过程出现了闪烁。

如何解决闪烁？

使用斗篷指令v-cloak，把v-cloak属性所涵盖的标签制成 displaty：none。所以上来就把{{ msg }}这类代隐藏掉了，然后vue加载好了之后 v-cloak属性会自动在标签中移除掉。那么有vue环境了，原来的标签就又显示出来了，故做到了避免页面闪烁。

详细代码

<style type="text/css">
    [v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
    {{ msg }}
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			msg: "message"
		}
	})
</script>
<!-- 避免页面闪烁-->