看一段vue入門代碼

<script>
var vm = new Vue({
            el:'#app',
            data:{
                msg:'hello vanjs',
                msg2:'<h1>你好啊</h1>'
            }
        });
</script>

#app聲明作用域，data中的數(shù)據(jù)綁定需要用在#app下才能生效。
如上vue代碼，在data中給msg變量賦值后，如何綁定到html的元素中呢？

1.插值表達(dá)式 {{ }}

<div id='app'>
  <h1>{{msg}}</h1>
</div>

直接使用插值表達(dá)式，在網(wǎng)絡(luò)不佳或加載慢的時(shí)候會(huì)有閃爍問題（直接顯示 {{msg}}）.
如何解決這個(gè)問題呢？可以使用 v-cloak 或 v-text。

2.v-cloak

<h1 v-cloak>{{msg}}</h1>

<style>
    [v-cloak]{
        display: none;
    }
</style>

v-cloak需要配合插值表達(dá)式{{msg}}和css樣式 display: none; 使用。在{{msg}}數(shù)據(jù)未加載時(shí)，display: none;起作用，隱藏元素；數(shù)據(jù)加載后，元素的v-cloak屬性消失，元素顯示，且數(shù)據(jù)顯示正常。

3.v-text

<h1 v-text='msg'></h1>

v-text這樣就能解決閃爍問題，似乎比v-cloak更方便。
不同點(diǎn)：插值表達(dá)式支持字符拼接。

<h1>...{{msg}}...</h1>

不過這可以通過下面的代碼實(shí)現(xiàn)相同的功能：

<h1>...<span v-text='msg'></span>...</h1>

v-cloak 和 v-text都會(huì)把變量的內(nèi)容直接填充，不會(huì)轉(zhuǎn)義html元素。如果需要轉(zhuǎn)義html元素，需要用到 v-html

4.v-html

<div v-text='msg2'></div>
<div v-html='msg2'></div>

效果圖如下，可以看到兩者區(qū)別。

image