Vue.js學習筆記： 插值

文本：數據綁定最基礎的形式就是文本插值，使用一對雙大括號

雙大括號標簽會被相應數據對象的msg屬性的值替換，每當這個屬性變化時它也會更新

HTML：

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

JS：

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

{{變量名}}：表示綁定的變量，調用時需要用this.變量名

el:表示指令綁定的元素

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

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

HTML:

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

JS:

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

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

HTML：

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

JS：

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

查看頁面效果截圖發現，隨著輸入框內容的改變（無論是添加內容還是刪除原來的內容），p標簽的內容都不會發生任何改變，也就是說數據變化并沒有引起插值更新

雙大括號將數據解析成純文本，而三大括號將數據解析成真正的HTML字符串

HTML：

<span id="test03">雙大括號解析成純文本:`msg`</span><br>
<span id="test04">三大括號解析成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>'
    }
});

雙大括號標簽也可以用在HTML特性內

HTML：

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

頁面效果截圖：

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

<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'}
    }
})