Vue.js 3前端開發案例教程

目錄
第1章 Vue.js使用基礎 1
1.1　Vue簡介 1
1.1.1 前端技術的發展 1
1.1.2 什麽是Vue 2
1.1.3 Vue的優勢 3
1.1.4 Vue 3的新特性 4
1.2　配置Vue開發環境 4
1.2.1 常用集成開發環境 4
1.2.2 Node.js環境 6
1.2.3 npm包管理工具 7
1.2.4 Vue Devtools擴展 9
1.3　Vue的簡單使用 10
1.3.1 通過CDN使用Vue 10
1.3.2 構建Vue項目 16
1.3.3 兩種API風格 18
習題1 22
第2章 Vue應用創建 24
2.1　應用的創建和配置 24
2.1.1 創建應用實例 24
2.1.2 掛載應用 29
2.1.3 應用配置 31
2.1.4 多個應用實例 33
2.2　響應式基礎 35
2.2.1 數據屬性 35
2.2.2 組件方法 37
2.2.3 計算屬性 39
2.2.4 監聽器 43
2.3　生命周期 52
2.3.1 生命周期概述 52
2.3.2 組件實例創建 54
2.3.3 組件實例掛載 55
2.3.4 狀態更新 57
2.3.5 組件實例卸載 59
習題2 61
第3章 Vue模板應用 63
3.1　模板基礎 63
3.1.1 文本插值 63
3.1.2 插入HTML代碼 65
3.1.3 綁定HTML屬性 67
3.1.4 使用JavaScript表達式 69
3.1.5 使用Vue指令 72
3.2　綁定類與樣式 74
3.2.1 綁定樣式類 75
3.2.2 綁定內聯樣式 80
3.3　條件渲染 83
3.3.1 使用v-if指令實現條件渲染 83
3.3.2 在template元素上使用v-if指令 85
3.3.3 使用v-show指令實現條件渲染 87
3.4　列表渲染 89
3.4.1 使用v-for指令遍歷數組 89
3.4.2 使用v-for指令遍歷對象 91
3.4.3 在v-for指令中使用範圍值 93
3.4.4 在template元素上使用v-for指令 95
3.4.5 通過key屬性管理狀態 97
3.4.6 數組更新偵測 99
習題3 102
第4章 Vue事件處理 104
4.1　標準DOM事件模型 104
4.1.1 DOM事件模型 104
4.1.2 事件對象 107
4.2　監聽事件 109
4.2.1 內聯事件處理器 109
4.2.2 方法事件處理器 112
4.2.3 在內聯事件處理器中調用方法 114
4.3　v-on指令修飾符 116
4.3.1 事件修飾符 116
4.3.2 按鍵修飾符 122
4.3.3 鼠標修飾符 125
習題4 125
第5章 Vue表單綁定 127
5.1　v-model指令的基本用法 127
5.1.1 綁定文本框 127
5.1.2 綁定多行文本域 129
5.1.3 綁定單選按鈕 131
5.1.4 綁定復選框 133
5.1.5 綁定列表框 135
5.2　綁定動態值 138
5.2.1 單選按鈕綁定動態值 138
5.2.2 復選框綁定動態值 140
5.2.3 列表框綁定動態值 141
5.3　使用修飾符 143
5.3.1 .lazy修飾符 143
5.3.2 .number修飾符 145
5.3.3 .trim修飾符 146
習題5 148
第6章 Vue組件應用 149
6.1　創建和使用組件 149
6.1.1 定義組件 149
6.1.2 註冊組件 150
6.1.3 引用組件 152
6.2　向組件傳遞數據 156
6.2.1 聲明props選項 156
6.2.2 傳遞prop的細節 160
6.2.3 單向數據流 164
6.2.4 props校驗 166
6.2.5 布爾類型轉換 170
6.3　處理組件事件 171
6.3.1 觸發與監聽事件 171
6.3.2 處理事件參數 174
6.3.3 聲明事件 176
6.3.4 校驗事件 177
6.4　組件雙向綁定 178
6.4.1 在組件上使用v-model指令 178
6.4.2 設置v-model指令的參數 182
6.4.3 多個v-model指令綁定 184
6.4.4 創建v-model指令修飾符 186
6.5　透傳屬性 188
6.5.1 單根節點屬性繼承 188
6.5.2 多根節點屬性繼承 189
6.5.3 禁用屬性繼承 189
6.6　內容分發 190
6.6.1 單個插槽 190
6.6.2 具名插槽 192
6.6.3 作用域插槽 195
6.7　依賴註入 200
6.7.1 提供數據 200
6.7.2 註入數據 201
6.7.3 響應性鏈接 205
6.8　單文件組件 207
6.8.1 語法定義 207
6.8.2 單文件組件的優點 209
6.8.3 工具鏈 209
習題6 210
第7章 組合式API 212
7.1　setup鉤子 212
7.1.1 基本用法 212
7.1.2 訪問props選項 214
7.1.3 setup上下文對象 216
7.1.4 返回渲染函數 219
7.1.5 ＜script setup＞語法糖 222
7.2　響應式API 224
7.2.1 響應式狀態 224
7.2.2 計算屬性 226
7.2.3 監聽器 227
7.2.4 處理事件 232
7.2.5 使用組件 234
7.2.6 組件通信 236
7.2.7 暴露組件屬性 239
7.3　生命周期鉤子 241
7.3.1 生命周期鉤子概述 242
7.3.2 組件實例掛載 242
7.3.3 狀態更新 244
7.4　依賴註入 245
7.4.1 提供數據 246
7.4.2 註入數據 246
習題7 249
第8章 Vue路由管理 251
8.1　初識Vue Router 251
8.1.1 在HTML頁面中使用Vue Router 251
8.1.2 在模塊化開發中使用Vue Router 254
8.2　通過路由傳遞數據 257
8.2.1 路由對象 257
8.2.2 params傳參 260
8.2.3 query傳參 261
8.2.4 props傳參 263
8.2.5 響應參數變化 265
8.3　路由匹配語法 268
8.3.1 使用正則表達式 268
8.3.2 設置可重復參數 269
8.3.3 設置可選參數 269
8.4　嵌套路由與命名路由 269
8.4.1 嵌套路由 270
8.4.2 命名路由 273
8.5　編程式導航 275
8.5.1 push()方法 275
8.5.2 replace()方法 276
8.5.3 go()方法 276
8.6　命名視圖 279
8.6.1 基本用法 279
8.6.2 嵌套的命名視圖 281
8.7　重定向和別名 283
8.7.1 路由重定向 284
8.7.2 設置路由別名 284
8.8　路由的歷史模式 285
8.8.1 hash模式 285
8.8.2 HTML5模式 286
8.9　導航守衛 286
8.9.1 全局守衛 286
8.9.2 路由守衛 292
8.9.3 組件守衛 293
習題8 296
第9章 Vue網絡請求 298
9.1　Axios基本用法 298
9.1.1 Axios簡介 298
9.1.2 Axios開發環境搭建 300
9.1.3 GET請求 301
9.1.4 POST請求 304
9.1.5 並發請求 307
9.2　Axios API 309
9.2.1 Axios的使用方式 309
9.2.2 請求配置 313
9.2.3 響應結構 316
9.2.4 錯誤處理 318
9.2.5 默認配置 320
9.2.6 設置攔截器 321
習題9 324
第10章 Vue狀態管理 326
10.1　Pinia使用基礎 326
10.1.1 安裝Pinia 326
10.1.2 基本用法 327
10.2　創建store 329
10.2.1 定義store 329
10.2.2 兩種語法風格 330
10.2.3 使用store 331
10.3　管理state 333
10.3.1 定義state 333
10.3.2 更改state 335
10.3.3 訂閱state 338
10.4　管理getter 341
10.4.1 定義getter 341
10.4.2 訪問getter 343
10.4.3 向getter傳遞參數 345
10.5　管理action 347
10.5.1 定義action 347
10.5.2 訂閱action 350
10.6　Pinia持久化存儲 352
10.6.1 安裝持久化插件 352
10.6.2 實現持久化存儲 352
10.6.3 配置持久化存儲 353
習題10 357