Vue.js學(xué)習(xí)筆記： 插值

文本：數(shù)據(jù)綁定最基礎(chǔ)的形式就是文本插值，使用一對(duì)雙大括號(hào)

雙大括號(hào)標(biāo)簽會(huì)被相應(yīng)數(shù)據(jù)對(duì)象的msg屬性的值替換，每當(dāng)這個(gè)屬性變化時(shí)它也會(huì)更新

HTML：

<span id="test01">Message:`msg`</span>

JS：

var vm = new Vue({
    el:'#test01',
    data:{
        msg:'數(shù)據(jù)綁定語法--文本插值'
    }
});

{{變量名}}：表示綁定的變量，調(diào)用時(shí)需要用this.變量名

el:表示指令綁定的元素

vm:表示擁有該指令的上下文ViewModel

示例中的id也可以改為class，但是如果頁面中含有多個(gè)相同的class的話，只對(duì)第一個(gè)有效

HTML:

<span class="test01">Message:`msg`</span>

JS:

var vm = new Vue({
    el:'.test01',
    data:{
        msg:'數(shù)據(jù)綁定語法--文本插值'
    }
});

也可以只處理單次插值，今后的數(shù)據(jù)變化就不會(huì)再引起插值更新了，這句話怎么理解呢？看看下面的實(shí)例

HTML：

<div id="test02">
    <input type="text" v-model="msg">
    <p>{{* msg}}</p>
</div>

JS：

var vm2 = new Vue({
    el:'#test02',
    data:{
        msg:'內(nèi)容一起改變了嗎？'
    }
});

查看頁面效果截圖發(fā)現(xiàn)，隨著輸入框內(nèi)容的改變（無論是添加內(nèi)容還是刪除原來的內(nèi)容），p標(biāo)簽的內(nèi)容都不會(huì)發(fā)生任何改變，也就是說數(shù)據(jù)變化并沒有引起插值更新

雙大括號(hào)將數(shù)據(jù)解析成純文本，而三大括號(hào)將數(shù)據(jù)解析成真正的HTML字符串

HTML：

<span id="test03">雙大括號(hào)解析成純文本:`msg`</span><br>
<span id="test04">三大括號(hào)解析成HTML字符串：{`msg`}</span>

JS：

var vm3 = new Vue({
    el:'#test03',
    data:{
        msg:'<a href="#">鏈接</a>'
    }
});

var vm4 = new Vue({
    el:'#test04',
    data:{
        msg:'<a href="#">鏈接</a>'
    }
});

雙大括號(hào)標(biāo)簽也可以用在HTML特性內(nèi)

HTML：

<div id="item-`id`"></div>

頁面效果截圖：

文本的取值除了可以是string類型以外，還可以是number，boolean，array，json, 我們可以看看下面的實(shí)例代碼

<div id="box">
    <p>`msg`</p>
    <p>`msg1`</p>
    <p>`msg2`</p>
    <p>`msg3`</p>
    <p>`arr`</p>
    <p>`json`</p>
</div>

new Vue({
    el:'#box',
    data:{
        msg:'Hello World!',
        msg1:2016,
        msg2:true,
        msg3:false,
        arr:['nokia','samsung','apple','huawei','htc'],
        json:{a:'apple', b:'banana', c:'cherry', d:'durian'}
    }
})