資訊專欄INFORMATION COLUMN
摘要：在模板中放入太多的邏輯會讓模板過重且難以維護。它會根據控件類型自動選取正確的方法來更新元素。指令需要使用的語法，指的是原數據數組，指的是迭代的數組元素。
注：本教程所使用的vue版本為 2.5.16
MVC與MVVM
MVC（Model-View-Controller）：
M指的是從后臺獲取到的數據， V指的是顯示動態(tài)數據的html頁面， C是指響應用戶操作、經過業(yè)務邏輯處理后去更新視圖的過程，在此過程中會導致對view層的引用。
這里我們發(fā)現我們網站的大量代碼都被放在Controller，導致Controller代碼臃腫；而且不利于單元測試，因為業(yè)務邏輯處理和視圖更新操作會混雜在一起。
MVVM (Model-View-ViewModel)：
MVVM是MVC的一個衍生模型，這里的 ViewModel 把業(yè)務邏輯處理、用戶輸入驗證等跟視圖更新操作分離開了。MVVM是數據驅動的，我們只需要關心數據的處理邏輯即可，它會通過模板渲染去多帶帶處理視圖的更新而不需要我們親自去操作Dom元素。
實例化Vue對象
Vue會將渲染模板結合數據對象生成的html結構替換掉根節(jié)點，只要數據對象上的message發(fā)生改變，插值處的內容就會跟著改變，上述例子的實際效果如下：
message: hello world
模板語法
上面的雙大括號綁定是vue最常用的數據綁定方式，除了雙大括號還可以使用v-text屬性進行綁定
message:
如果要綁定html結構的話，需要使用到v-html指令，否則vue會把這段html代碼看成字符串直接綁定到對應位置
new Vue({
el: "#app",
data:{
message: "hello world",
html: "hello world"
},
template: "message: "
})
需要綁定html元素特性的時候需要使用v-bind指令，v-bind可以省略
雙大括號的插值方法還可以使用js表達式，這些表達式會在所屬 Vue 實例的數據作用域下被解析
{{ number + 1 }}
{{ boolean ? "true" : "false" }}
{{ message.split("").reverse().join("") }}
注意，這里的javascript語句只能是單個表達式，其他的聲明變量、流程控制語法都不會生效
事件綁定
除了數據綁定外，vue還幫我們優(yōu)化了事件綁定流程，指令為v-on，可縮寫為@，后面是事件名稱
打印1 打印1
僅僅一句js表達式是不夠支撐我們的日常開發(fā)的，所以vue給我們提供了自定義事件處理方法
new Vue({
el: "#app",
data: {
message: "hello world"
},
//log為methods中定義的函數名，vue會默認把原生DOM事件對象當做參數傳到處理函數中
template: "Click Me",
methods: {
log: function(event){
console.log(this.message);
event.stopPropagation();
}
}
});
除了直接綁定到一個方法，也可以在內聯 JavaScript 語句中調用方法
Click Me
計算屬性 computed
模板內的表達式非常便利，但是設計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如這個字符串反轉：
{{ message.split("").reverse().join("") }}
這種情況我們可以用 computed 解決
new Vue({
el: "#app",
data: {
message: "hello"
},
template: "{{ reversedMessage }}", //olleh
computed: {
reversedMessage: function(){
return this.message.split("").reverse().join("");
}
}
});
這里看渲染模板就直觀多了
監(jiān)聽屬性 watch
Vue 提供了 watch 這種通用的方式來觀察和響應 Vue 實例上的數據變動
問題:
{{ answer }}
表單綁定，指令為 v-model
v-model 指令在表單 及