循序漸進(jìn)Vue.js 3.x前端開發(fā)實戰(zhàn)

目    錄
第1章　從前端基礎(chǔ)到Vue.js 31
1.1  前端技術(shù)演進(jìn)1
1.2  HTML入門2
1.2.1  準(zhǔn)備開發(fā)工具3
1.2.2  HTML中的基礎(chǔ)標(biāo)簽5
1.3  CSS入門7
1.3.1  CSS選擇器入門8
1.3.2  CSS樣式入門10
1.4  JavaScript入門13
1.4.1  為什么需要JavaScript13
1.4.2  JavaScript語法簡介15
1.5  漸進(jìn)式開發(fā)框架Vue17
1.5.1  第一個Vue應(yīng)用17
1.5.2  范例演練：實現(xiàn)一個簡單的用戶登錄頁面19
1.5.3  Vue 3的新特性21
1.5.4  為什么要使用Vue框架22
1.6  小結(jié)與練習(xí)23
第2章　Vue模板應(yīng)用24
2.1  模板基礎(chǔ)24
2.1.1  模板插值25
2.1.2  模板指令28
2.2  條件渲染29
2.2.1  使用v-if指令進(jìn)行條件渲染30
2.2.2  使用v-show指令進(jìn)行條件渲染32
2.3  循環(huán)渲染33
2.3.1  v-for指令的使用方法33
2.3.2  v-for指令的高級用法36
2.4  范例演練：實現(xiàn)待辦任務(wù)列表應(yīng)用38
2.4.1  步驟一：使用HTML搭建應(yīng)用框架結(jié)構(gòu)38
2.4.2  步驟二：實現(xiàn)待辦任務(wù)列表的邏輯開發(fā)39
2.5  小結(jié)與練習(xí)40
第3章　Vue組件的屬性和方法41
3.1  屬性與方法基礎(chǔ)41
3.1.1  屬性基礎(chǔ)42
3.1.2  方法基礎(chǔ)42
3.2  計算屬性和偵聽器43
3.2.1  計算屬性43
3.2.2  使用計算屬性還是函數(shù)44
3.2.3  計算屬性的賦值45
3.2.4  屬性偵聽器46
3.3  進(jìn)行函數(shù)限流48
3.3.1  手動實現(xiàn)一個簡易的限流函數(shù)48
3.3.2  使用Lodash庫進(jìn)行函數(shù)限流50
3.4  表單數(shù)據(jù)的雙向綁定50
3.4.1  文本輸入框50
3.4.2  多行文本輸入?yún)^(qū)域51
3.4.3  復(fù)選框與單選框52
3.4.4  選擇列表53
3.4.5  兩個常用的修飾符53
3.5  樣式綁定54
3.5.1  為HTML標(biāo)簽綁定class屬性54
3.5.2  綁定內(nèi)聯(lián)樣式56
3.6  范例演練：實現(xiàn)一個功能完整的用戶注冊頁面57
3.6.1  步驟一：搭建用戶注冊頁面57
3.6.2  步驟二：實現(xiàn)注冊頁面的用戶交互60
3.7  小結(jié)與練習(xí)62
第4章　處理用戶交互63
4.1  事件的監(jiān)聽與處理63
4.1.1  事件監(jiān)聽示例63
4.1.2  多事件處理65
4.1.3  事件修飾符66
4.2  Vue中的事件類型68
4.2.1  常用事件類型68
4.2.2  按鍵修飾符70
4.3  范例演練：隨鼠標(biāo)移動的小球72
4.4  范例演練：彈球游戲74
4.5  小結(jié)與練習(xí)77
第5章　組件基礎(chǔ)79
5.1  Vue應(yīng)用與組件79
5.1.1  Vue應(yīng)用的數(shù)據(jù)配置選項79
5.1.2  定義組件81
5.2  組件中數(shù)據(jù)與事件的傳遞82
5.2.1  為組件添加外部屬性83
5.2.2  處理組件事件84
5.2.3  在組件上使用v-model指令85
5.3  自定義組件的插槽88
5.3.1  組件插槽的基本用法88
5.3.2  多具名插槽的用法90
5.4  動態(tài)組件的簡單應(yīng)用91
5.5  范例演練：開發(fā)一款小巧的開關(guān)按鈕組件93
5.6  小結(jié)與練習(xí)95
第6章　組件進(jìn)階97
6.1  組件的生命周期與高級配置97
6.1.1  生命周期方法98
6.1.2  應(yīng)用的全局配置選項101
6.1.3  組件的注冊方式102
6.2  組件props屬性的高級用法103
6.2.1  對props屬性進(jìn)行驗證103
6.2.2  props的只讀性質(zhì)106
6.2.3  組件數(shù)據(jù)注入107
6.3  組件Mixin技術(shù)110
6.3.1  使用Mixin來定義組件110
6.3.2  Mixin選項的合并112
6.3.3  進(jìn)行全局Mixin113
6.4  使用自定義指令114
6.4.1  認(rèn)識自定義指令114
6.4.2  自定義指令的參數(shù)115
6.5  組件的Teleport功能116
6.6  小結(jié)與練習(xí)118
第7章　Vue響應(yīng)式編程119
7.1  響應(yīng)式編程的原理與在Vue中的應(yīng)用119
7.1.1  手動追蹤變量的變化119
7.1.2  Vue中的響應(yīng)式對象122
7.1.3  獨立的響應(yīng)式值Ref的應(yīng)用124
7.2  響應(yīng)式的計算與監(jiān)聽126
7.2.1  關(guān)于計算變量126
7.2.2  監(jiān)聽響應(yīng)式變量128
7.3  組合式API的應(yīng)用130
7.3.1  關(guān)于setup方法130
7.3.2  在setup方法中定義生命周期行為132
7.4  范例演練：實現(xiàn)支持搜索和篩選的用戶列表133
7.4.1  常規(guī)風(fēng)格的示例工程開發(fā)133
7.4.2  使用組合式API重構(gòu)用戶列表頁面136
7.5  小結(jié)與練習(xí)139
第8章　動畫140
8.1  使用CSS3創(chuàng)建動畫140
8.1.1  transition過渡動畫140
8.1.2  keyframes動畫142
8.2  使用JavaScript的方式實現(xiàn)動畫效果144
8.3  Vue過渡動畫145
8.3.1  定義過渡動畫145
8.3.2  設(shè)置動畫過程中的監(jiān)聽回調(diào)149
8.3.3  多個組件的過渡動畫150
8.3.4  列表過渡動畫152
8.4  范例演練：優(yōu)化用戶列表頁面154
8.5  小結(jié)與練習(xí)155
第9章　Vue CLI工具的使用156
9.1  Vue CLI工具入門156
9.1.1  Vue CLI工具的安裝156
9.1.2  快速創(chuàng)建項目158
9.2  Vue CLI項目模板工程160
9.2.1  模板工程的目錄結(jié)構(gòu)160
9.2.2  運(yùn)行Vue項目工程164
9.3  在項目中使用依賴165
9.4  工程構(gòu)建167
9.5  新一代前端構(gòu)建工具Vite168
9.5.1  Vite與Vue CLI168
9.5.2  體驗Vite構(gòu)建工具169
9.6  小結(jié)與練習(xí)170
第10章　Element Plus 基于Vue 3的UI組件庫171
10.1  Element Plus入門171
10.1.1  Element Plus的安裝與使用172
10.1.2  按鈕組件174
10.1.3  標(biāo)簽組件177
10.1.4  空態(tài)圖與加載占位圖組件179
10.1.5  圖片與頭像組件183
10.2  表單類組件184
10.2.1  單選框與多選框184
10.2.2  標(biāo)準(zhǔn)輸入框組件186
10.2.3  帶推薦列表的輸入框組件188
10.2.4  數(shù)字輸入框190
10.2.5  選擇列表191
10.2.6  多級列表組件194
10.3  開關(guān)與滑塊組件196
10.3.1  開關(guān)組件196
10.3.2  滑塊組件197
10.4  選擇器組件199
10.4.1  時間選擇器199
10.4.2  日期選擇器201
10.4.3  顏色選擇器202
10.5  提示類組件203
10.5.1  警告組件203
10.5.2  消息提示204
10.5.3  通知組件205
10.6  數(shù)據(jù)承載相關(guān)組件206
10.6.1  表格組件206
10.6.2  導(dǎo)航菜單組件209
10.6.3  標(biāo)簽頁組件211
10.6.4  抽屜組件212
10.6.5  布局容器組件213
10.7  實戰(zhàn)：教務(wù)系統(tǒng)學(xué)生表214
10.8  小結(jié)與練習(xí)218
第11章　基于Vue的網(wǎng)絡(luò)框架vue-axios的應(yīng)用219
11.1  使用vue-axios請求天氣數(shù)據(jù)219
11.1.1  使用互聯(lián)網(wǎng)上免費(fèi)的數(shù)據(jù)服務(wù)219
11.1.2  使用vue-axios進(jìn)行數(shù)據(jù)請求221
11.2  vue-axios實用功能介紹224
11.2.1  通過配置的方式進(jìn)行數(shù)據(jù)請求224
11.2.2  請求的配置與響應(yīng)數(shù)據(jù)結(jié)構(gòu)225
11.2.3  攔截器的使用226
11.3  范例演練：天氣預(yù)報應(yīng)用227
11.3.1  搭建頁面框架227
11.3.2  實現(xiàn)天氣預(yù)報應(yīng)用的核心邏輯230
11.4  小結(jié)與練習(xí)231
第12章　Vue路由管理232
12.1  Vue Router的安裝與簡單使用232
12.1.1  Vue Router的安裝233
12.1.2  一個簡單的Vue Router的使用示例233
12.2  帶參數(shù)的動態(tài)路由235
12.2.1  路由參數(shù)匹配235
12.2.2  路由匹配的語法規(guī)則237
12.2.3  路由的嵌套239
12.3  頁面導(dǎo)航240
12.3.1  使用路由方法240
12.3.2  導(dǎo)航歷史控制242
12.4  關(guān)于路由的命名242
12.4.1  使用名稱進(jìn)行路由切換243
12.4.2  路由視圖命名243
12.4.3  使用別名244
12.4.4  路由重定向245
12.5  關(guān)于路由傳參246
12.6  路由導(dǎo)航守衛(wèi)247
12.6.1  定義全局的導(dǎo)航守衛(wèi)247
12.6.2  為特定的路由注冊導(dǎo)航守衛(wèi)248
12.7  動態(tài)路由250
12.8  小結(jié)與練習(xí)252
第13章　Vue狀態(tài)管理253
13.1  認(rèn)識Vuex框架253
13.1.1  關(guān)于狀態(tài)管理253
13.1.2  安裝與體驗Vuex255
13.2  Vuex中的一些核心概念258
13.2.1  Vuex中的狀態(tài)state258
13.2.2  Vuex中的Getter方法259
13.2.3  Vuex中的Mutation261
13.2.4  Vuex中的Action262
13.2.5  Vuex中的Module263
13.3  小結(jié)與練習(xí)266
第14章　實戰(zhàn)項目：開發(fā)一個學(xué)習(xí)筆記網(wǎng)站267
14.1  網(wǎng)站框架的搭建267
14.2  配置專題與文章目錄272
14.3  渲染文章筆記內(nèi)容275
14.4  小結(jié)與練習(xí)279
第15章　實戰(zhàn)項目：電商后臺管理系統(tǒng)實戰(zhàn)280
15.1  用戶登錄模塊開發(fā)280
15.1.1  項目搭建280
15.1.2  用戶登錄頁面開發(fā)283
15.2  項目主頁搭建286
15.2.1  主頁框架搭建286
15.2.2  完善注銷功能289
15.3  訂單管理模塊開發(fā)290
15.3.1  使用Mock.js進(jìn)行模擬數(shù)據(jù)的生成290
15.3.2  編寫工具類與全局樣式291
15.3.3  完善訂單管理頁面292
15.4  商品管理模塊的開發(fā)298
15.4.1  商品管理列表頁的開發(fā)298
15.4.2  新增商品之基礎(chǔ)配置303
15.4.3  新增商品之價格和庫存配置306
15.4.4  新增商品之詳情設(shè)置309
15.4.5  添加商品分類311
15.5  店長管理模塊的開發(fā)313
15.5.1  店長列表開發(fā)313
15.5.2  店長審批列表與店長訂單316
15.6  財務(wù)管理與數(shù)據(jù)統(tǒng)計功能模塊開發(fā)317
15.6.1  交易明細(xì)與財務(wù)對賬單318
15.6.2  數(shù)據(jù)統(tǒng)計模塊開發(fā)319
15.7  小結(jié)與練習(xí)323