《Vue.js 3+TypeScript完全指南》是電子工業出版社出版圖書，作者是王紅元，劉軍
全面介紹Vue.js 3和TypeScript前端開發技術及核心原理，手寫Mini-Vue.js 3框架。
基本介紹
- 中文名：Vue.js 3+TypeScript完全指南
- 作者：王紅元 、劉軍
- 出版時間：2023年10月
- 出版社：電子工業出版社
- 頁數：576 頁
- ISBN：9787121462764
- 定價：159 元
- 開本：16 開
內容簡介,圖書目錄,作者簡介,
內容簡介
是一本全面、深入介紹Vue.js 3和TypeScript前端開發技術的圖書，詳細介紹了Vue.js 3的新特性與優勢
圖書目錄
1 邂逅和初體驗Vue.js 1
1.1 認識Vue.js1
1.2 Vue.js與其他框架的對比2
1.2.1 Vue.js、React和Angular三大框架對比 2
1.2.2 三大框架使用數據對比2
1.3 Vue.js 2的缺點 4
1.4 Vue.js 3帶來的新變化 4
1.5 搭建開發環境 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 計數器案例 16
1.7.1 原生JavaScript實現計數器 16
1.7.2 用Vue.js 3實現計數器 17
1.7.3 MVVM架構模式 19
1.8 createApp的對象參數 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 本章小結 27
2 模板語法和內置指令 28
2.1 插值語法 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 動態綁定屬性40
2.3.5 綁定一個對象41
2.4 v-on 42
2.4.1 綁定事件42
2.4.2 事件對象和傳遞參數 44
2.4.3 修飾符 45
2.5 條件渲染 46
2.5.1 v-if和v-else46
2.5.2 v-if和template結合使用 48
2.5.3 v-show 49
2.5.4 v-show和v-if的區別 50
2.6 列表渲染 51
2.6.1 v-for的基本使用 51
2.6.2 v-for支持的類型 52
2.6.3 v-for和template結合使用 54
2.6.4 數組的更新檢測 55
2.7 key和diff算法 57
2.7.1 認識VNode和VDOM 57
2.7.2 key的作用和diff算法 59
2.7.3 沒有key時的diff算法操作 60
2.7.4 有key時的diff算法操作 61
2.8 本章小結 64
3 Vue.js 3的Options API65
3.1 計算屬性 65
3.1.1 認識計算屬性65
3.1.2 計算屬性的基本使用 66
3.1.3 計算屬性和methods的區別69
3.1.4 計算屬性的setter和getter 71
3.2 監聽器watch 73
3.2.1 watch的基本使用 73
3.2.2 watch配置選項 75
3.2.3 watch字元串、數組和API語法 78
3.2.4 watch深度監聽 79
3.3 案例：書籍購物車 80
3.3.1 基本功能介紹80
3.3.2 搭建基本功能81
3.3.3 搭建書籍列表83
3.3.4 搭建“加購物車”功能84
3.3.5 最佳化價格和購買數量 86
3.3.6 完整代碼展示86
3.4 本章小結 88
4 v-model和表單輸入89
4.1 v-model的基本使用 89
4.2 v-model的實現原理 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 本章小結 96
5 Vue.js 3組件化開發 97
5.1 認識組件化 97
5.2 Vue.js 3的組件化 98
5.3 Vue.js 3註冊組件 99
5.3.1 註冊全局組件99
5.3.2 組件的命名規範 102
5.3.3 註冊局部組件103
5.4 Vue.js 3開發模式 105
5.5 Vue.js 3支持SFC 106
5.6 本章小結 106
6 前端工程化 107
6.1 前端快速發展史 107
6.2 認識webpack 108
6.3 Vue CLI腳手架 109
6.3.1 認識Vue CLI 109
6.3.2 安裝Node.js 109
6.3.3 安裝Vue CLI 110
6.3.4 Vue CLI新建項目 111
6.3.5 Vue.js 3項目的目錄結構 114
6.3.6 項目的運行和打包115
6.3.7 vue.config.js檔案解析 117
6.4 認識Vite 120
6.5 create-vue 腳手架 121
6.5.1 認識create-vue 121
6.5.2 create-vue新建項目 121
6.5.3 Vue.js 3項目目錄結構 122
6.5.4 項目的運行和打包123
6.5.5 vite.config.js檔案解析 124
6.6 webpack和Vite的區別 126
6.7 本章小結 127
7 Vue.js 3組件化基礎詳解 128
7.1 組件的嵌套 130
7.1.1 搭建基本頁面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 父組件傳遞數據給子組件 140
7.3.2 子組件傳遞數據給父組件 146
7.3.3 案例：選項卡TabControl實戰 150
7.4 非父子組件的相互通信 153
7.4.1 Provide/Inject依賴注入153
7.4.2 全局事件匯流排159
7.5 組件中的插槽 162
7.5.1 認識插槽162
7.5.2 插槽的使用 163
7.6 組件的作用域插槽 169
7.6.1 認識渲染作用域 169
7.6.2 作用域插槽 169
7.6.3 獨占默認插槽171
7.7 本章小結 172
8 Vue.js 3組件化進階詳解 173
8.1 動態組件 173
8.1.1 v-if指令的實現 174
8.1.2 動態組件的實現 175
8.1.3 動態組件的傳參 176
8.1.4 keep-alive的使用 177
8.2 異步組件 180
8.2.1 webpack對代碼分包 180
8.2.2 在Vue.js 3中實現異步組件 182
8.2.3 異步組件和Suspense185
8.3 獲取元素或組件的實例 187
8.3.1 $refs187
8.3.2 $parent 189
8.4 組件生命周期函式 190
8.4.1 認識組件的生命周期 190
8.4.2 生命周期函式的演練 191
8.5 在組件中使用v-model指令193
8.5.1 v-model的基本使用方法 194
8.5.2 v-model綁定computed 195
8.5.3 組件上套用多個v-model 197
8.5.4 v-model綁定對象類型 198
8.6 本章小結 200
9 Vue.js 3實現過渡動畫201
9.1 基本過渡動畫 201
9.1.1 認識過渡動畫201
9.1.2 過渡動畫特有的類203
9.1.3 CSS的Animation動畫 204
9.1.4 Transition組件的常見屬性 205
9.2 第三方庫動畫庫 210
9.2.1 Animate.css動畫庫 210
9.2.2 GSAP動畫庫 212
9.3 列表中的過渡動畫 216
9.3.1 TransitionGroup的基本使用 217
9.3.2 列表元素的過渡動畫 219
9.3.3 案例：列表元素的交替過渡220
9.4 本章小結 222
10 Vue.js 3 Composition API詳解 224
10.1 Options API代碼的復用 224
10.1.1 Mixin混入224
10.1.2 extends繼承228
10.2 認識Composition API 229
10.3 setup函式的基本使用 230
10.3.1 setup函式的參數231
10.3.2 setup函式的返回值233
10.3.3 setup函式的this 234
10.4 數據回響式API 235
10.4.1 reactive 235
10.4.2 ref 236
10.5 回響式工具reactive 239
10.5.1 readonly239
10.5.2 isProxy 241
10.5.3 isReactive 241
10.5.4 isReadonly 241
10.5.5 toRaw 242
10.5.6 shallowReactive242
10.5.7 shallowReadonly 242
10.6 回響式工具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計算屬性 247
10.7.1 computed函式的基本使用 247
10.7.2 computed函式的get和set方法 248
10.8 watchEffect監聽 249
10.8.1 watchEffect的基本使用 249
10.8.2 停止watchEffect監聽 251
10.8.3 watchEffect清除副作用 251
10.8.4 watchEffect的執行時機 252
10.9 watch監聽 254
10.9.1 監聽單個數據源 254
10.9.2 監聽多個數據源 257
10.9.3 監聽回響式對象 258
10.10 組件生命周期函式 259
10.11 Provide/Inject依賴注入 260
10.11.1 提供數據 261
10.11.2 注入數據 262
10.11.3 提供和注入回響式數據 263
10.12 案例：Composition API的實戰 264
10.12.1 計數器的兩種實現方式 264
10.12.2 代碼邏輯的封裝和復用 266
10.12.3 修改網頁的標題267
10.12.4 監聽頁面滾動位置 268
10.13 <script setup>語法270
10.13.1 <script setup>的基本使用 270
10.13.2 defineProps和defineEmits272
10.13.3 defineExpose 273
10.13.4 useSlots和useAttrs274
10.14 本章小結 275
11 Vue.js 3組件化高級詳解 276
11.1 render函式 276
11.1.1 認識h函式 276
11.1.2 h函式的基本使用 277
11.1.3 render函式實現計數器 278
11.1.4 setup函式實現計數器279
11.1.5 在render函式中實現插槽 279
11.1.6 組件的JSX語法 281
11.2 自定義指令 283
11.2.1 自定義指令的基本使用 283
11.2.2 自定義指令的生命周期函式 285
11.2.3 自定義指令的參數和修飾符 287
11.2.4 案例：自定義時間格式化指令 288
11.3 teleport內置組件 290
11.3.1 認識teleport組件 290
11.3.2 teleport的基本使用 290
11.3.3 teleport中嵌套組件 291
11.3.4 多個teleport組件的使用 291
11.4 Vue.js 3的外掛程式開發 292
11.4.1 認識Vue.js 3外掛程式 292
11.4.2 對象類型的外掛程式 292
11.4.3 函式類型的外掛程式 293
11.5 nextTick函式的原理 294
11.6 本章小結 297
12 Vue Router路由 299
12.1 認識Vue Router 299
12.1.1 什麼是前端路由 299
12.1.2 前端路由的原理 300
12.1.3 認識Vue Router 303
12.2 Vue Router的基本使用 303
12.2.1 路由的基本使用 303
12.2.2 路由配置的細節 306
12.3 Vue Router進階知識 310
12.3.1 動態路由的匹配 310
12.3.2 嵌套路由的使用 314
12.3.3 編程式導航的使用 317
12.3.4 路由內置組件的插槽 320
12.3.5 動態添加路由 322
12.3.6 路由守衛 324
12.4 本章小結 326
13 Vuex狀態管理 327
13.1 認識Vuex狀態管理 327
13.1.1 認識狀態管理 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 modules352
13.3 本章小結 361
14 TypeScript的基礎詳解 362
14.1 認識JavaScript362
14.1.1 優秀的JavaScript 362
14.1.2 類型引發的問題 363
14.1.3 缺少類型約束 364
14.2 認識TypeScript 364
14.2.1 什麼是TypeScript364
14.2.2 TypeScript的特點365
14.3 搭建TypeScript的運行環境 365
14.3.1 TypeScript的編譯環境365
14.3.2 TypeScript的運行環境366
14.4 聲明變數的方式 367
14.4.1 聲明變數的格式 367
14.4.2 聲明變數的關鍵字 368
14.4.3 變數的類型推導 368
14.5 JavaScript的數據類型368
14.5.1 number類型368
14.5.2 boolean類型369
14.5.3 string類型 369
14.5.4 array類型 370
14.5.5 object類型 370
14.5.6 null和undefined類型 370
14.5.7 symbol類型 371
14.6 TypeScript的數據類型 371
14.6.1 any類型 371
14.6.2 unknown類型 372
14.6.3 void類型 372
14.6.4 never類型 372
14.6.5 tuple類型 373
14.7 TypeScript類型的補充 374
14.7.1 函式的參數和返回值 374
14.7.2 對象類型 375
14.7.3 聯合類型 376
14.7.4 類型別名 376
14.7.5 類型斷言 377
14.7.6 字面量類型 380
14.7.7 類型縮小 381
14.8 TypeScript函式類型詳解 383
14.8.1 函式的類型 383
14.8.2 函式參數的類型 384
14.8.3 this的類型 385
14.8.4 函式重載 386
14.9 本章小結 387
15 TypeScript的進階詳解 388
15.1 TypeScript類的使用 388
15.1.1 類的定義 388
15.1.2 類的繼承 389
15.1.3 類的多態 390
15.1.4 成員修飾符 391
15.1.5 唯讀屬性 392
15.1.6 getter/setter 393
15.1.7 靜態成員 393
15.1.8 抽象類 393
15.1.9 類作為數據類型使用 394
15.2 TypeScript接口的使用 395
15.2.1 接口的聲明 395
15.2.2 索引類型 396
15.2.3 函式類型 397
15.2.4 接口的繼承 397
15.2.5 交叉類型 398
15.2.6 接口的實現 398
15.2.7 interface和type的區別 399
15.2.8 字面量賦值 400
15.3 TypeScript枚舉類型 401
15.3.1 認識枚舉 401
15.3.2 枚舉的值 401
15.4 TypeScript泛型的使用 402
15.4.1 認識泛型 402
15.4.2 泛型接口 403
15.4.3 泛型類 403
15.4.4 泛型約束 404
15.5 模組和命名空間 405
15.5.1 模組化開發 405
15.5.2 命名空間 405
15.6 類型的聲明 406
15.6.1 類型的查找 406
15.6.2 創建Vue.js 3 + TypeScript項目 407
15.6.3 declare聲明變數 408
15.6.4 declare聲明函式 409
15.6.5 declare聲明類 409
15.6.6 declare聲明檔案 410
15.6.7 declare聲明模組 410
15.6.8 declare聲明命名空間 411
15.7 tsconfig.json檔案解析 411
15.8 本章小結 413
16 第三方庫的集成與使用 414
16.1 Vue CLI新建項目 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的手動引入420
16.5 axios的集成和使用421
16.5.1 axios的介紹和安裝 421
16.5.2 axios的GET請求 422
16.5.3 axios的POST請求 424
16.5.4 axios的配置選項 425
16.5.5 axios的並發請求 425
16.5.6 axios的攔截器 426
16.5.7 axios的實例 427
16.5.8 axios + TypeScript的封裝 427
16.6 ECharts的集成和使用 432
16.6.1 認識前端可視化 432
16.6.2 ECharts介紹 432
16.6.3 ECharts的基本使用 433
16.6.4 ECharts的渲染引擎 435
16.6.5 ECharts的配置選項 436
16.6.6 BaseEchart組件的封裝 437
16.6.7 ECharts繪製餅圖 440
16.6.8 ECharts繪製折線圖 441
16.7 本章小結 442
17 後台管理系統 443
17.1 Vue.js 3 + TypeScript項目介紹 443
17.2 Vue CLI新建項目 444
17.3 項目開發規範 447
17.3.1 統一IDE編碼格式 447
17.3.2 Prettier格式化代碼 447
17.3.3 ESLint 檢測代碼 449
17.3.4 項目編碼規範 449
17.4 快速集成第三方庫 449
17.4.1 vue.config.js的配置 449
17.4.2 Vue-Router的集成 451
17.4.3 Vuex的集成 452
17.4.4 Element Plus的按需導入453
17.4.5 axios的集成與封裝 454
17.4.6 區分開發和生成環境 457
17.5 tsconfig.json檔案的解析458
17.6 vue檔案的類型聲明 459
17.7 defineComponent函式的作用 460
17.8 登錄模組 460
17.8.1 搭建登錄頁面 460
17.8.2 登錄表單的實現 464
17.8.3 表單規則的校驗 466
17.8.4 登錄邏輯的實現 468
17.8.5 網路請求的反向代理 473
17.8.6 登錄後獲取用戶信息 474
17.9 首頁模組 476
17.9.1 搭建首頁的布局 476
17.9.2 封裝選單組件 478
17.9.3 封裝頭部欄組件 483
17.9.4 新建頁面和配置路由 486
17.9.5 動態註冊路由 488
17.9.6 封裝麵包屑組件 491
17.10 用戶模組 493
17.10.1 高級檢索功能 493
17.10.2 用戶列表功能 500
17.11 路由守衛和國際化 511
17.11.1 添加路由守衛 511
17.11.2 Element Plus的國際化 511
17.12 本章小結 512
18 自動化部署513
18.1 DevOps開發模式 513
18.1.1 傳統開發模式 513
18.1.2 DevOps開發模式 513
18.1.3 持續集成和持續交付 514
18.1.4 自動化部署流程 515
18.2 購買雲伺服器 516
18.2.1 註冊阿里雲賬號 516
18.2.2 購買雲伺服器 516
18.3 連線遠程雲伺服器 518
18.4 Nginx安裝和配置 519
18.5 Nginx手動部署Vue.js 3項目520
18.6 Jenkins安裝和配置 522
18.6.1 安裝Jenkins 522
18.6.2 Jenkins設定嚮導 523
18.6.3 Jenkins外掛程式安裝 524
18.7 項目自動化部署 526
18.7.1 新建任務 526
18.7.2 源碼管理 526
18.7.3 構建觸發器 527
18.7.4 構建環境 528
18.7.5 構建腳本 528
18.7.6 立即構建 530
18.7.7 構建結果 530
18.8 本章小結 531
19 手寫Mini-Vue.js 3框架 532
19.1 Vue.js 3源碼概述 532
19.1.1 認識虛擬DOM 532
19.1.2 Vue.js 3源碼的三大核心模組 534
19.2 Mini-Vue.js 3框架的實現 535
19.2.1 渲染系統的實現 535
19.2.2 回響式系統的實現 542
19.2.3 應用程式入口模組 548
19.3 本章小結 554
作者簡介
王紅元（網名coderwhy），擔任廣州市弘源科教軟體有限公司CEO、澳大利亞The WAIN公司CTO，作為騰訊AI高校訓練營的特聘講師。
在國內外大型項目和軟體系統中，負責架構設計和研發工作，曾兼任多家公司的技術顧問，協助解決開發過程中的關鍵問題。
精通多種程式語言，包括C/C++、Python、Java、Objective-C、Swift、JavaScript和TypeScript等，對即時聊天和流媒體技術有深入研究。
致力於不斷提高自身技能，為企業、開源社區及學員做出更多貢獻。
劉軍，曾在深圳市華雲中盛科技股份有限公司擔任前端負責人，廣州市弘源科教軟體有限公司聯合創始人之一，擁有8年前端開發經驗。精通Vue.js、React、TypeScript、webpack、Vite、Node、Docker、CI/CD，以及Java、Android等技術棧，擅長微前端、中後台、組件庫、腳手架、公眾號、小程式、大屏可視化等領域的工作。
