一、為什麼要用？
之前基本上用的是jQuery，jQuery基於DOM操作，MVVM的開發模式也使前端從原先的DOM操作中解放出來，我們不再需要在維護檢視和資料的統一上花大量的時間，只需要關注於data的變化，程式碼變得更加容易維護。
元件：複用性高，容易維護，方便測試，高內聚，低耦。
二、什麼是MVVM?
雙向繫結（data-binding）：View的變動，自動反映在 ViewModel，反之亦然。
三、原理
資料劫持: vue.js 則是採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥。
用JavaScript實現 github.com/DMQ/mvvm
演示：bing.2345.com/mvvm/mvvm.html （host: 172.16.0.156 bing.2345.com）
四、入門
簡介
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。
官網
cn.vuejs.org/v2/guide/installation...
直接引用
1
安裝
npm install -g cnpm –registry=registry.npm.taobao.org
$ npm install –global vue-cli
$ vue init webpack my-project
安裝依賴，走你
$ cd my-project
$ npm run dev
除錯
github.com/vuejs/vue-devtools
五、示例
文件（作者是中國人） + 官網上的示例 + 自己練習（推薦jsfiddle）
主要了解：響應式機制 + 元件
Hello World：jsfiddle.net/han8gui/nnc957z4/10/
Form：jsfiddle.net/han8gui/g072h4x6/
ToDoList： jsfiddle.net/han8gui/r42pngbu/6/
六、元件
定義
軟體元件，定義為自包含的、可程式設計的、可重用的、與語言無關的軟體單元。
示例：
jsfiddle.net/han8gui/0c6xszjv/
注意：
一個元件的 data 選項必須是一個函式
定義元件名的方式有兩種：
a. 使用 kebab-case
當使用 kebab-case (短橫線分隔命名) 定義一個元件時，你也必須在引用這個自定義元素時使用 kebab-case，例如 。
b. 使用 PascalCase
當使用 PascalCase (駝峰式命名) 定義一個元件時，你在引用這個自定義元素時兩種命名法都可以使用。
生命週期
資料傳遞
子元件中傳遞資料：Props
示例: jsfiddle.net/han8gui/hqmgnbhy/
子元件向父級元件觸發一個事件
內建的 $emit 方法並傳入事件的名字，來向父級元件觸發一個事件，並傳遞一個引數
七、規模化
路由 vue-router
github.com/han8gui/vue-demo
狀態管理 vuex
記錄所有 store 中發生的 state 改變，後面有機會分享下
服務端渲染 ssr
主要用於SEO
八、其他
風格指南：cn.vuejs.org/v2/style-guide/
編碼：開發過程中，可以看到bug報錯
Examples: vuejsexamples.com/
————————————————
本作品採用《CC 協議》，轉載必須註明作者和本文連結