Vue系列(三)之基本語法文本插值

今天先介紹Vue最簡單最基本的語法，聲明式渲染。

Vue實例

上篇文章中我們使用new關鍵字創建了一個Vue實例：

<div id="app">
    <div>messgae：{{message}}</div>
</div>
<script>
    var vm = new Vue({
        //el是css選擇器，或者HTMLElement實例，提供Vue實例掛載的Dom節點
        el:'#app',
        data:{
           message:'hello vue'
        }
    });

</script>

或者（如果沒有提供el選項，需要手動調用mount方法）

var vm = new Vue({
    data:{
       message:'hello vue'
    }
}).$mount('#app');

插值

普通文本

使用 {{ }} 實現數據綁定到視圖：

<div>messgae：{{message}}</div>

var vm = new Vue({
  data:{
       message:'hello vue'
    }
}).$mount('#app');

運行效果：

使用js表達式

可以在{{}}使用簡單的js表達式，例如：

<div>{{num+1}}</div>
<div>{{isRight? name1:name2}}</div>
<div>{{str.split('_').join('')}}</div>

原始html

{{}} 語法會將數據解釋爲普通文本，而不是html。有時我們確實需要插入html而非普通文本（雖然這種情況很少見，至少目前我沒有遇到過這樣的需求，所以這裏簡單帶過。真正用到時，可以去官方文檔查看）。
使用v-html指令：

<div id="app">
    <div>message：{{message}}</div>
    <div>原始html：{{html}}</div>
    <div v-html="html">原始html:</div>

</div>
<script>
    var vm = new Vue({
        data: {
            message: 'hello vue',
            html: '<div style="color: red;">hello world</div>'
        }
    }).$mount('#app');

</script>

運行效果：

新的屬性

注意：由於Vue底層的實現，Vue無法監聽新加的屬性變化。

Vue只在初始化的時候，遞歸data的屬性轉換爲setter/getter方法，使data的屬性可以響應數據變化。所以一個屬性如果沒有在data中聲明，而是後期加進去的，vue監聽不到該屬性的變化，也就無法做到視圖的同步改變。

解決方案有兩種：

data 中聲明所有屬性

既然無法監聽到新添加的屬性，那在data中聲明所有要用到的屬性，並賦予其默認值就可以了。後期屬性改變的時候，vue就可以監聽到屬性變化，做到視圖同步改變了。

Vue的$set()

set api
set()方法向響應式對象中添加一個屬性，並確保這個新屬性同樣是響應式的，且觸發視圖更新。

如下例：info中未聲明weight屬性，在add中直接新增，視圖不會響應改變，使用this.$set()方法可以將新增屬性設置爲響應式的。

    <div>height:{{info.height}}</div>
    <div>weight:{{info.weight}}</div>
    <button @click="add">add</button>

data: {
    name: 'ayy',
    info: {
        height: 165
    }
},
methods: {
    add() {
    	//直接新增，響應不到
        // this.info.weight = 60;
        /*
        * vue的set方法可以新增響應屬性
        * 第一個參數爲要新增的對象
        * 第二個參數爲要新增的屬性名
        * 第三個爲屬性值
        */
        this.$set(this.info,'weight',60);
    }
}

但是set方法不允許動態添加根級響應式屬性，所以如果是根級屬性(data數據對象中第一層屬性)，必須在data中聲明。

如果你使用了未在data中聲明的屬性，Vue 將警告你渲染函數正在試圖訪問不存在的屬性。