1 邂逅和初體驗(yàn)Vue.js 1
1.1 認(rèn)識(shí)Vue.js 1
1.2 Vue.js與其他框架的對(duì)比 2
1.2.1 Vue.js、React和Angular三大框架對(duì)比 2
1.2.2 三大框架使用數(shù)據(jù)對(duì)比 2
1.3 Vue.js 2的缺點(diǎn) 4
1.4 Vue.js 3帶來(lái)的新變化 4
1.5 搭建開(kāi)發(fā)環(huán)境 6
1.5.1 VS Code的下載和安裝 7
1.5.2 VS Code的基本配置 7
1.5.3 VS Code安裝插件 9
1.6 Vue.js 3的安裝和使用 10
1.6.1 使用CDN引入Vue.js 3 11
1.6.2 下載Vue.js 3源碼并在本地引入 14
1.7 計(jì)數(shù)器案例 16
1.7.1 原生JavaScript實(shí)現(xiàn)計(jì)數(shù)器 16
1.7.2 用Vue.js 3實(shí)現(xiàn)計(jì)數(shù)器 17
1.7.3 MVVM架構(gòu)模式 19
1.8 createApp的對(duì)象參數(shù) 20
1.8.1 template屬性 20
1.8.2 data屬性 22
1.8.3 methods屬性 22
1.8.4 其他屬性 24
1.9 VS Code生成代碼片段 24
1.10 本章小結(jié) 27
2 模板語(yǔ)法和內(nèi)置指令 28
2.1 插值語(yǔ)法 28
2.2 基本指令 30
2.2.1 v-once 30
2.2.2 v-text 31
2.2.3 v-html 32
2.2.4 v-pre 32
2.2.5 v-cloak 33
2.3 v-bind 34
2.3.1 綁定基本屬性 34
2.3.2 綁定class屬性 35
2.3.3 綁定style屬性 38
2.3.4 動(dòng)態(tài)綁定屬性 40
2.3.5 綁定一個(gè)對(duì)象 41
2.4 v-on 42
2.4.1 綁定事件 42
2.4.2 事件對(duì)象和傳遞參數(shù) 44
2.4.3 修飾符 45
2.5 條件渲染 46
2.5.1 v-if和v-else 46
2.5.2 v-if和template結(jié)合使用 48
2.5.3 v-show 49
2.5.4 v-show和v-if的區(qū)別 50
2.6 列表渲染 51
2.6.1 v-for的基本使用 51
2.6.2 v-for支持的類(lèi)型 52
2.6.3 v-for和template結(jié)合使用 54
2.6.4 數(shù)組的更新檢測(cè) 55
2.7 key和diff算法 57
2.7.1 認(rèn)識(shí)VNode和VDOM 57
2.7.2 key的作用和diff算法 59
2.7.3 沒(méi)有key時(shí)的diff算法操作 60
2.7.4 有key時(shí)的diff算法操作 61
2.8 本章小結(jié) 64
3 Vue.js 3的Options API 65
3.1 計(jì)算屬性 65
3.1.1 認(rèn)識(shí)計(jì)算屬性 65
3.1.2 計(jì)算屬性的基本使用 66
3.1.3 計(jì)算屬性和methods的區(qū)別 69
3.1.4 計(jì)算屬性的setter和getter 71
3.2 監(jiān)聽(tīng)器watch 73
3.2.1 watch的基本使用 73
3.2.2 watch配置選項(xiàng) 75
3.2.3 watch字符串、數(shù)組和API語(yǔ)法 78
3.2.4 watch深度監(jiān)聽(tīng) 79
3.3 案例：書(shū)籍購(gòu)物車(chē) 80
3.3.1 基本功能介紹 80
3.3.2 搭建基本功能 81
3.3.3 搭建書(shū)籍列表 83
3.3.4 搭建“加購(gòu)物車(chē)”功能 84
3.3.5 優(yōu)化價(jià)格和購(gòu)買(mǎi)數(shù)量 86
3.3.6 完整代碼展示 86
3.4 本章小結(jié) 88
4 v-model和表單輸入 89
4.1 v-model的基本使用 89
4.2 v-model的實(shí)現(xiàn)原理 90
4.3 v-model綁定其他表單 91
4.4 v-model值的綁定 94
4.5 v-model的修飾符 94
4.5.1 .lazy修飾符 94
4.5.2 .number修飾符 94
4.5.3 .trim修飾符 96
4.6 v-model在組件上的使用 96
4.7 本章小結(jié) 96
5 Vue.js 3組件化開(kāi)發(fā) 97
5.1 認(rèn)識(shí)組件化 97
5.2 Vue.js 3的組件化 98
5.3 Vue.js 3注冊(cè)組件 99
5.3.1 注冊(cè)全局組件 99
5.3.2 組件的命名規(guī)范 102
5.3.3 注冊(cè)局部組件 103
5.4 Vue.js 3開(kāi)發(fā)模式 105
5.5 Vue.js 3支持SFC 106
5.6 本章小結(jié) 106
6 前端工程化 107
6.1 前端快速發(fā)展史 107
6.2 認(rèn)識(shí)webpack 108
6.3 Vue CLI腳手架 109
6.3.1 認(rèn)識(shí)Vue CLI 109
6.3.2 安裝Node.js 109
6.3.3 安裝Vue CLI 110
6.3.4 Vue CLI新建項(xiàng)目 111
6.3.5 Vue.js 3項(xiàng)目的目錄結(jié)構(gòu) 114
6.3.6 項(xiàng)目的運(yùn)行和打包 115
6.3.7 vue.config.js文件解析 117
6.4 認(rèn)識(shí)Vite 120
6.5 create-vue 腳手架 121
6.5.1 認(rèn)識(shí)create-vue 121
6.5.2 create-vue新建項(xiàng)目 121
6.5.3 Vue.js 3項(xiàng)目目錄結(jié)構(gòu) 122
6.5.4 項(xiàng)目的運(yùn)行和打包 123
6.5.5 vite.config.js文件解析 124
6.6 webpack和Vite的區(qū)別 126
6.7 本章小結(jié) 127
7 Vue.js 3組件化基礎(chǔ)詳解 128
7.1 組件的嵌套 130
7.1.1 搭建基本頁(yè)面 130
7.1.2 組件的拆分和嵌套 131
7.1.3 組件CSS的作用域 134
7.1.4 組件之間的通信 135
7.2 組件樣式的特性 135
7.2.1 Scoped CSS 135
7.2.2 CSS Modules 138
7.2.3 在CSS中使用v-bind 139
7.3 父子組件的相互通信 140
7.3.1 父組件傳遞數(shù)據(jù)給子組件 140
7.3.2 子組件傳遞數(shù)據(jù)給父組件 146
7.3.3 案例：選項(xiàng)卡TabControl實(shí)戰(zhàn) 150
7.4 非父子組件的相互通信 153
7.4.1 Provide/Inject依賴(lài)注入 153
7.4.2 全局事件總線(xiàn) 159
7.5 組件中的插槽 162
7.5.1 認(rèn)識(shí)插槽 162
7.5.2 插槽的使用 163
7.6 組件的作用域插槽 169
7.6.1 認(rèn)識(shí)渲染作用域 169
7.6.2 作用域插槽 169
7.6.3 獨(dú)占默認(rèn)插槽 171
7.7 本章小結(jié) 172
8 Vue.js 3組件化進(jìn)階詳解 173
8.1 動(dòng)態(tài)組件 173
8.1.1 v-if指令的實(shí)現(xiàn) 174
8.1.2 動(dòng)態(tài)組件的實(shí)現(xiàn) 175
8.1.3 動(dòng)態(tài)組件的傳參 176
8.1.4 keep-alive的使用 177
8.2 異步組件 180
8.2.1 webpack對(duì)代碼分包 180
8.2.2 在Vue.js 3中實(shí)現(xiàn)異步組件 182
8.2.3 異步組件和Suspense 185
8.3 獲取元素或組件的實(shí)例 187
8.3.1 $refs 187
8.3.2 $parent 189
8.4 組件生命周期函數(shù) 190
8.4.1 認(rèn)識(shí)組件的生命周期 190
8.4.2 生命周期函數(shù)的演練 191
8.5 在組件中使用v-model指令 193
8.5.1 v-model的基本使用方法 194
8.5.2 v-model綁定computed 195
8.5.3 組件上應(yīng)用多個(gè)v-model 197
8.5.4 v-model綁定對(duì)象類(lèi)型 198
8.6 本章小結(jié) 200
9 Vue.js 3實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà) 201
9.1 基本過(guò)渡動(dòng)畫(huà) 201
9.1.1 認(rèn)識(shí)過(guò)渡動(dòng)畫(huà) 201
9.1.2 過(guò)渡動(dòng)畫(huà)特有的類(lèi) 203
9.1.3 CSS的Animation動(dòng)畫(huà) 204
9.1.4 Transition組件的常見(jiàn)屬性 205
9.2 第三方庫(kù)動(dòng)畫(huà)庫(kù) 210
9.2.1 Animate.css動(dòng)畫(huà)庫(kù) 210
9.2.2 GSAP動(dòng)畫(huà)庫(kù) 212
9.3 列表中的過(guò)渡動(dòng)畫(huà) 216
9.3.1 TransitionGroup的基本使用 217
9.3.2 列表元素的過(guò)渡動(dòng)畫(huà) 219
9.3.3 案例：列表元素的交替過(guò)渡 220
9.4 本章小結(jié) 222
10 Vue.js 3 Composition API詳解 224
10.1 Options API代碼的復(fù)用 224
10.1.1 Mixin混入 224
10.1.2 extends繼承 228
10.2 認(rèn)識(shí)Composition API 229
10.3 setup函數(shù)的基本使用 230
10.3.1 setup函數(shù)的參數(shù) 231
10.3.2 setup函數(shù)的返回值 233
10.3.3 setup函數(shù)的this 234
10.4 數(shù)據(jù)響應(yīng)式API 235
10.4.1 reactive 235
10.4.2 ref 236
10.5 響應(yīng)式工具reactive 239
10.5.1 readonly 239
10.5.2 isProxy 241
10.5.3 isReactive 241
10.5.4 isReadonly 241
10.5.5 toRaw 242
10.5.6 shallowReactive 242
10.5.7 shallowReadonly 242
10.6 響應(yīng)式工具ref 242
10.6.1 toRefs 242
10.6.2 toRef 244
10.6.3 isRef 245
10.6.4 unref 245
10.6.5 customRef 245
10.6.6 shallowRef 247
10.6.7 triggerRef 247
10.7 computed計(jì)算屬性 247
10.7.1 computed函數(shù)的基本使用 247
10.7.2 computed函數(shù)的get和set方法 248
10.8 watchEffect監(jiān)聽(tīng) 249
10.8.1 watchEffect的基本使用 249
10.8.2 停止watchEffect監(jiān)聽(tīng) 251
10.8.3 watchEffect清除副作用 251
10.8.4 watchEffect的執(zhí)行時(shí)機(jī) 252
10.9 watch監(jiān)聽(tīng) 254
10.9.1 監(jiān)聽(tīng)單個(gè)數(shù)據(jù)源 254
10.9.2 監(jiān)聽(tīng)多個(gè)數(shù)據(jù)源 257
10.9.3 監(jiān)聽(tīng)響應(yīng)式對(duì)象 258
10.10 組件生命周期函數(shù) 259
10.11 Provide/Inject依賴(lài)注入 260
10.11.1 提供數(shù)據(jù) 261
10.11.2 注入數(shù)據(jù) 262
10.11.3 提供和注入響應(yīng)式數(shù)據(jù) 263
10.12 案例：Composition API的實(shí)戰(zhàn) 264
10.12.1 計(jì)數(shù)器的兩種實(shí)現(xiàn)方式 264
10.12.2 代碼邏輯的封裝和復(fù)用 266
10.12.3 修改網(wǎng)頁(yè)的標(biāo)題 267
10.12.4 監(jiān)聽(tīng)頁(yè)面滾動(dòng)位置 268
10.13 ＜script setup＞語(yǔ)法 270
10.13.1 ＜script setup＞的基本使用 270
10.13.2 defineProps和defineEmits 272
10.13.3 defineExpose 273
10.13.4 useSlots和useAttrs 274
10.14 本章小結(jié) 275
11 Vue.js 3組件化高級(jí)詳解 276
11.1 render函數(shù) 276
11.1.1 認(rèn)識(shí)h函數(shù) 276
11.1.2 h函數(shù)的基本使用 277
11.1.3 render函數(shù)實(shí)現(xiàn)計(jì)數(shù)器 278
11.1.4 setup函數(shù)實(shí)現(xiàn)計(jì)數(shù)器 279
11.1.5 在render函數(shù)中實(shí)現(xiàn)插槽 279
11.1.6 組件的JSX語(yǔ)法 281
11.2 自定義指令 283
11.2.1 自定義指令的基本使用 283
11.2.2 自定義指令的生命周期函數(shù) 285
11.2.3 自定義指令的參數(shù)和修飾符 287
11.2.4 案例：自定義時(shí)間格式化指令 288
11.3 teleport內(nèi)置組件 290
11.3.1 認(rèn)識(shí)teleport組件 290
11.3.2 teleport的基本使用 290
11.3.3 teleport中嵌套組件 291
11.3.4 多個(gè)teleport組件的使用 291
11.4 Vue.js 3的插件開(kāi)發(fā) 292
11.4.1 認(rèn)識(shí)Vue.js 3插件 292
11.4.2 對(duì)象類(lèi)型的插件 292
11.4.3 函數(shù)類(lèi)型的插件 293
11.5 nextTick函數(shù)的原理 294
11.6 本章小結(jié) 297
12 Vue Router路由 299
12.1 認(rèn)識(shí)Vue Router 299
12.1.1 什么是前端路由 299
12.1.2 前端路由的原理 300
12.1.3 認(rèn)識(shí)Vue Router 303
12.2 Vue Router的基本使用 303
12.2.1 路由的基本使用 303
12.2.2 路由配置的細(xì)節(jié) 306
12.3 Vue Router進(jìn)階知識(shí) 310
12.3.1 動(dòng)態(tài)路由的匹配 310
12.3.2 嵌套路由的使用 314
12.3.3 編程式導(dǎo)航的使用 317
12.3.4 路由內(nèi)置組件的插槽 320
12.3.5 動(dòng)態(tài)添加路由 322
12.3.6 路由守衛(wèi) 324
12.4 本章小結(jié) 326
13 Vuex狀態(tài)管理 327
13.1 認(rèn)識(shí)Vuex狀態(tài)管理 327
13.1.1 認(rèn)識(shí)狀態(tài)管理 327
13.1.2 Vuex的基本使用 329
13.1.3 Vue.js devtools插件安裝 331
13.2 Vuex的核心概念 333
13.2.1 state 333
13.2.2 getters 339
13.2.3 mutations 343
13.2.4 actions 347
13.2.5 modules 352
13.3 本章小結(jié) 361
14 TypeScript的基礎(chǔ)詳解 362
14.1 認(rèn)識(shí)JavaScript 362
14.1.1 優(yōu)秀的JavaScript 362
14.1.2 類(lèi)型引發(fā)的問(wèn)題 363
14.1.3 缺少類(lèi)型約束 364
14.2 認(rèn)識(shí)TypeScript 364
14.2.1 什么是TypeScript 364
14.2.2 TypeScript的特點(diǎn) 365
14.3 搭建TypeScript的運(yùn)行環(huán)境 365
14.3.1 TypeScript的編譯環(huán)境 365
14.3.2 TypeScript的運(yùn)行環(huán)境 366
14.4 聲明變量的方式 367
14.4.1 聲明變量的格式 367
14.4.2 聲明變量的關(guān)鍵字 368
14.4.3 變量的類(lèi)型推導(dǎo) 368
14.5 JavaScript的數(shù)據(jù)類(lèi)型 368
14.5.1 number類(lèi)型 368
14.5.2 boolean類(lèi)型 369
14.5.3 string類(lèi)型 369
14.5.4 array類(lèi)型 370
14.5.5 object類(lèi)型 370
14.5.6 null和undefined類(lèi)型 370
14.5.7 symbol類(lèi)型 371
14.6 TypeScript的數(shù)據(jù)類(lèi)型 371
14.6.1 any類(lèi)型 371
14.6.2 unknown類(lèi)型 372
14.6.3 void類(lèi)型 372
14.6.4 never類(lèi)型 372
14.6.5 tuple類(lèi)型 373
14.7 TypeScript類(lèi)型的補(bǔ)充 374
14.7.1 函數(shù)的參數(shù)和返回值 374
14.7.2 對(duì)象類(lèi)型 375
14.7.3 聯(lián)合類(lèi)型 376
14.7.4 類(lèi)型別名 376
14.7.5 類(lèi)型斷言 377
14.7.6 字面量類(lèi)型 380
14.7.7 類(lèi)型縮小 381
14.8 TypeScript函數(shù)類(lèi)型詳解 383
14.8.1 函數(shù)的類(lèi)型 383
14.8.2 函數(shù)參數(shù)的類(lèi)型 384
14.8.3 this的類(lèi)型 385
14.8.4 函數(shù)重載 386
14.9 本章小結(jié) 387
15 TypeScript的進(jìn)階詳解 388
15.1 TypeScript類(lèi)的使用 388
15.1.1 類(lèi)的定義 388
15.1.2 類(lèi)的繼承 389
15.1.3 類(lèi)的多態(tài) 390
15.1.4 成員修飾符 391
15.1.5 只讀屬性 392
15.1.6 getter/setter 393
15.1.7 靜態(tài)成員 393
15.1.8 抽象類(lèi) 393
15.1.9 類(lèi)作為數(shù)據(jù)類(lèi)型使用 394
15.2 TypeScript接口的使用 395
15.2.1 接口的聲明 395
15.2.2 索引類(lèi)型 396
15.2.3 函數(shù)類(lèi)型 397
15.2.4 接口的繼承 397
15.2.5 交叉類(lèi)型 398
15.2.6 接口的實(shí)現(xiàn) 398
15.2.7 interface和type的區(qū)別 399
15.2.8 字面量賦值 400
15.3 TypeScript枚舉類(lèi)型 401
15.3.1 認(rèn)識(shí)枚舉 401
15.3.2 枚舉的值 401
15.4 TypeScript泛型的使用 402
15.4.1 認(rèn)識(shí)泛型 402
15.4.2 泛型接口 403
15.4.3 泛型類(lèi) 403
15.4.4 泛型約束 404
15.5 模塊和命名空間 405
15.5.1 模塊化開(kāi)發(fā) 405
15.5.2 命名空間 405
15.6 類(lèi)型的聲明 406
15.6.1 類(lèi)型的查找 406
15.6.2 創(chuàng)建Vue.js 3 + TypeScript項(xiàng)目 407
15.6.3 declare聲明變量 408
15.6.4 declare聲明函數(shù) 409
15.6.5 declare聲明類(lèi) 409
15.6.6 declare聲明文件 410
15.6.7 declare聲明模塊 410
15.6.8 declare聲明命名空間 411
15.7 tsconfig.json文件解析 411
15.8 本章小結(jié) 413
16 第三方庫(kù)的集成與使用 414
16.1 Vue CLI新建項(xiàng)目 414
16.2 Vue Router的集成 414
16.3 Vuex的集成 415
16.4 Element Plus的集成 417
16.4.1 Element Plus的介紹和安裝 417
16.4.2 Element Plus的全局引入 418
16.4.3 Element Plus的按需引入 419
16.4.4 Element Plus的手動(dòng)引入 420
16.5 axios的集成和使用 421
16.5.1 axios的介紹和安裝 421
16.5.2 axios的GET請(qǐng)求 422
16.5.3 axios的POST請(qǐng)求 424
16.5.4 axios的配置選項(xiàng) 425
16.5.5 axios的并發(fā)請(qǐng)求 425
16.5.6 axios的攔截器 426
16.5.7 axios的實(shí)例 427
16.5.8 axios + TypeScript的封裝 427
16.6 ECharts的集成和使用 432
16.6.1 認(rèn)識(shí)前端可視化 432
16.6.2 ECharts介紹 432
16.6.3 ECharts的基本使用 433
16.6.4 ECharts的渲染引擎 435
16.6.5 ECharts的配置選項(xiàng) 436
16.6.6 BaseEchart組件的封裝 437
16.6.7 ECharts繪制餅圖 440
16.6.8 ECharts繪制折線(xiàn)圖 441
16.7 本章小結(jié) 442
17 后臺(tái)管理系統(tǒng) 443
17.1 Vue.js 3 + TypeScript項(xiàng)目介紹 443
17.2 Vue CLI新建項(xiàng)目 444
17.3 項(xiàng)目開(kāi)發(fā)規(guī)范 447
17.3.1 統(tǒng)一IDE編碼格式 447
17.3.2 Prettier格式化代碼 447
17.3.3 ESLint 檢測(cè)代碼 449
17.3.4 項(xiàng)目編碼規(guī)范 449
17.4 快速集成第三方庫(kù) 449
17.4.1 vue.config.js的配置 449
17.4.2 Vue-Router的集成 451
17.4.3 Vuex的集成 452
17.4.4 Element Plus的按需導(dǎo)入 453
17.4.5 axios的集成與封裝 454
17.4.6 區(qū)分開(kāi)發(fā)和生成環(huán)境 457
17.5 tsconfig.json文件的解析 458
17.6 vue文件的類(lèi)型聲明 459
17.7 defineComponent函數(shù)的作用 460
17.8 登錄模塊 460
17.8.1 搭建登錄頁(yè)面 460
17.8.2 登錄表單的實(shí)現(xiàn) 464
17.8.3 表單規(guī)則的校驗(yàn) 466
17.8.4 登錄邏輯的實(shí)現(xiàn) 468
17.8.5 網(wǎng)絡(luò)請(qǐng)求的反向代理 473
17.8.6 登錄后獲取用戶(hù)信息 474
17.9 首頁(yè)模塊 476
17.9.1 搭建首頁(yè)的布局 476
17.9.2 封裝菜單組件 478
17.9.3 封裝頭部欄組件 483
17.9.4 新建頁(yè)面和配置路由 486
17.9.5 動(dòng)態(tài)注冊(cè)路由 488
17.9.6 封裝面包屑組件 491
17.10 用戶(hù)模塊 493
17.10.1 高級(jí)檢索功能 493
17.10.2 用戶(hù)列表功能 500
17.11 路由守衛(wèi)和國(guó)際化 511
17.11.1 添加路由守衛(wèi) 511
17.11.2 Element Plus的國(guó)際化 511
17.12 本章小結(jié) 512
18 自動(dòng)化部署 513
18.1 DevOps開(kāi)發(fā)模式 513
18.1.1 傳統(tǒng)開(kāi)發(fā)模式 513
18.1.2 DevOps開(kāi)發(fā)模式 513
18.1.3 持續(xù)集成和持續(xù)交付 514
18.1.4 自動(dòng)化部署流程 515
18.2 購(gòu)買(mǎi)云服務(wù)器 516
18.2.1 注冊(cè)阿里云賬號(hào) 516
18.2.2 購(gòu)買(mǎi)云服務(wù)器 516
18.3 連接遠(yuǎn)程云服務(wù)器 518
18.4 Nginx安裝和配置 519
18.5 Nginx手動(dòng)部署Vue.js 3項(xiàng)目 520
18.6 Jenkins安裝和配置 522
18.6.1 安裝Jenkins 522
18.6.2 Jenkins設(shè)置向?qū)?523
18.6.3 Jenkins插件安裝 524
18.7 項(xiàng)目自動(dòng)化部署 526
18.7.1 新建任務(wù) 526
18.7.2 源碼管理 526
18.7.3 構(gòu)建觸發(fā)器 527
18.7.4 構(gòu)建環(huán)境 528
18.7.5 構(gòu)建腳本 528
18.7.6 立即構(gòu)建 530
18.7.7 構(gòu)建結(jié)果 530
18.8 本章小結(jié) 531
19 手寫(xiě)Mini-Vue.js 3框架 532
19.1 Vue.js 3源碼概述 532
19.1.1 認(rèn)識(shí)虛擬DOM 532
19.1.2 Vue.js 3源碼的三大核心模塊 534
19.2 Mini-Vue.js 3框架的實(shí)現(xiàn) 535
19.2.1 渲染系統(tǒng)的實(shí)現(xiàn) 535
19.2.2 響應(yīng)式系統(tǒng)的實(shí)現(xiàn) 542
19.2.3 應(yīng)用程序入口模塊 548
19.3 本章小結(jié) 554