Vue.js(二) 雙向資料繫結(資料驅動)
一：雙向資料繫結簡介
Vue最核心的功能時雙向資料繫結和元件模組化。
雙向繫結：
- 當檢視(View)的值發生改變時會自動更新model的值；
- 當model的值發生改變時會自動更新檢視(View);
這裡的檢視View是指html中的標籤元素，也就是DOM元素；這裡的model就是指JavaScript中的物件，也就是用object{foo: bar}。
二：雙向資料繫結JS實現
下面示例寫了一個基本雙向資料繫結的實現，開啟控制檯Console我們可以看到，當在input中輸入值時也就是input的值發生改變時，input中的value值會自動賦值給user物件的username屬性；當物件user的username屬性的值發生改變時也會改變input標籤的value值，即View也會跟著改變。
<html>
<head>
<title>雙向資料繫結</title>
<script type="text/javascript">
// model
var user = {username: ''};
// 當view(DOM元素)發生了改變也會更改model的值
function viewChangeModel() {
// 更改model的值
var newValue = document.getElementById("view").value;
user.username = newValue; 
三：雙向資料繫結Vue實現
上面示例實現雙向資料繫結需要額外寫程式碼來實現，但是在Vue中這些功能就能輕易實現。Vue實現雙向資料繫結是通過以下兩個功能來實現的：
Vue.js主要負責的是上圖綠色正方體ViewModel的部分，其在View層（即DOM層）與Model層（即JS邏輯層）之間通過ViewModel綁定了DOM Listeners與Data Bingings兩個相當於監聽器的東西。當View層的檢視發生改變時，Vue會通過DOM Listeners來監聽並改變Model層的資料。相反，當Model層的資料發生改變時，其也會通過Data Bingings來監聽並改變View層的展示。這樣便實現了一個雙向資料繫結的功能，也是Vue.js資料驅動的原理所在。
- DOM Listeners(DOM 監聽器)：監聽DOM元素(也就是html標籤)的改變，當DOM發生改變時會自動更新model的值；
- Data Bindings(資料繫結)：當model的值發生改變時會自動更新DOM元素的展示；
Vue.js是一款輕量級的以資料驅動的前端JS框架，通過資料的改變來實現頁面的更新與展示。與jQuery最大的不同點在於jQuery通過操作DOM來改變頁面的顯示，而Vue通過操作資料來。相比而言改變資料操作更加簡單。
使用Vue演示雙向資料繫結
關於使用Vue-cli來搭建專案請看Vue.js + element-ui 掃盲
HelloWorld.vue
<template>
<div>
Usernanme <input v-model="username"/> {{username}} <br/>
<button @click="changeModel">this.username='mengday'</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
username: ''
}
},
methods: {
changeModel() {
this.username = 'mengday'
}
}
}
</script>
在input中每輸入一個字元username的值都會發生改變，通過點選按鈕來觸發username改變，可以看到input中展示也會跟著同步改變。
注意：示例程式碼中的template標籤、@click、v-model、以及export default要匯出的物件都是Vue中的內容。後面會介紹。
文字插值表示式 {{ key }}
上面示例中使用{{ key }}這種語法稱之為文字插值表示式，key為data函式返回的物件屬性名，文字插值表示式的作用是獲取該屬性對應的值作為普通文字。就是一種快捷獲取data函式返回的物件的屬性的值。
插值表示式內也可以做一些簡單的計算，如 {{ count + 1}}、{{str.split(" ")}} 等等。