模塊化和組件化
- 模塊化和組件化的好處是提高代碼的復用性，可維護性和擴展性
準備工作
- Vue-resource 和 Ajax進行通信
- Webpack構建工具
- ES6 + eslint eslint：對ES6的代碼風格檢查工具，規范ES6的代碼規范和靜態語法檢測，它的好處就是可以規范一個團隊的代碼保持相近的風格，這樣有助于閱讀和維護
近年來前端開發趨勢
- 舊瀏覽器逐漸被淘汰，移動端的需求量大大增加。
- 前端交互越來越少，功能越來越復雜。
現在前端可謂是一個大雜燴，各種高大上的技術庫和框架，酷炫的運營活動頁面，好玩的H5小游戲。 - 架構從傳統后臺的MVC向REST API + 前端 MVVM遷徙。
REST：全稱（REpresentational State Transfer，表述性狀態轉移）REST指的是一組架構約束條件和原則，滿足這些約束條件和原則的應用程序設計就是RESTful。
傳統后臺的MVC：是當前前端和后端發生一些數據交互的時候，會刷新整個頁面，這樣的用戶體驗是很差的。
因此我們通過Ajax的方式和后端REST API的進行通訊，異步刷新某個區塊，提供良好的用戶體驗。
MVVM(類似于設計模式里面的觀察者模式)
- 數據的雙向綁定(任何那邊發生改變都可以監測的到)。
- 針對具有復雜交互邏輯的前端應用。
- 提供基礎的架構抽象。
- 通過Ajax數據持久化，保證前端用戶體驗。
-
SPA單頁面應用程序
**MVVM**
Vue
- 它是一個輕量級的MVVM框架
- 數據驅動 + 組件化是它的核心
對比Angular React
- Vue更輕量，gzip后大小之后20K+。
- Vue更易上手，學習曲線平穩。
- 吸取兩家之長，借鑒了angular的指令和react的組件化
Vue的核心思想
- Vue的核心思想是數據驅動和組件化
數據驅動
- 不用Vue之前，需要手動觸發和改變DOM操作，還特別容易出錯，而用了Vue之后只需要通過Directives指令。
-
數據的雙向綁定：Vue指令(Directives)是對DOM的封裝，當數據發生改變會通知指令去修改相應的DOM。Vue還會對數據進行監聽(Dom Listeners)， 當我們修改視圖的時候，Vue監聽到這些變化，從而改變數據。這就形成了數據的雙向綁定。
**數據驅動**
**數據響應原理**
組件化(組件可以嵌套)
- 擴展HTML元素，封裝可重用的代碼。
- 頁面上每個獨立的可視/可交互區域視為一個組件
- 每個組件對用一個工程目錄，組件所需要的各種資源在這個目錄下就近維護。
- 頁面不過是組件的容易，組件可以嵌套自由組合形成完整的頁面。
Vue-cli
- Vue-cli是Vue的腳手架工具。
-
而Webpack是一個模版。
**Vue-cli**腳手架
