Vue--防止页面闪烁

vue会把{{ xxx }} 编译成我们指定的数据，但是在编译的那一刹那间， {{ xxx }} 还是会显示出来的。

方案1 （使用v-html替代 {{ }} ）

<div id='app'>
　　<span v-html='msg'></span>
</div>
<script src='js/vue.js'></script>
<script>
　　var vm = new Vue({
　　　　el : '#app',
　　　　data : {
　　　　　　msg : 'hello vue'
　　　　}
});
</script>

方案2 （使用v-text替代 {{ }} ）

<div id='app'>
　　<span v-text='msg'></span>
</div>
<script src='js/vue.js'></script>
<script>
　　var vm = new Vue({
　　　　el : '#app',
　　　　data : {
　　　　　　msg : 'hello vue'
　　　　}　　　　
});
</script>

方案3 （使用v-cloak）

<!doctype html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>v-cloak</title>
　　<style>[v-cloak]{display: none;}</style>
</head>
<body>
　　<div id='app' v-cloak>
　　　　{{msg}}
　　</div>
<script src='js/vue.js'></script>
<script>
　　var vm = new Vue({
　　　　el : '#app',
　　　　data : {
　　　　msg : 'hello vue'
　　}
});
</script>
</body>
</html>

v-cloak写在最外层的div即可。这样里面的{{xxx}}还没被编译完成的时候就不会被显示出来。推荐使用这种方法解决闪烁问题