看一段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