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