學習內容：

vue.js框架介紹（核心：資料驅動、元件化）
vue-cli 腳手架 搭建基本程式碼框架
Vue-router   官方外掛、管理路由
vue-resource 與後端進行Ajax通訊
Webpack 構建工具 （編譯原碼，生成遊覽器可以識別和執行的程式碼）
es6+eslint      eslint：es6程式碼風格檢查工具

工程化、元件化、模組化

移動端常用開發技巧
flex彈性佈局
css stickyfooter佈局
酷炫的互動設計
元件的設計與開發

學習目標：

掌握vue.js在實戰中的應用，

學會使用vuejs完整的開發移動端app

學會元件化，模組化的開發方式

功能技術分析：

vue.resource  與後端進行資料互動

vue.router  與前端路由 實現單一應用

第三方js庫 better-scroll 實現列表滾動

最大程度元件化

收藏商家：h5的localstorage介面存在遊覽器端

圖示字型的使用

移動端1畫素邊框

css  sticky  footer佈局

flex彈性佈局

VueJs介紹：

國內大佬：尤雨溪 2014開源

輕量級MVVM框架
資料驅動+元件化前端開發
Github超過25K star數，社群完善

近年來前端發展趨勢：

舊瀏覽器逐漸被淘汰，異動單需求增加
前端互動越來越多，功能越來越複雜
架構從傳統的後臺MVC向REST API+前端MV*遷移
傳統MVC：前後端互動時，重新整理整個頁面（使用者體驗差）
rest api與ajax區域性通訊非同步重新整理頁面某個區塊來優化和提升體驗同時，把mv*拿到前端來做

MV*{
MVC
MVP
MVVM <---- vue.js
}

MVVP框架：

三部分：

View   　　 ViewModal　　　　   Modal
  |         　　     | 　　 　　　　　   |
  |　　　　　　　| 　　　　　　       |
 V 　　　　　     V　　　　　　      V
檢視   　　　　通訊 　　　　　　 資料

DOM 　　　　觀察者　　　　 javascript物件

針對具有複雜互動邏輯的前端應用
提供了一些基礎的架構抽象
通過Ajax做資料持久化，保證前端使用者體驗（區域性重新整理）

MVVM{
Angular.js
react.js
Vue.js
}

VueJs核心思想：

資料驅動：
　　DOM是資料的一種自然對映：
　　　　改變資料通過Directive指令對DOM進行一層封裝，當資料發生變化，會通知指令去修改對應的
　　　　DOM，資料驅動DOM變化，DOM是資料的一種自然對映。
　　VUe.js對操作進行監聽：
　　　　當改變檢視的時候VUE.js監聽到這些變化從而改變資料。
　　　　從而實現資料的雙向繫結。

　　資料響應原理：
　　　　資料（modal）改變驅動檢視（view）自動更新（ES5的object.defineproject屬性新增getter和setter同時vue.js對末班進行編譯解析生成一個指令物件，每個指令物件關聯一  個watcher，當我們對指令進行求值時會觸發到其getter同時把依賴收集到watcher中，當改變資料時，會觸發setter會通知到對應關聯的watcher然後watcher會再次對資料求值          計算並及進行對比，當發現改變時，watcher會通知到指令，呼叫其update方法由於指令是對DOM的封裝，所以，其會呼叫原生DOM的方法去更新檢視，這樣就完成了從資料            改變導資料更新的一個自動過程。

元件化：
　　擴充套件HTML元素，封裝可重用的程式碼。
　　　　一個頁面被拆分成多個區塊，每個區塊對應一個元件，元件可以巢狀最後組合形成一個完整的頁面，在Vue.js中，每個元件都對應一個Vuemodal，最終生成一個vuemodal  樹，其和DOM形成了一一對應的關係。
　　元件設計原則：
　　　　頁面上每個獨立的可視、可互動區域都可以視為一個元件，比如頁面的頭部、尾部還有一些可複用的區塊都可以抽象成元件。
　　　　每個元件對應一個工程目錄，元件所需要的各種資源在這個目錄下就近維護。
　　　　　　就近維護就體現了前端工程化思想，為前端開發提供了很好的分制策略，每個開發者都能清楚地知道自己所開發維護的功能單元，其程式碼必然存在與對應的元件目錄    中，在其中可以找到，對應功能單元的所有內部邏輯，樣式、js、頁面結構都在其中。

　　　　　　vue.js中可以通過.Vue檔案把元件所依賴的 模組、js和樣式都寫在一個檔案中，把元件化的就近維護思想發揮到極致

　　　　頁面不過是元件的容器，元件可以巢狀自由組合形成完整的頁面