循序漸進Vue.js 3.x前端開發實踐
張益琿
相關主題
商品描述
"《循序漸進Vue.js 3.x前端開發實踐》由一位擁有豐富前端開發經驗的架構師撰寫,旨在通過詳盡的理論知識講解和豐富的實踐練習,幫助初學者深入掌握Vue.js框架,並能夠獨立開發商業級別的Web應用程序。本書分為14章,內容涵蓋Vue.js的基本概念、模板語法、組件使用、用戶交互處理、動畫效果實現、腳手架工具Vite的使用,以及如何利用UI框架Element Plus、網絡請求框架Axios、路由管理框架Vue Router和狀態管理框架Pinia等工具來構建商業級應用。最終章節通過一個完整的電商後台管理系統,對所學的知識進行綜合運用,加深讀者對Vue.js開發流程和技巧的理解,提高項目開發能力。 《循序漸進Vue.js 3.x前端開發實踐》採用官方推薦的組合式API代碼組織方式,所有涉及的工具都使用新版本,每章均配備了動手練習和上機演練指導。此外,為了適應不同層次的讀者,《循序漸進Vue.js 3.x前端開發實踐》提供了完整的代碼導讀手冊和視頻教學資源,使學習更加便捷高效。 《循序漸進Vue.js 3.x前端開發實踐》適合Vue.js前端開發新手和有一定經驗的開發者使用,也很適合作為大中專院校相關課程的教學用書。"
目錄大綱
目 錄
第1章 走進Vue 3的新世界 1
1.1 前端技術演進 1
1.2 Vue框架的前世今生 2
1.2.1 準備開發工具 2
1.2.2 Vue的發展歷史 4
1.2.3 Vue 3.x的新特性 5
1.3 Vue框架初體驗 6
1.3.1 第一個Vue工程 7
1.3.2 動手練習:實現一個簡單的用戶登錄頁面 10
1.3.3 為什麽使用Vue框架 12
1.4 小結與上機演練 12
第2章 Vue模板與應用 15
2.1 模板基礎 15
2.1.1 模板插值 16
2.1.2 模板指令 18
2.2 條件渲染 20
2.2.1 使用v-if指令進行條件渲染 20
2.2.2 使用v-show指令進行條件渲染 23
2.3 循環渲染 24
2.3.1 v-for指令的使用方法 24
2.3.2 v-for指令的高級用法 26
2.4 動手練習:實現待辦任務列表應用 28
2.4.1 步驟一:使用HTML搭建應用框架結構 28
2.4.2 步驟二:實現待辦任務列表的邏輯開發 29
2.5 小結與上機演練 30
第3章 Vue組件的屬性和方法 33
3.1 屬性與方法基礎 33
3.1.1 屬性基礎 34
3.1.2 方法基礎 34
3.2 計算屬性和偵聽器 35
3.2.1 計算屬性 35
3.2.2 使用計算屬性還是函數 36
3.2.3 計算屬性的賦值 37
3.2.4 屬性偵聽器 38
3.3 進行函數限流 40
3.3.1 手動實現一個簡易的限流函數 40
3.3.2 使用Lodash庫進行函數限流防抖 42
3.4 表單數據的雙向綁定 42
3.4.1 文本輸入框 43
3.4.2 多行文本輸入區域 43
3.4.3 復選框與單選框 44
3.4.4 選擇列表 45
3.4.5 3個常用的修飾符 46
3.5 樣式綁定 47
3.5.1 為HTML標簽綁定Class屬性 47
3.5.2 綁定內聯樣式 49
3.6 動手練習:實現一個功能完整的用戶註冊頁面 49
3.6.1 步驟一:搭建用戶註冊頁面 49
3.6.2 步驟二:實現註冊頁面的用戶交互 53
3.7 小結與上機演練 55
第4章 處理用戶交互 58
4.1 事件的監聽與處理 58
4.1.1 事件監聽示例 58
4.1.2 多函數處理事件 60
4.1.3 事件修飾符 60
4.2 Vue中的事件類型 63
4.2.1 常用的事件類型 63
4.2.2 按鍵修飾符 65
4.3 動手練習:編寫一個隨鼠標移動的小球 66
4.4 動手練習:編寫一個彈球游戲 68
4.5 小結與上機演練 72
第5章 組件基礎 75
5.1 關於Vue應用與組件 75
5.1.1 Vue應用的創建 75
5.1.2 定義組件 77
5.2 組件中數據與事件的傳遞 78
5.2.1 為組件添加外部屬性 79
5.2.2 處理組件事件 80
5.2.3 在自定義組件上使用v-model指令 82
5.3 自定義組件的插槽 85
5.3.1 組件插槽的基本用法 85
5.3.2 多具名插槽的用法 86
5.4 動態組件的簡單應用 88
5.5 動手練習:編寫一款小巧的開關按鈕組件 90
5.6 小結與上機演練 92
第6章 組件進階 95
6.1 組件的生命周期與高級配置 95
6.1.1 生命周期方法 95
6.1.2 應用的全局配置選項 99
6.1.3 組件的註冊方式 100
6.2 組件props屬性的高級用法 101
6.2.1 對props屬性進行驗證 101
6.2.2 props的只讀性質 104
6.2.3 組件數據註入 105
6.3 組件Mixin技術 108
6.3.1 使用Mixin來定義組件 108
6.3.2 Mixin選項的合並 110
6.3.3 進行全局Mixin 111
6.4 使用自定義指令 112
6.4.1 認識自定義指令 112
6.4.2 自定義指令的參數 113
6.5 組件的Teleport功能 114
6.6 小結與上機演練 116
第7章 Vue響應式編程 120
7.1 響應式編程原理與在Vue中的應用 120
7.1.1 手動追蹤變量的變化 120
7.1.2 Vue中的響應式對象 123
7.1.3 獨立的響應式值Ref的應用 124
7.2 組合式API與選項式API 126
7.2.1 關於setup方法 127
7.2.2 在setup方法中定義生命周期行為 128
7.3 動手練習:實現支持搜索和篩選的用戶列表 129
7.3.1 常規風格的示例工程開發 129
7.3.2 使用組合式API重構用戶列表頁面 133
7.4 小結與上機演練 135
第8章 動畫 138
8.1 使用CSS3創建動畫 138
8.1.1 transition過渡動畫 138
8.1.2 keyframes動畫 140
8.2 使用JavaScript方式實現動畫效果 142
8.3 Vue過渡動畫 143
8.3.1 定義過渡動畫 143
8.3.2 設置動畫過程中的監聽回調 147
8.3.3 多個組件的過渡動畫 148
8.3.4 列表過渡動畫 150
8.4 動手練習:優化用戶列表頁面 151
8.5 小結與上機演練 153
第9章 Vue腳手架Vite工具的使用 156
9.1 Vite工具入門 156
9.1.1 使用Vite工具 156
9.1.2 Vite工程結構解析 158
9.2 運行Vite項目 160
9.2.1 模板工程的結構 160
9.2.2 運行Vite項目工程 163
9.3 使用依賴與工程構建 164
9.4 Vite與Vue CLI 165
9.4.1 Vite與Vue CLI 165
9.4.2 體驗Vue CLI構建工具 165
9.5 小結與上機演練 169
第10章 基於Vue 3的UI組件庫Element Plus 171
10.1 Element Plus入門 171
10.1.1 Element Plus的安裝與使用 171
10.1.2 按鈕組件 175
10.1.3 標簽組件 177
10.1.4 空態圖與加載占位圖組件 179
10.1.5 圖片與頭像組件 183
10.2 表單類組件 184
10.2.1 單選框與多選框 184
10.2.2 標準輸入框組件 186
10.2.3 帶推薦列表的輸入框組件 188
10.2.4 數字輸入框 190
10.2.5 選擇列表 191
10.2.6 多級列表組件 194
10.3 開關與滑塊組件 196
10.3.1 開關組件 196
10.3.2 滑塊組件 198
10.4 選擇器組件 200
10.4.1 時間選擇器 200
10.4.2 日期選擇器 202
10.4.3 顏色選擇器 203
10.5 提示類組件 204
10.5.1 警告組件 205
10.5.2 消息提示 206
10.5.3 通知組件 208
10.6 數據承載相關組件 209
10.6.1 表格組件 209
10.6.2 導航菜單組件 212
10.6.3 標簽頁組件 214
10.6.4 抽屜組件 215
10.6.5 佈局容器組件 216
10.7 動手練習:教務系統學生表 217
10.8 小結與上機演練 221
第11章 基於Vue的網絡框架Axios的應用 224
11.1 使用vue-axios請求天氣數據 224
11.1.1 使用互聯網上免費的數據服務 224
11.1.2 使用vue-axios進行數據請求 227
11.2 Axios實用功能介紹 230
11.2.1 通過配置的方式進行數據請求 230
11.2.2 請求的配置與響應數據結構 231
11.2.3 攔截器的使用 232
11.3 動手練習:天氣預報應用 233
11.4 小結與上機演練 237
第12章 Vue路由管理 239
12.1 Vue Router的安裝與簡單使用 239
12.1.1 Vue Router的安裝 240
12.1.2 一個簡單的Vue Router的使用示例 240
12.2 帶參數的動態路由 242
12.2.1 路由參數匹配 242
12.2.2 路由匹配的語法規則 244
12.2.3 路由的嵌套 245
12.3 頁面導航 247
12.3.1 使用路由方法 247
12.3.2 導航歷史控制 248
12.4 關於路由的命名 249
12.4.1 使用名稱進行路由切換 249
12.4.2 路由視圖命名 249
12.4.3 使用別名 251
12.4.4 路由重定向 252
12.5 關於路由傳參 252
12.6 路由導航守衛 254
12.6.1 定義全局的導航守衛 254
12.6.2 為特定的路由註冊導航守衛 255
12.7 動態路由 256
12.8 動手練習:實現一個多頁面單頁應用程序 258
12.9 小結與上機演練 260
第13章 Vue狀態管理 264
13.1 瞭解Pinia框架的精髓 264
13.1.1 理解狀態管理 265
13.1.2 安裝與體驗Pinia 266
13.2 Pinia中的一些核心概念 269
13.2.1 Pinia中的Store 269
13.2.2 Pinia中的State 270
13.2.3 Pinia中的Getters 271
13.2.4 Pinia中的Actions 272
13.3 Pinia插件 273
13.3.1 插件使用示例 273
13.3.2 使用插件擴展Store 274
13.4 動手練習:創建一個簡單的圖書管理系統 275
13.5 小結與上機演練 278
第14章 商業項目:電商後台管理系統實戰 281
14.1 用戶登錄模塊開發 281
14.1.1 項目搭建 281
14.1.2 用戶登錄頁面開發 284
14.2 電商後台管理系統主頁搭建 287
14.2.1 主頁框架搭建 287
14.2.2 完善註銷功能 290
14.3 訂單管理模塊的開發 291
14.3.1 使用Mock.js進行模擬數據的生成 291
14.3.2 編寫工具類與全局樣式 292
14.3.3 完善訂單管理頁面 293
14.4 商品管理模塊的開發 299
14.4.1 商品管理列表頁的開發 299
14.4.2 新建商品之基礎配置 305
14.4.3 新建商品之價格和庫存配置 308
14.4.4 新建商品之詳情設置 310
14.4.5 添加商品分類 312
14.5 店長管理模塊的開發 314
14.5.1 店長列表開發 314
14.5.2 店長審批列表與店長訂單 317
14.6 財務管理與數據統計功能模塊開發 318
14.6.1 交易明細與財務對賬單 318
14.6.2 數據統計模塊開發 319
14.7 小結與上機演練 324