Vue-cli是Vue的腳手架工具
可以進行目錄結(jié)構(gòu)、本地調(diào)試蜕猫、代碼部署箫踩、熱加載塑陵、單元測試
1币旧、MVVM框架
View ? ?—— ? ?ViewModel ? ?—— ? ? Model
“DOM”“觀察者vue實例”? ? “Javascript”
注意：交互為雙向的
特點：
（1）針對具有復雜交互邏輯的前端應用；
（2）提供基礎(chǔ)的架構(gòu)抽象猿妈；
（3）通過Ajax數(shù)據(jù)持久化，保證前端用戶體驗巍虫。
2彭则、什么是Vue.js
它是一個輕量級MVVM框架，
屬于“數(shù)據(jù)驅(qū)動+組件化”的前端開發(fā)
Vuejs VS Angular+React
（1）Vue.js耿輕量占遥，gzip后大小只有20k+
（2）Vue.js更易上手俯抖，學習曲線平穩(wěn)
（3）吸取兩家之長，借鑒了angular的指令（如v-show）和react的組件化
3瓦胎、vue.js核心思想
（1）數(shù)據(jù)驅(qū)動
DOM是數(shù)據(jù)的一種自然映射
? ?擴展——數(shù)據(jù)響應原理
數(shù)據(jù)（model）改變驅(qū)動視圖（view）自動更新
（2）組件化
擴展HTML元素芬萍，封裝可重用的代碼
? ?擴展——組件設計原則
a、頁面上每個獨立的可視/可交互區(qū)域視為一個組件
b搔啊、每個組件對應一個工程目錄柬祠，組件所需要的各種資源在這個目錄下就近維護
c、頁面不過是組件的容器负芋，組件可以嵌套自由組合形成完整的頁面
4漫蛔、vue-cli腳手架
https://github.com/vue.js/vue-cli
（1）vue-cli安裝（Win10）
步驟1：“Ctrl+ R”打開命令行
node -v
npm install -g vue-cli
步驟2：運行vue命令嘗試
vue
vue init
步驟3：創(chuàng)建項目sell
vue init webpack sell
cd sell
npm install
npm run dev
（2）vue-cli項目目錄
（3）webpack打包
5、vue-router前端路由
路由是根據(jù)不同的url地址展示不同的內(nèi)容或界面。
前端路由就是把 不同路由對應不同的內(nèi)容或頁面的任務交給前端來做莽龟，之前是通過服務端根據(jù)url的不同返回不同的頁面來實現(xiàn)的蠕嫁，而現(xiàn)在前端路由即實現(xiàn)了“前后端分離”
5-1：什么時候使用前端路由？
在單頁面應用中毯盈，保持大部分頁面結(jié)構(gòu)不變剃毒，只改變部分內(nèi)容的使用
5-2：前端路由有什么優(yōu)點和缺點？
優(yōu)點：用戶體驗好搂赋，不需要每次都從服務器全部獲取赘阀，快速展現(xiàn)給用戶
缺點：
（1）不利于SEO搜索引擎
（2）使用瀏覽器的前進歉备，后退鍵的時候會重新發(fā)送請求竞滓，沒有合理的利用緩存
（3）單頁面無法記住之前滾動的位置，無法再前進襟雷、后退的時候返回之前滾動位置
5-3：利用vue-router用來構(gòu)建SPA
5-4：跳轉(zhuǎn)——或者this.$router.push({path:' '})
5-5：
渲染——（5-4跳轉(zhuǎn)至界面 與 5-5渲染至某個位置 ?二者是配合使用的）
5-6：動態(tài)路由匹配map
模式：/user/:username
5-7：嵌套路由
路由嵌套路由
export?default?new?Router({??
??routes:?[??
????{??
????????path:'/goods',??
????????name:'Goodslist',??
????????component:?Goodslist,??
????????children?:[??
? ? ? ? ? ? ? ? {??
????????????????path:'title',??
????????????????name:'title',??
????????????????component:?Title??
???????????????},??
???????????????{??
? ? ? ? ? ? ? ????path:'img',??
? ? ? ? ? ? ????? name:'img',??
??????????????????component:?Image??
????????????????}??
????????]??
?????}??
??]??
})??
5-8：編程式路由
什么是編程式路由捺信？——通過js來實現(xiàn)頁面的跳轉(zhuǎn)
方式1：$router.push("name")
方式2：$router.push({path:"name"})
方式3：$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123})
方式4：$router.go(1)
5-9：命名路由和命名視圖
（1）命名路由——給路由定義不同的名字酌媒，根據(jù)名字進行匹配
（2）命名視圖——給不同的router-view定義名字，通過名字進行相應組件的渲染
6迄靠、vue-resource
在node環(huán)境下安裝輸入命令行：npm install vue-resource --save
其請求API是按照REST風格設計的秒咨，它提供了7種請求API:
（1）get：從服務器端獲取數(shù)據(jù)——“得到”
（2）post：從客戶端向服務器端提交數(shù)據(jù)——“提交”
（3）head
（4）delete
（5）jsonp
（6）put
（7）patch
全局攔截器interceptors
Vue.http.interceptors.push((request,next)=>{??
//..??
//請求發(fā)送的處理邏輯??
//..??
??next(response)?=>?{??
//..??
//請求發(fā)送后的處理邏輯??
//..??
//根據(jù)請求的狀態(tài)，response參數(shù)會返回給successCallback或errorCallback??
return?response??
??})??
})?
