循序漸進 Vue.js 3 前端開發實戰

張益琿，從業7年，多年移動與前端開發經驗，曾就職於國內知名電商網站，從事移動端應用程序的業務開發與性能優化工作，目前在國內知名社交產品公司從事IM系統的架構設計工作。對移動跨平台開發、前端開發、React Native和Flutter跨平台開發及JavaScript前端開發都擁有豐富的經驗。已出版多部編程著作。開源中國特邀技術專家，發表相關技術博客400餘篇，訪問量100萬餘次。

1章  從前端基礎到Vue.js 3 1
1.1  前端技術演進 2
1.2  HTML入門 3
1.2.1  準備開發工具 3
1.2.2  HTML中的基礎標籤 5
1.3  CSS入門 8
1.3.1  CSS選擇器入門 8
1.3.2  CSS樣式入門 11
1.4  JavaScript入門 14
1.4.1  為什麼需要JavaScript 14
1.4.2  JavaScript語法簡介 16
1.5  漸進式開發框架Vue 18
1.5.1  一個Vue應用 18
1.5.2  範例：實現一個簡單的用戶登錄頁面 19
1.5.3  Vue 3的新特性 21
1.5.4  為什麼要使用Vue框架 22
1.6  小結與練習 23
2章  Vue模板應用 24
2.1  模板基礎 25
2.1.1  模板插值 25
2.1.2  模板指令 28
2.2  條 件 渲 染 29
2.2.1  使用v-if指令進行條件渲染 30
2.2.2  使用v-show指令進行條件渲染 32
2.3  循 環 渲 染 33
2.3.1  v-for指令的使用方法 33
2.3.2  v-for指令的高級用法 36
2.4  範例：實現待辦任務列表應用 37
2.4.1  步驟一：使用HTML搭建應用框架結構 37
2.4.2  步驟二：實現待辦任務列表的邏輯開發 38
2.5  小結與練習 40
3章  Vue組件的屬性和方法 41
3.1  屬性與方法基礎 41
3.1.1  屬性基礎 42
3.1.2  方法基礎 42
3.2  計算屬性和偵聽器 43
3.2.1  計算屬性 43
3.2.2  使用計算屬性還是函數 44
3.2.3  計算屬性的賦值 45
3.2.4  屬性偵聽器 46
3.3  進行函數限流 47
3.3.1  手動實現一個簡易的限流函數 48
3.3.2  使用Lodash庫進行函數限流 49
3.4  表單數據的雙向綁定 50
3.4.1  文本輸入框 50
3.4.2  多行文本輸入區域 51
3.4.3  複選框與單選框 51
3.4.4  選擇列表 52
3.4.5  兩個常用的修飾符 53
3.5  樣 式 綁 定 53
3.5.1  為HTML標籤綁定Class屬性 53
3.5.2  綁定內聯樣式 55
3.6  範例：實現一個功能完整的用戶註冊頁面 56
3.6.1  步驟一：搭建用戶註冊頁面 56
3.6.2  步驟二：實現註冊頁面的用戶交互 59
3.7  小結與練習 61
4章  處理用戶交互 63
4.1  事件的監聽與處理 63
4.1.1  事件監聽示例 63
4.1.2  多事件處理 65
4.1.3  事件修飾符 65
4.2  Vue中的事件類型 68
4.2.1  常用事件類型 68
4.2.2  按鍵修飾符 70
4.3  範例1：隨鼠標移動的小球 72
4.4  範例2：彈球遊戲 74
4.5  小結與練習 77
5章  組件基礎 78
5.1  關於Vue應用與組件 78
5.1.1  Vue應用的數據配置選項 79
5.1.2  定義組件 80
5.2  組件中的數據與事件的傳遞 81
5.2.1  為組件添加外部屬性 82
5.2.2  處理組件事件 83
5.2.3  在組件上使用v-model指令 84
5.3  自定義組件的插槽 86
5.3.1  組件插槽的基本用法 87
5.3.2  多具名插槽的用法 88
5.4  動態組件的簡單應用 90
5.5  範例：開發一款小巧的開關按鈕組件 91
5.6  小結與練習 94
6章  組件進階 95
6.1  組件的生命週期與高級配置 95
6.1.1  生命週期方法 96
6.1.2  應用的全局配置選項 99
6.1.3  組件的註冊方式 100
6.2  組件Props屬性的高級用法 101
6.2.1  對Prop屬性進行驗證 101
6.2.2  Props的只讀性質 104
6.2.3  組件數據注入 105
6.3  組件Miin技術 108
6.3.1  使用Miin來定義組件 108
6.3.2  Miin選項的合併 110
6.3.3  進行全局Miin 111
6.4  使用自定義指令 111
6.4.1  認識自定義指令 112
6.4.2  自定義指令的參數 113
6.5  使用組件的Teleport功能開發全局彈窗 113
6.6  小結與練習 116
7章  Vue響應式編程 117
7.1  響應式編程的原理及在Vue中的應用 117
7.1.1  手動追踪變量的變化 118
7.1.2  Vue中的響應式對象 120
7.1.3  獨立的響應式值Ref的應用 121
7.2  響應式的計算與監聽 123
7.2.1  關於計算變量 124
7.2.2  監聽響應式變量 125
7.3  組合式API的應用 127
7.3.1  關於setup方法 127
7.3.2  在setup方法中定義生命週期行為 129
7.4  範例：實現支持搜索和篩選的用戶列表 130
7.4.1  常規風格的示例工程開發 130
7.4.2  使用組合式API重構用戶列表頁面 133
7.5  小結與練習 136
8章  動畫 137
8.1  使用CSS3創建動畫 137
8.1.1  transition過渡動畫 138
8.1.2  keyframes動畫 139
8.2  使用JavaScript的方式實現動畫效果 141
8.3  Vue過渡動畫 142
8.3.1  定義過渡動畫 142
8.3.2  設置動畫過程中的監聽回調 146
8.3.3  多個組件的過渡動畫 147
8.3.4  列表過渡動畫 149
8.4  範例：優化用戶列表頁面 150
8.5  小結與練習 152
9章  構建工具Vue CLI的使用 153
9.1  Vue CLI工具入門 153
9.1.1  Vue CLI的安裝 154
9.1.2  快速創建項目 155
9.2  Vue CLI項目模板工程 157
9.2.1  模板工程的目錄結構 157
9.2.2  運行Vue項目工程 161
9.3  在項目中使用依賴 162
9.4  工程構建 164
9.5  新一代前端構建工具Vite 165
9.5.1  Vite與Vue CLI的比較 165
9.5.2  體驗Vite構建工具 165
9.6  小結與練習 167
10章  基於Vue 3的UI組件庫——Element Plus 168
10.1  Element Plus入門 168
10.1.1  Element Plus的安裝與使用 169
10.1.2  按鈕組件 171
10.1.3  標籤組件 173
10.1.4  空態圖與加載佔位圖組件 176
10.1.5  圖片與頭像組件 179
10.2  表單類組件 180
10.2.1  單選框與復選框 181
10.2.2  標準輸入框組件 182
10.2.3  帶推薦列表的輸入框組件 184
10.2.4  數字輸入框 186
10.2.5  選擇列表 187
10.2.6  多級列表組件 190
10.3  開關與滑塊組件 193
10.3.1  開關組件 193
10.3.2  滑塊組件 194
10.4  選擇器組件 196
10.4.1  時間選擇器 197
10.4.2  日期選擇器 198
10.4.3  顏色選擇器 200
10.5  提示類組件 201
10.5.1  警告組件 201
10.5.2  消息提示 202
10.5.3  通知組件 204
10.6  數據承載相關組件 205
10.6.1  表格組件 205
10.6.2  導航菜單組件 208
10.6.3  標籤頁組件 210
10.6.4  抽屜組件 211
10.6.5  佈局容器組件 212
10.7  實戰：實現一個教務系統學生列表頁面 214
10.8  小結與練習 217
11章  基於Vue的網絡框架——vue-aios的應用 219
11.1  使用vue-aios請求天氣數據 219
11.1.1  使用互聯網上免費的數據服務 219
11.1.2  使用vue-aios進行數據請求 222
11.2  vue-aios實用功能介紹 224
11.2.1  通過配置的方式進行數據請求 224
11.2.2  請求的配置與響應數據結構 225
11.2.3  攔截器的使用 226
11.3  範例：實現一個天氣預報應用 227
11.3.1  搭建頁面框架 227
11.3.2  實現天氣預報應用的核心邏輯 229
11.4  小結與練習 231
12章  Vue路由管理 232
12.1  Vue Router的安裝與簡單使用 232
12.1.1  Vue Router的安裝 233
12.1.2  一個簡單的Vue Router使用示例 233
12.2  帶參數的動態路由 235
12.2.1  路由參數匹配 235
12.2.2  路由匹配的語法規則 237
12.2.3  路由的嵌套 239
12.3  頁面導航 240
12.3.1  使用路由方法 240
12.3.2  導航歷史控制 242
12.4  關於路由的命名 242
12.4.1  使用名稱進行路由切換 243
12.4.2  路由視圖命名 243
12.4.3  使用別名 245
12.4.4  路由重定向 245
12.5  關於路由傳參 246
12.6  路由導航守衛 247
12.6.1  定義全局的導航守衛 248
12.6.2  為特定的路由註冊導航守衛 249
12.7  動態路由 250
12.8  小結與練習 252
13章  Vue狀態管理 253
13.1  認識Vue框架 253
13.1.1  關於狀態管理 254
13.1.2  安裝與體驗Vue 255
13.2  Vue中的一些核心概念 258
13.2.1  Vue中的狀態state 258
13.2.2  Vue中的Getter方法 260
13.2.3  Vue中的Mutation 261
13.2.4  Vue中的Action 262
13.2.5  Vue中的Module 263
13.3  小結與練習 266
14章  項目演練一：開發一個文檔學習網站 267
14.1  網站框架的搭建 267
14.2  配置專題與文章目錄 272
14.3  渲染文章筆記內容 274
14.4  小結與練習 278
15章  項目演練二：電商後台管理系統實戰 279
15.1  用戶登錄模塊開發 279
15.1.1  項目搭建 279
15.1.2  用戶登錄頁面的開發 282
15.2  項目主頁搭建 285
15.2.1  主頁框架搭建 285
15.2.2  完善註銷功能 288
15.3  訂單管理模塊的開發 289
15.3.1  使用Mock.js進行模擬數據的生成 289
15.3.2  編寫工具類與全局樣式 290
15.3.3  完善訂單管理頁面 291
15.4  商品管理模塊的開發 297
15.4.1  商品管理列表頁的開發 297
15.4.2  新建商品的基礎配置 302
15.4.3  新建商品的價格和庫存配置 305
15.4.4  新建商品的詳情設置 308
15.4.5  添加商品分類 310
15.5  店長管理模塊的開發 312
15.5.1  店長列表的開發 312
15.5.2  店長審批列表與店長訂單 315
15.6  財務管理與數據統計功能模塊開發 316
15.6.1  交易明細與財務對賬單 316
15.6.2  數據統計模塊的開發 317
15.7  小結與練習 322