Vue-MVVM模式-簡單解析
Vue.js介紹
Vue.js是當下很火的一個JavaScript MVVM庫，它是以資料驅動和元件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。
如果你之前已經習慣了用jQuery操作DOM，學習Vue.js時請先拋開手動操作DOM的思維，因為Vue.js是資料驅動的，你無需手動操作DOM。它通過一些特殊的HTML語法，將DOM和資料繫結起來。一旦你建立了繫結，DOM將和資料保持同步，每當變更了資料，DOM也會相應地更新。
當然了，在使用Vue.js時，你也可以結合其他庫一起使用，比如jQuery。
MVVM模式
下圖不僅概括了MVVM模式（Model-View-ViewModel），還描述了在Vue.js中ViewModel是如何和View以及Model進行互動的。 
ViewModel是Vue.js的核心，它是一個Vue例項。Vue例項是作用於某一個HTML元素上的，這個元素可以是HTML的body元素，也可以是指定了id的某個元素。
當建立了ViewModel後，雙向繫結是如何達成的呢？
首先，我們將上圖中的DOM Listeners和Data Bindings看作兩個工具，它們是實現雙向繫結的關鍵。
從View側看，ViewModel中的DOM Listeners工具會幫我們監測頁面上DOM元素的變化，如果有變化，則更改Model中的資料；
從Model側看，當我們更新Model中的資料時，Data Bindings工具會幫我們更新頁面中的DOM元素。
Hello World示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--這是我們的View-->
<div id="app">
{{ message }}
</div>
</body>
<script - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
使用Vue的過程就是定義MVVM各個組成部分的過程的過程。
定義View
定義Model
建立一個Vue例項或”ViewModel”，它用於連線View和Model
在建立Vue例項時，需要傳入一個選項物件，選項物件可以包含資料、掛載元素、方法、模生命週期鉤子等等。
在這個示例中，選項物件的el屬性指向View，el: ‘#app’表示該Vue例項將掛載到<div id="app">...</div>這個元素；data屬性指向Model，data: exampleData表示我們的Model是exampleData物件。
Vue.js有多種資料繫結的語法，最基礎的形式是文字插值，使用一對大括號語法，在執行時{{ message }}會被資料物件的message屬性替換，所以頁面上會輸出”Hello World!”。
Vue2.0已出，寫法上如有誤差請以官網為準
雙向繫結示例
MVVM模式本身是實現了雙向繫結的，在Vue.js中可以使用v-model指令在表單元素上建立雙向資料繫結。
<!--這是我們的View-->
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>- 1
- 2
- 3
- 4
- 5
將message繫結到文字框，當更改文字框的值時，<p>{{ message }}</p> 中的內容也會被更新。 
反過來，如果改變message的值，文字框的值也會被更新，我們可以在Chrome控制檯進行嘗試。 
Vue例項的data屬性指向exampleData，它是一個引用型別，改變了exampleData物件的屬性，同時也會影響Vue例項的data屬性。