Vue
Vue是一套用于建構使用者界面的漸進式架構，釋出于2014年2月。與其它大型架構不同的是，Vue被設計為可以自底向上逐層應用。Vue的核心庫隻關注視圖層，不僅易于上手，還便于與第三方庫(如: vue-router: 跳轉，vue-resource: 通信，vuex:管理)或既有項目整合。
JavaScript架構
jQuery：大家熟知的JavaScript架構，優點是簡化了DOM操作，缺點是DOM操作太頻繁,影響前端性能;在前端眼裡使用它僅僅是為了相容IE6、7、8;
Angular：将背景的MVC模式搬到了前端并增加了子產品化開發的理念
React：Facebook出品，一款高性能的JS前端架構;特點是提出了新概念[虛拟DOM]用于減少真實DOM操作，在記憶體中模拟DOM操作，有效的提升了前端渲染效率;缺點是使用複雜，因為需要額外學習一門[JSX] 語言;
Vue：一款漸進式JavaScript架構，所謂漸進式就是逐漸實作新特性的意思，如實作子產品化開發、路由、狀态管理等新特性。其特點是綜合了Angular (子產品化)和React (虛拟DOM)的優點;
Axios：前端通信架構;因為Vue 的邊界很明确，就是為了處理DOM,是以并不具備通信能力，此時就需要額外使用一個通信架構與伺服器互動;當然也可以直接選擇使用jQuery提供的AJAX通信功能;
UI架構
Ant-Design：阿裡巴巴出品，基于React的UI架構
ElementUI、iview、ice：餓了麼出品，基于Vue的UI架構
Bootstrap：Twitter推出的一個用于前端開發的開源工具包
AmazeUI：又叫"妹子UI"，一款HTML5跨屏前端架構
JavaScript建構工具
Babel：JS編譯工具，主要用于浏覽器不支援的ES新特性，比如用于編譯TypeScript
WebPack：子產品打包器，主要作用是打包、壓縮、合并及按序加載
主要目的是實作一套代碼三端統一(PC、Android:.apk、iOS:.ipa )并能備夠調用到底層件(如:傳感器、GPS、 攝像頭等)，打包方式主要有以下兩種:
雲打包: HBuild -> HBuildX， DCloud出品; API Cloud
本地打包: Cordova (前身是PhoneGap)
NodeJS 架構及項目管理工具如下:
Express: NodeJS架構
Koa: Express簡化版
NPM:項目綜合管理工具，類似于Maven
YARN: NPM的替代方案，類似于Maven和Gradle的關系
Model:模型層，在這裡表示JavaScript對象
View:視圖層,在這裡表示DOM (HTML操作的元素)
ViewModel:連接配接視圖和資料的中間件，Vue.js就是MVVM中的ViewModel層的實作者
在MVVM架構中，是不允許資料和視圖直接通信的，隻能通過ViewModel來通信，而ViewModel就是定義了一個Observer觀察者
ViewModel能夠觀察到資料的變化，并對視圖對應的内容進行更新
ViewModel能夠監聽到視圖的變化，并能夠通知資料發生改變
MVVM模式和MVC模式一樣，主要目的是分離視圖(View)和模型(Model)
低耦合:視圖(View)可以獨立于Model變化和修改,一個ViewModel可以綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
可複用:你可以把一些視圖邏輯放在一個ViewModel裡面，讓很多View重用這段視圖邏輯。
獨立開發:開發人員可以專注于業務邏輯和資料的開發(ViewModel),設計人員可以專注于頁面設計。
可測試:界面素來是比較難于測試的，而現在測試可以針對ViewModel來寫。
注意：
v-model會忽略所有表單元素的value、checked、selected特性的初始值而總是将Vue執行個體的資料作為資料來源。你應該通過JavaScript在元件的data選項中聲明初始值
下拉框
如果v-model表達式的初始值未能比對任何選項，select元素将被渲染為“未選中”狀态。在IOS中，這會使使用者無法選擇第一個選項。因為這樣的情況下，IOS不會觸發change事件。是以，更推薦像上面這樣提供一個值為空的禁用選項。
Axios是一個開源的可以用在浏覽器端和NodeJS 的異步通信架構，她的主要作用就是實作AJAX異步通信，其功能特點如下:
從浏覽器中建立XMLHttpRequests
從node.js建立http請求
支援Promise API [JS中鍊式程式設計]
攔截請求和響應
轉換請求資料和響應資料
取消請求
自動轉換JSON資料
用戶端支援防禦XSRF (跨站請求僞造)
由于Vue.js是一個視圖層架構且作者(尤雨溪) 嚴格準守SoC (關注度分離原則)，是以Vue.js并不包含AJAX的通信功能，為了解決通信問題，作者單獨開發了一個名為vue-resource的插件，不過在進入2.0 版本以後停止了對該插件的維護并推薦了Axios 架構。少用jQuery，因為它操作Dom太頻繁!
data.json
簡單點說，它就是一個能夠将計算結果緩存起來的屬性(将行為轉化成了靜态的屬性)，僅此而已;可以想象為緩存!
計算屬性的主要特性就是為了将不經常變化的計算結果進行緩存，以節約我們的系統開銷;
注意
v-bind 可以縮寫為一個：
v-on 可以縮寫為一個@
說明
Vue的開發都是要基于NodeJS，實際開發采用vue-cli腳手架開發，vue-router路由，vuex做狀态管理；Vue UI界面我們一般使用ElementUI（餓了麼出品），或者ICE（阿裡巴巴出品）來快速搭建前端項目！
vue-cli 官方提供的一個腳手架,用于快速生成一個 vue 的項目模闆
主要的功能
統一的目錄結構
本地調試
熱部署
單元測試
內建打包上線
WebPack 是一款子產品加載器兼打包工具，它能把各種資源，如 JS、JSX、ES6、SASS、LESS、圖檔等都作為子產品來處理和使用。
測試安裝成功: 輸入以下指令有版本号輸出即為安裝成功
本質上，webpack是一個現代JavaScript應用程式的靜态子產品打包器(module bundler)。當webpack處理應用程式時，它會遞歸地建構一個依賴關系圖(dependency graph),其中包含應用程式需要的每個子產品，然後将所有這些子產品打包成一個或多個bundle
先建立一個包 交由idea打開 會生成一個.idea檔案 那麼就說明該檔案就交由idea負責
在idea中建立modules包，再建立hello.js
hello.js 暴露接口 相當于Java中的類
建立main.js 當作是js主入口
main.js 請求hello.js 調用sayHi()方法
在主目錄建立webpack-config.js
webpack-config.js 這個相當于webpack的配置檔案 enrty請求main.js的檔案 output是輸出的位置和名字
在idea指令台輸入webpack指令（idea要設定管理者啟動）
完成上述操作之後會在主目錄生成一個dist檔案 生成的js檔案夾路徑為/dist/js/bundle.js
在主目錄建立index.html 導入bundle.js
index.html
vue-router 是一個插件包，是以我們還是需要用 npm/cnpm 來進行安裝的。打開指令行工具，進入你的項目目錄，輸入下面指令。
将之前案例由vue-cli生成的案例用idea打開
清理不用的東西 assert下的logo圖檔 component定義的helloworld元件 我們用自己定義的元件
清理代碼 以下為清理之後的代碼 src下的App.vue 和main.js以及根目錄的index.html
這三個檔案的關系是 index.html 調用 main.js 調用 App.vue
main.js
App.vue
在components目錄下建立一個自己的元件Content,Test,Main(這兩個和Content内容一樣的就不放示例代碼了)
Content.vue
安裝路由,在src目錄下,建立一個檔案夾 : router,專門存放路由index.js(預設配置檔案都是這個名字)
在main.js中配置路由
在App.vue中使用路由
啟動測試一下 ： npm run dev
建立一個名為 hello-vue 的工程 vue init webpack hello-vue
安裝依賴，我們需要安裝 vue-router、element-ui、sass-loader 和 node-sass 四個插件
建立成功後用idea打開，并删除淨東西 建立views和router檔案夾用來存放視圖和路由
Main.vue
Login.vue（用的餓了麼UI中的代碼）
建立路由,在 router 目錄下建立一個名為 index.js 的 vue-router 路由配置檔案
main.js是index.html調用的 是以基本上所有東西都導出到這
一定不要忘記掃描路由配置并将其用到new Vue中
在App.vue中配置顯示視圖
最後效果
建立使用者資訊元件，在 views/user 目錄下建立一個名為 Profile.vue 的視圖元件
在使用者清單元件在 views/user 目錄下建立一個名為 List.vue 的視圖元件
修改首頁視圖，我們修改 Main.vue 視圖元件，此處使用了 ElementUI 布局容器元件
配置嵌套路由修改 router 目錄下的 index.js 路由配置檔案，使用children放入main中寫入子子產品
路由嵌套實戰效果圖
第一種取值方式
修改路由配置
傳遞參數Main.vue
在要展示的元件Profile.vue中接收參數 使用 {{$route.params.id}}來接收
第二種取值方式，使用props 減少耦合
傳遞參數和之前一樣
在Profile.vue接收參數為目标元件增加 props 屬性
效果
index.js
路由模式有兩種
hash：路徑帶 # 符号，如 http://localhost/#/login
history：路徑不帶 # 符号，如 http://localhost/login
建立一個NotFound.vue視圖元件
修改路由配置index.js
效果圖
beforeRouteEnter：在進入路由前執行
beforeRouteLeave：在離開路由前執行
Profile.vue
參數說明：
to：路由将要跳轉的路徑資訊
from：路徑跳轉前的路徑資訊
next：路由的控制參數
next() 跳入下一個頁面
next(’/path’) 改變路由的跳轉方向，使其跳到另一個路由
next(false) 傳回原來的頁面
next((vm)=>{}) 僅在 beforeRouteEnter 中可用，vm 是元件執行個體
安裝 Axios
main.js引用 Axios
準備資料 ： 隻有我們的 static 目錄下的檔案是可以被通路到的，是以我們就把靜态檔案放入該目錄下 static/mock/data.json
在 beforeRouteEnter 中進行異步請求