看一段vue入门代码
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello vanjs',
msg2:'<h1>你好啊</h1>'
}
});
</script>
#app声明作用域，data中的数据绑定需要用在#app下才能生效。
如上vue代码，在data中给msg变量赋值后，如何绑定到html的元素中呢？
1.插值表达式 {{ }}
<div id='app'>
<h1>{{msg}}</h1>
</div>
直接使用插值表达式，在网络不佳或加载慢的时候会有闪烁问题（直接显示 {{msg}}）.
如何解决这个问题呢？可以使用 v-cloak 或 v-text。
2.v-cloak
<h1 v-cloak>{{msg}}</h1>
<style>
[v-cloak]{
display: none;
}
</style>
v-cloak需要配合插值表达式{{msg}}和css样式 display: none; 使用。在{{msg}}数据未加载时，display: none;起作用，隐藏元素；数据加载后，元素的v-cloak属性消失，元素显示，且数据显示正常。
3.v-text
<h1 v-text='msg'></h1>
v-text这样就能解决闪烁问题，似乎比v-cloak更方便。
不同点：插值表达式支持字符拼接。
<h1>...{{msg}}...</h1>
不过这可以通过下面的代码实现相同的功能：
<h1>...<span v-text='msg'></span>...</h1>
v-cloak 和 v-text都会把变量的内容直接填充，不会转义html元素。如果需要转义html元素，需要用到 v-html
4.v-html
<div v-text='msg2'></div>
<div v-html='msg2'></div>
效果图如下，可以看到两者区别。
image
