Vue.js 2.x 實踐指南

鄒瓊俊

湖南人，.NET高級工程師，CSDN學院講師，專注於.NET Web開發，對.NET Web開發有較深研究。

目錄

第1章Vue開發前奏1
1.1網站交互方式1
1.1.1多頁Web應用（MPA） 2
1.1.2單頁Web應用（SPA） 2
1.2前後端分離的開發模式4
1.3前端三大開發框架5
1.4為什麼要學習流行框架（MVVM框架） 6
1.5框架和庫的區別7
1.6模塊化和組件化7
1.7後端中的MVC與前端中的MVVM之間的區別8
1.8 Node.js安裝9
1.9 Promises介紹10
1.9.1在Promises出現之前的文件讀取方式10
1.9.2 Promises基本概念介紹12
1.10 ES7語法糖async/await 15
1.11開發工具16
1.11.1 Visual Studio Code 16
1.11.2 vuedevtools 17
1.11.3 Chrome 18

第2章Vue基礎入門19
2.1 Vue發展歷史19
2.2什麼是Vue.js 19
2.3 Vue基本代碼20
2.4 Vue常用指令介紹22
2.4.1 v-cloak指令23
2.4.2 v-html指令25
2.5 v-bind&v-on指令25
2.5.1示例：跑馬燈特效26
2.5.2事件修飾符28
2.6 v-model雙向數據綁定32
2.7 v-for和key屬性34
2.8 v-if和v-show 37
2.9在Vue中使用樣式39
2.9.1使用class樣式39
2.9.2使用內聯樣式39
2.10過濾器40
2.10.1全局過濾器40
2.10.2私有過濾器41
2.11鍵盤修飾符以及自定義鍵盤修飾符42
2.12自定義指令43
2.13增刪改查示例44

第3章Vue進階49
3.1 Vue生命週期49
3.2 axios介紹51
3.2.1跨域請求54
3.2.2 Node手寫JSONP服務器剖析JSONP原理55
3.3 Vue過渡動畫57
3.3.1單元素/組件的過渡57
3.3.2列表過渡63

第4章Vue組件開發65
4.1組件介紹65
4.1.1全局組件定義的三種方式65
4.1.2使用components定義私有組件67
4.1.3組件中展示數據和響應事件67
4.1.4組件切換68
4.2組件傳值70
4.2.1父組件向子組件傳值70
4.2.2子組件向父組件傳值71
4.3組件案例：留言板73
4.4使用ref獲取DOM元素和組件引用76
4.5 Vuex 77
4.5.1安裝Vuex 78
4.5.2配置Vuex的步驟78
4.6 render函數81

第5章路由vue-router 84
5.1什麼是路由84
5.2安裝vue -router的兩種方式84
5.3 vue-router的基本使用85
5.4設置選中路由高亮87
5.5為路由切換啟動動畫88
5.6路由傳參query¶ms 89
5.6.1 query 89
5.6.2 params 90
5.7使用children屬性實現路由嵌套91
5.8使用命名視圖93
5.9 watch監聽95
5.10 computed：計算屬性的使用96
5.11 watch、computed、methods的對比98
5.12 nrm的安裝及使用99
5.13 vue-router中編程式導航100

第6章webpack介紹101
6.1 webpack概念的引入101
6.2 webpack：最基本的使用方式102
6.3 webpack最基本的配置文件的使用105
6.4 webpack-dev-server的基本使用106
6.5使用html-webpack-plugin插件配置啟動頁面107
6.6 webpack-dev-server的常用命令參數108
6.7 webpack-dev-server配置命令的另一種方式110
6.8配置處理css樣式表的第三方loader 111
6.9分析webpack調用第三方loader的過程112
6.10 npm install--save、--save-dev、-D、-S、-g的區別113
6.11配置處理less文件的loader 113
6.12配置處理scss文件的loader 114
6.13 webpack中url-loader的使用114
6.14 webpack中使用url-loader處理字體文件118
6.15 webpack中Babel的配置119

第7章webpack和Vue的結合122
7.1 webpack中導入Vue和普通網頁使用Vue的區別122
7.1 .1在webpack中使用Vue 122
7.1.2在webpack中配置.vue組件頁面總結128
7.2 export default和export的使用方式129
7.3結合webpack使用vue-router 131
7.4結合webpack實現children子路由134
7.5組件中style標籤lang屬性和scoped屬性的介紹135
7.6抽離路由模塊138

第8章webpack中UI組件的使用140
8.1使用餓了麼的Mint UI組件140
8.1.1 button組件141
8.1.2 Toast組件142
8.2 Mint UI按需導入144
8.3 MUI介紹145
8.4 MUI的使用146
8.5 Vant UI 147
8.6 Element UI 147
8.6.1引入Element 148
8.6.2 Element常見應用場景及解決方案148

第9章移動圖書商城157
9.1 mockjs介紹157
9.2 App首頁設計158
9.3使用阿里巴巴矢量庫159
9.4 App.vue組件的基本設置162
9.4.1設置路由激活時高亮的兩種方式162
9.4.2實現tabbar頁簽不同組件頁面的切換163
9.4.3路由切換添加過渡效果164
9.5首頁輪播圖165
9.6首頁九宮格169
9.7圖書分類組件172
9.8製作頂部滑動導航174
9.9製作圖片列表179
9.10在Android手機瀏覽器中調試App 182
9.11真機調試182
9.12封裝輪播組件184
9.13商品詳情頁185
9.14購物車小球動畫189
9.15封裝購買數量組件191
9.16設計購物車數據存儲193
9.17我的購物車194
9.18增加頁面返回199
9.19總結200

第10章天下會管理平台201
10.1 Vue前端開發規範201
10.1.1統一開發環境201
10.1.2技術框架選型201
10.1.3命名規範202
10.1.4注意事項203
10.1.5 ESlint配置js語法檢查並自動格式化204
10.2通過vue-cli來搭建項目206
10.3完善項目結構209
10.3.1設置瀏覽器圖標209
10.3.2完善src源碼目錄結構209
10.3.3引入Element UI 210
10.3.4封裝axios請求210
10.3.5 Ajax跨域支持215
10.3.6封裝全局的css變量文件216
10.3.7 vue-wechat-title動態修改title 217
10.3.8封裝全局的配置文件base-config.js 218
10.4項目介紹及其界面設計218
10.5項目設計和分析220
10.5.1幫主首頁221
10.5.2其他管理界面222
10.5.3設計路由226
10.5.4設計業務邏輯層229
10.5.5 Vuex設計230
10.5.6權限設計231
10.5.7菜單組件232
10.6表單驗證237
10.7登錄244
10.7.1賬號密碼登錄244
10.7.2在線生成二維碼247
10.7.3製作網站ico圖標247
10.7.4存儲登錄信息248
10.7.5回車自動登錄249
10.7 .6防止登錄按鈕頻繁點擊249
10.8增刪改查列表250
後記259