Vue.js 前端框架技術與實戰 (微課視頻版)

儲久良，男，1965年出生，江蘇泰州人，工學學士，副教授，高級工程師。 1989年畢業於瀋陽工業大學計算機學院計算機及應用專業，現任南京理工大學泰州科技學院信息化建設與管理處、移動互聯網學院專任教師。

目錄
第1章  Vue.js概述 1
1.1  Vue.js簡介 1
1.2  Vue.js生產環境配置 2
1.2.1  Vue.js引入方法 2
1.2.2  安裝Vue Devtools 3
1.3  Vue頁面基本結構 5
1.3.1  <template>標記 5
1.3.2  <script>標記 6
1.3.3  <style>標記 8
1.4  Vue.js開發工具 8
1.4.1  Visual Studio Code 9
1.4.2  Sublime Text 9
1.4.3  WebStorm 10
1.4.4  HBuilderX 10
本章小結 11
練習1 11
實訓1   12

第2章  Vue.js基礎 15
2.1  MVC與MVVM模式 15
2.1.1  MVC模式 15
2.1.2  MVVM模式 16
2.1.3  MVVM模式的前端框架發展趨勢 17
2.1.4  MVVM模式的應用 17
2.2  數據綁定與插值 20
2.2.1  文本綁定 20
2.2.2  HTML代碼綁定 20
2.2.3  屬性綁定 21
2.2.4  JavaScript表達式綁定 21
2.3  計算屬性與方法 22
2.3.1  計算屬性基礎應用 23
2.3.2  計算屬性緩存與方法的比較 24
2.3.3  計算屬性的setter和getter 26
2.4  偵聽屬性 29
2.4.1  偵聽屬性基本用法 29
2.4.2  偵聽屬性高級用法 31
2.5  生命週期鉤子函數 34
2.5.1  生命週期鉤子函數的作用 34
2.5.2  生命週期鉤子函數的應用 37
2.6  控制台對象 39
2.6.1  顯示信息的命令 40
2.6.2  佔位符 40
2.6.3  分組顯示 41
2.6.4  查看對象的信息 42
2.6.5  顯示某個節點的內容 42
2.6.6  判斷變量是否為真 42
2.6.7  追蹤函數的調用軌跡 43
2.6.8  計時功能 43
2.6.9  性能分析 44
2.6.10  表格形式輸出數組和對象 45
2.7  數據與方法 48
2.7.1  數據對象的定義與使用 49
2.7.2  Vue實例屬性與方法 50
2.8  Vue中的數組變動更新檢測 53
2.8.1  變異方法 53
2.8.2  非變異方法 54
2.9  Vue中的過濾器 57
本章小結 60
練習2 61
實訓2   62

第3章  Vue.js指令 66
3.1  Vue.js內置指令 67
3.1.1  條件渲染 67
3.1.2  用key管理可復用的元素 69
3.1.3  根據條件展示元素 71
3.1.4  列表渲染 73
3.1.5  綁定屬性 81
3.1.6  事件處理 83
3.1.7  事件修飾符 85
3.1.8  按鍵修飾符 90
3.1.9  表單輸入綁定 92
3.1.10  表單元素值綁定 95
3.1.11  v-model修飾符 97
3.1.12  v-text與v-html指令 98
3.1.13  v-pre、v-once和v-cloak指令 100
3.2  Vue.js自定義指令 101
3.2.1  自定義指令註冊 101
3.2.2  對象字面量 105
3.2.3  動態指令參數 105
3.2.4  自定義指令實際應用 107
本章小結 108
練習3 109
實訓3   110

第4章  Vue.js基礎項目實戰 114
4.1  簡易圖書管理 114
4.1.1  項目需求 114
4.1.2  項目實現 115
4.2  我的待辦事項 119
4.2.1  項目需求 119
4.2.2  項目實現 120
本章小結 125
實訓4   125

第5章  Vue.js組件開發 126
5.1  組件基礎 126
5.1.1  組件命名 127
5.1.2  組件註冊 128
5.2  組件間通信 131
5.2.1  父組件向子組件傳值 131
5.2.2  子組件向父組件傳值 139
5.2.3  兄弟組件之間的通信 143
5.2.4  父鏈與子組件索引 145
5.3  單文件組件 146
5.4  插槽 149
5.4.1  匿名插槽 149
5.4.2  具名插槽 151
5.4.3  作用域插槽 153
5.4.4  動態插槽名 155
本章小結 157
練習5 158
實訓5   158

