劍指 Vue3 — 從入門到實踐

第1章 Vue.js概述 1
1.1 六何分析Vue 1
1.1.1 Vue是什麽 1
1.1.2 Vue是由誰開發的 2
1.1.3 Vue的發展歷程 2
1.1.4 Vue用在哪些項目的開發中 3
1.1.5 為什麽要選擇Vue 3
1.1.6 如何學習Vue 4
1.2 Vue3的新特性 4
1.2.1 內在核心的變化 4
1.2.2 渲染引擎的改進 4
1.2.3 新的內置組件 5
1.2.4 API的修改 6
1.3 Vue3的運行環境 9
1.3.1 運行環境搭建 9
1.3.2 Vue開發者調試工具 13
第2章 核心語法 15
2.1 模板語法 15
2.1.1 插值語法 15
2.1.2 指令語法 16
2.1.3 data和methods配置項 17
2.2 計算屬性 19
2.2.1 計算屬性的基本使用 19
2.2.2 計算屬性和method方法 21
2.2.3 計算屬性的setter 22
2.3 監聽 24
2.3.1 監聽的基本使用 24
2.3.2 即時回調與深度監聽 25
2.4 綁定動態樣式 28
2.4.1 class綁定 28
2.4.2 style綁定 30
2.5 條件渲染指令 32
2.5.1 v-if相關指令 32
2.5.2 v-show指令 33
2.5.3 比較v-if和v-show指令 34
2.6 列表渲染指令 35
2.6.1 列表的動態渲染 35
2.6.2 列表的增、刪、改 37
2.6.3 列表的過濾 39
2.6.4 列表的排序 40
2.7 事件處理 41
2.7.1 綁定事件監聽 41
2.7.2 事件修飾符 43
2.7.3 按鍵修飾符 44
2.8 收集表單數據 45
2.8.1 使用v-model指令 46
2.8.2 相關指令修飾符 47
2.9 Vue實例的生命周期 49
2.9.1 生命周期流程圖 49
2.9.2 Vue實例的生命周期分析 50
2.9.3 常用的生命周期鉤子函數 53
2.10 過渡與動畫 53
2.10.1 基於CSS的過渡動畫效果 54
2.10.2 基於CSS的逐幀動畫效果 55
2.10.3 基於第三方動畫類庫的CSS動畫效果 56
2.10.4 基於JavaScript的動畫效果 57
2.10.5 多元素分組動畫效果 59
2.11 內置指令 61
2.11.1 v-text和v-html指令 61
2.11.2 v-pre指令 61
2.11.3 v-once指令 62
2.11.4 v-memo指令 63
2.11.5 v-cloak指令 64
第3章 Vue3新語法 65
3.1 組合式API的瞭解 65
3.2 setup組合式API入口函數 67
3.3 利用ref函數定義響應式數據 68
3.4 利用reactive函數定義響應式數據 70
3.5 toRefs與toRef函數 72
3.6 readonly與shallowReadonly函數 74
3.7 shallowRef與shallowReactive函數 76
3.8 toRaw與markRaw函數 79
3.9 computed函數 81
3.10 watch函數 83
3.11 生命周期鉤子函數 86
第4章 組件詳解 89
4.1 腳手架項目的分析 89
4.2 ESLint與Prettier 95
4.2.1 ESLint語法檢查 95
4.2.2 Prettier代碼格式化 96
4.3 組件樣式控制 97
4.3.1 組件定義與使用 97
4.3.2 全局樣式控制 99
4.3.3 局部作用域樣式控制 99
4.3.4 深度樣式控制 100
4.4 組件通信之props 100
4.4.1 組件關系 101
4.4.2 父與子通信之props 102
4.5 組件通信之ref與defineExpose 105
4.6 組件通信之emits與defineEmits 107
4.7 組件通信之attrs 108
4.8 組件通信之provide與inject 110
4.9 組件通信之mitt 111
4.10 組件通信之slot 113
4.10.1 默認插槽 113
4.10.2 具名插槽 114
4.10.3 插槽默認值 115
4.10.4 作用域插槽 116
4.11 內置組件之Component 117
4.12 內置組件之KeepAlive 119
4.13 內置組件之Teleport 122
4.14 代碼封裝之自定義directive（指令） 125
4.15 代碼封裝之自定義hook（鉤子） 127
4.16 代碼封裝之plugin（插件） 128
第5章 Vue路由 131
5.1 路由的概念與核心功能 131
5.1.1 路由概念的提出 131
5.1.2 路由的核心功能 133
5.2 動態組件加載 133
5.2.1 動態組件加載的實現 133
5.2.2 路徑別名與省略後綴的配置 135
5.3 配置簡單路由 136
5.4 路由鏈接高亮顯示 138
5.4.1 利用vue-router的內置樣式實現路由鏈接高亮顯示 138
5.4.2 利用active-class屬性實現路由鏈接高亮顯示 139
5.4.3 利用vue-router模塊的linkActiveClass全局配置實現路由鏈接高亮顯示 140
5.4.4 利用router-link的slot實現自定義標簽與高亮顯示 141
5.4.5 利用bootstrap改善導航頁面 142
5.5 嵌套路由 142
5.5.1 目標分析與功能規劃 143
5.5.2 嵌套路由實現 144
5.6 動態路由傳參 148
5.6.1 路由參數基礎概念理解 149
5.6.2 params參數的應用 149
5.6.3 query參數的應用 154
5.7 路由參數映射 154
5.7.1 props的不同類型映射 155
5.7.2 拆分路由配置代碼提高可維護性 158
5.8 命名路由切換 159
5.9 命名視圖渲染 160
5.9.1 命名視圖的基本應用 161
5.9.2 嵌套路由中命名視圖的應用 162
5.10 編程式路由導航 164
5.11 路由過濾篩選 166
5.12 路由過渡動畫效果 168
5.12.1 先過渡再路由切換 168
5.12.2 先路由切換再過渡 169
5.13 路由滾動行為 171
5.14 路由的異步懶加載 172
5.15 緩存路由組件 174
5.15.1 KeepAlive的基本使用 175
5.15.2 KeepAlive的參數設置 179
5.16 路由守衛 181
5.16.1 利用路由全局守衛實現頁面切換時對進度條的控制 181
5.16.2 利用路由全局守衛實現授權頁面的禁用與指定頁面的查看功能 182
5.16.3 利用路由獨享守衛確認頁面來源 184
5.16.4 利用路由組件內守衛確認是否重復點擊相同內容及確認是否離開頁面 184
5.17 動態添加與刪除路由 185
第6章 數據請求 190
6.1 數據請求的概念 190
6.2 數據接口 191
6.2.1 什麽是接口 191
6.2.2 接口的類型有哪些 192
6.2.3 正式數據接口與模擬數據接口 192
6.3 接口調試 198
6.3.1 swagger接口調試 198
6.3.2 本地接口調試 199
6.4 原生API請求 200
6.4.1 AJAX基本概念與操作步驟 200
6.4.2 fetch請求 204
6.5 axios請求 205
6.5.1 axios基本請求實現 205
6.5.2 axios項目功能集成 206
第7章 狀態管理 214
7.1 常規組件通信的弊端 214
7.2 Vuex狀態管理器的概念 215
7.3 使用Vue實現一個計數器 217
7.4 Vuex基本使用 220
7.5 Vuex的多模塊開發 224
7.5.1 利用modules模塊拆分 224
7.5.2 添加用戶列表模塊 226
7.5.3 開啟Vuex模塊的命名空間 228
7.6 Vuex狀態數據的持久化處理 229
7.7 Pinia狀態管理器的概念 230
7.8 使用Pinia管理狀態數據 231
7.8.1 Pinia的安裝與語法 231
7.8.2 使用Pinia管理計數器模塊的狀態數據 232
7.8.3 使用Pinia管理用戶列表模塊的狀態數據 235
7.9 Pinia狀態數據的持久化處理 236
第8章 UI框架 238
8.1 功能性框架與UI框架的配合 238
8.2 UI框架分類與常用組件 238
8.3 PC端UI框架Element Plus 240
8.3.1 Element Plus框架的完整引入操作 240
8.3.2 Element Plus框架的按需引入打包操作 242
8.3.3 設計業務需求頁面 243
8.4 移動端UI框架Vant4 244
8.4.1 Vant4框架的完整引入操作 244
8.4.2 Vant4框架的按需引入打包操作 245
8.4.3 設計業務需求頁面 246
第9章 TypeScript 248
9.1 六何分析TypeScript 248
9.2 安裝TypeScript環境 250
9.2.1 TypeScript程序不能直接運行 250
9.2.2 安裝TypeScript環境並測試 251
9.3 一切從HelloWorld開始 252
9.3.1 在編譯時對數據類型進行靜態檢查 252
9.3.2 tsconfig.json環境配置 253
9.4 TypeScript的類型 254
9.5 TypeScript中的基礎類型 255
9.5.1 TypeScript中與JavaScript一致的基礎類型 255
9.5.2 TypeScript中特有的基礎類型 257
9.6 類型推斷 257
9.7 聯合類型 258
9.8 類型斷言 259
9.9 數組和元組 259
9.9.1 數組 259
9.9.2 元組 260
9.10 枚舉 260
9.11 函數 261
9.12 接口 263
9.12.1 接口初探 263
9.12.2 可選屬性 263
9.12.3 只讀屬性 264
9.12.4 描述函數類型 264
9.12.5 接口繼承接口 265
9.13 類 265
9.13.1 繼承 266
9.13.2 多態 267
9.13.3 訪問修飾符 268
9.13.4 readonly修飾符 269
9.13.5 靜態屬性 269
9.13.6 抽象類 270
9.14 泛型 270
9.14.1 泛型函數 270
9.14.2 泛型接口 271
9.14.3 泛型類 272
9.14.4 泛型約束 273
9.15 其他常用語法 273
9.15.1 類型別名 273
9.15.2 獲取類型 274
9.15.3 內置對象類型 275
9.15.4 聲明文件 276
9.15.5 4個特別的常用操作符 276
第10章 Vue3對TypeScript的支撐 278
10.1 創建支撐TypeScript的Vue項目 278
10.2 Vue3組合函數對TypeScript的支撐 281
10.2.1 reactive對TypeScript的支撐 281
10.2.2 ref對TypeScript的支撐 282
10.2.3 computed對TypeScript的支撐 285
10.2.4 props對TypeScript的支撐 285
10.2.5 emits對TypeScript的支撐 286
10.3 vue-router對TypeScript的支撐 287
10.4 Pinia對TypeScript的支撐 289
10.5 axios庫對TypeScript的支撐 293
10.6 綜合應用案例 297
10.6.1 搭建整體路由頁面 297
10.6.2 實現計劃列表路由功能頁面 301
10.6.3 實現用戶搜索路由功能頁面 310