vue進階--外賣商家頁

1、準備工做

一、vue特性：輕量級、簡潔、高效、組件化、數據驅動

二、技術分析：使用vue- resource與後端交互(ajax通訊，ie9+)

　　　　　　  使用vue-router做爲前端路由

　　　　　　   better-scroll第三方庫

　　　　　　   webpack構建工具

　　　　　　   es6+eslint(代碼風格檢測)

　　　　　　   flex佈局+stickyfooter佈局

 

2、VUE介紹

一、MVVM：view:視圖dom

　　　　　  viewModel:觀察者(數據和視圖經過vm相互通知改變)

　　　　　  model:數據js對象

二、有指令又有完整的組件週期

三、核心思想：數據驅動：

　　　　　　有一個數據a.b，先用es5爲a.b添加getter和setter方法，vue對模板編譯解析生成一個指令對象（v-text）,每一個指令關聯一個watcher，對指令求值時觸發getter,再次改變時觸發setter而後再次通知watcher，而後再次求值a.b並對比新舊值，若是改變就通知指令調用update方法更新視圖。

 

　　　　　　  組件化：拓展html元素，封裝可重用代碼。html中每一個組件對應一個vm，生成一個vm樹和dom樹一致。

　　　　　　  組件設計原則：一、每一個可視、可交互模塊均可設計爲組件 二、工程化思想即js+css+html寫在一個文件就近維護 三、組件能夠在頁面中自由嵌套