第6章  Vue.js過渡與動畫 163
6.1  單元素/單組件的過渡 163
6.1.1  過渡的類名 165
6.1.2  CSS 過渡 166
6.1.3  CSS動畫 167
6.1.4  自定義過渡的類名 168
6.1.5  同時使用過渡和動畫 170
6.1.6  顯性的過渡持續時間 170
6.1.7  JavaScript 鉤子 170
6.2  初始渲染的過渡 171
6.3  多個元素的過渡 172
6.4  多個組件的過渡 177
6.5  列表過渡 178
6.5.1  列表的進入/離開過渡 179
6.5.2  列表的排序過渡 181
6.5.3  列表的交錯過渡 183
本章小結 186
練習6 186
實訓6   187

第7章  Vue項目開發環境與輔助工具部署 192
7.1  部署Node.js 192
7.1.1  Node.js簡介 192
7.1.2  Node.js部署 194
7.1.3  Node.js模塊系統 194
7.1.4  Node.js 創建第1個應用 202
7.2  Node包管理器npm 203
7.2.1  npm簡介 203
7.2.2  npm常用命令 204
7.3  Node.js環境配置 206
7.4  webpack打包工具 208
7.4.1  webpack簡介 208
7.4.2  webpack使用與基本配置 209
7.4.3  webpack配置加載器 215
7.4.4  webpack配置插件 222
7.4.5  webpack配置開發服務器 228
7.5  Vue CLI 235
7.5.1  Vue CLI安裝 236
7.5.2  Vue CLI創建Vue項目 236
7.5.3  Vue CLI可視化創建Vue項目 238
本章小結 240
練習7 240
實訓7   241

第8章  前端路由Vue Router 246
8.1  Vue Router概述 246
8.1.1  Vue Router的安裝與使用 247
8.1.2  Vue Router基礎應用 247
8.2  Vue Router高級應用 252
8.2.1  動態路由匹配 252
8.2.2  嵌套路由 254
8.2.3  編程式導航 260
8.2.4  命名路由 262
8.2.5  命名視圖 263
8.2.6  重定向和別名 264
8.2.7  路由組件傳參 265
8.2.8  HTML5 History模式 267
本章小結 267
練習8 268
實訓8   269

第9章  狀態管理模式Vuex 275
9.1  Vuex概述 275
9.1.1  Vuex定義 276
9.1.2  簡單狀態管理——store模式 277
9.2  Vuex基本應用 280
9.3  Vuex核心概念 281
9.3.1  一個完整的store結構 281
9.3.2  最簡單的store 282
9.3.3  Vuex中的state 283
9.3.4  Vuex中的getters 287
9.3.5  Vuex中的mutations 291
9.3.6  Vuex中的actions 293
9.3.7  Vuex中的modules 301
9.4  Vuex多模塊實戰案例 307
本章小結 313
練習9 313
實訓9   314

第10章  Vue UI組件庫 318
10.1  Vue PC端組件庫 318
 10.1.1  Element UI 319
 10.1.2  iView UI 331
 10.1.3  其他PC端UI組件庫 336
10.2  Vue移動端UI組件庫 336
 10.2.1  Mint UI 336
 10.2.2  Vant 340
 10.2.3  其他移動端組件庫 344
本章小結 345
練習10 345
實訓10   346

第11章  Vue高級項目實戰 351
11.1  友聯通訊錄 351
 11.1.1  項目需求 351
 11.1.2  實現技術 352
 11.1.3  環境配置 352
 11.1.4  項目實現 353
11.2  通用登錄/註冊管理系統 379
 11.2.1  項目需求 379
 11.2.2  實現技術 380
 11.2.3  環境配置 381
 11.2.4  項目實現 383
本章小結 415
練習11 415
實訓11 415

第12章  Vue 3.0基礎應用 416
12.1　Vue 3.0新特性 416
 12.1.1  新特性簡介 417
 12.1.2  下一階段工作 418
 12.1.3  Vue 3.0學習參考 418
12.2  Vue 3.0初步體驗 418
 12.2.1  Vue 3.0下載與引用 418
 12.2.2  Vue 3.0創建簡易應用 419
 12.2.3  Vue 3.0發布文檔的使用 422
12.3  Vue 3.0新特性應用 423
 12.3.1  使用腳手架創建項目 423
 12.3.2  組件選項 425
 12.3.3  ref()、reactive()和toRefs()函數 428
 12.3.4  computed、watch和watchEffect 431
 12.3.5  ref引用DOM元素和組件實例 434
 12.3.6  Vue Router和Vuex 436
 12.3.7  Vue 3.0生命週期 441
 12.3.8  provide()和inject()函數 442
 12.3.9  組合式API 447
 12.3.10  模板refs 449
12.4  Vue 3.0購物車實戰 453
 12.4.1  項目設計要求 453
 12.4.2  項目實現 455
本章小結 464
練習12 464
實訓12   465

參考文獻 470