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

目    錄
第1章　從前端基礎(chǔ)到Vue.js 31
1.1  前端技術(shù)演進(jìn)1
1.2  HTML入門(mén)2
1.2.1  準(zhǔn)備開(kāi)發(fā)工具3
1.2.2  HTML中的基礎(chǔ)標(biāo)簽5
1.3  CSS入門(mén)7
1.3.1  CSS選擇器入門(mén)8
1.3.2  CSS樣式入門(mén)10
1.4  JavaScript入門(mén)13
1.4.1  為什么需要JavaScript13
1.4.2  JavaScript語(yǔ)法簡(jiǎn)介15
1.5  漸進(jìn)式開(kāi)發(fā)框架Vue17
1.5.1  第一個(gè)Vue應(yīng)用17
1.5.2  范例演練：實(shí)現(xiàn)一個(gè)簡(jiǎn)單的用戶登錄頁(yè)面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指令的高級(jí)用法36
2.4  范例演練：實(shí)現(xiàn)待辦任務(wù)列表應(yīng)用38
2.4.1  步驟一：使用HTML搭建應(yīng)用框架結(jié)構(gòu)38
2.4.2  步驟二：實(shí)現(xiàn)待辦任務(wù)列表的邏輯開(kāi)發(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  計(jì)算屬性和偵聽(tīng)器43
3.2.1  計(jì)算屬性43
3.2.2  使用計(jì)算屬性還是函數(shù)44
3.2.3  計(jì)算屬性的賦值45
3.2.4  屬性偵聽(tīng)器46
3.3  進(jìn)行函數(shù)限流48
3.3.1  手動(dòng)實(shí)現(xiàn)一個(gè)簡(jiǎn)易的限流函數(shù)48
3.3.2  使用Lodash庫(kù)進(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  兩個(gè)常用的修飾符53
3.5  樣式綁定54
3.5.1  為HTML標(biāo)簽綁定class屬性54
3.5.2  綁定內(nèi)聯(lián)樣式56
3.6  范例演練：實(shí)現(xiàn)一個(gè)功能完整的用戶注冊(cè)頁(yè)面57
3.6.1  步驟一：搭建用戶注冊(cè)頁(yè)面57
3.6.2  步驟二：實(shí)現(xiàn)注冊(cè)頁(yè)面的用戶交互60
3.7  小結(jié)與練習(xí)62
第4章　處理用戶交互63
4.1  事件的監(jiān)聽(tīng)與處理63
4.1.1  事件監(jiān)聽(tīng)示例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)移動(dòng)的小球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ù)配置選項(xiàng)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  動(dòng)態(tài)組件的簡(jiǎn)單應(yīng)用91
5.5  范例演練：開(kāi)發(fā)一款小巧的開(kāi)關(guān)按鈕組件93
5.6  小結(jié)與練習(xí)95
第6章　組件進(jìn)階97
6.1  組件的生命周期與高級(jí)配置97
6.1.1  生命周期方法98
6.1.2  應(yīng)用的全局配置選項(xiàng)101
6.1.3  組件的注冊(cè)方式102
6.2  組件props屬性的高級(jí)用法103
6.2.1  對(duì)props屬性進(jìn)行驗(yàn)證103
6.2.2  props的只讀性質(zhì)106
6.2.3  組件數(shù)據(jù)注入107
6.3  組件Mixin技術(shù)110
6.3.1  使用Mixin來(lái)定義組件110
6.3.2  Mixin選項(xiàng)的合并112
6.3.3  進(jìn)行全局Mixin113
6.4  使用自定義指令114
6.4.1  認(rèn)識(shí)自定義指令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  手動(dòng)追蹤變量的變化119
7.1.2  Vue中的響應(yīng)式對(duì)象122
7.1.3  獨(dú)立的響應(yīng)式值Ref的應(yīng)用124
7.2  響應(yīng)式的計(jì)算與監(jiān)聽(tīng)126
7.2.1  關(guān)于計(jì)算變量126
7.2.2  監(jiān)聽(tīng)響應(yīng)式變量128
7.3  組合式API的應(yīng)用130
7.3.1  關(guān)于setup方法130
7.3.2  在setup方法中定義生命周期行為132
7.4  范例演練：實(shí)現(xiàn)支持搜索和篩選的用戶列表133
7.4.1  常規(guī)風(fēng)格的示例工程開(kāi)發(fā)133
7.4.2  使用組合式API重構(gòu)用戶列表頁(yè)面136
7.5  小結(jié)與練習(xí)139
第8章　動(dòng)畫(huà)140
8.1  使用CSS3創(chuàng)建動(dòng)畫(huà)140
8.1.1  transition過(guò)渡動(dòng)畫(huà)140
8.1.2  keyframes動(dòng)畫(huà)142
8.2  使用JavaScript的方式實(shí)現(xiàn)動(dòng)畫(huà)效果144
8.3  Vue過(guò)渡動(dòng)畫(huà)145
8.3.1  定義過(guò)渡動(dòng)畫(huà)145
8.3.2  設(shè)置動(dòng)畫(huà)過(guò)程中的監(jiān)聽(tīng)回調(diào)149
8.3.3  多個(gè)組件的過(guò)渡動(dòng)畫(huà)150
8.3.4  列表過(guò)渡動(dòng)畫(huà)152
8.4  范例演練：優(yōu)化用戶列表頁(yè)面154
8.5  小結(jié)與練習(xí)155
第9章　Vue CLI工具的使用156
9.1  Vue CLI工具入門(mén)156
9.1.1  Vue CLI工具的安裝156
9.1.2  快速創(chuàng)建項(xiàng)目158
9.2  Vue CLI項(xiàng)目模板工程160
9.2.1  模板工程的目錄結(jié)構(gòu)160
9.2.2  運(yùn)行Vue項(xiàng)目工程164
9.3  在項(xiàng)目中使用依賴165
9.4  工程構(gòu)建167
9.5  新一代前端構(gòu)建工具Vite168
9.5.1  Vite與Vue CLI168
9.5.2  體驗(yàn)Vite構(gòu)建工具169
9.6  小結(jié)與練習(xí)170
第10章　Element Plus 基于Vue 3的UI組件庫(kù)171
10.1  Element Plus入門(mén)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  多級(jí)列表組件194
10.3  開(kāi)關(guān)與滑塊組件196
10.3.1  開(kāi)關(guān)組件196
10.3.2  滑塊組件197
10.4  選擇器組件199
10.4.1  時(shí)間選擇器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)簽頁(yè)組件211
10.6.4  抽屜組件212
10.6.5  布局容器組件213
10.7  實(shí)戰(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請(qǐng)求天氣數(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ù)請(qǐng)求221
11.2  vue-axios實(shí)用功能介紹224
11.2.1  通過(guò)配置的方式進(jìn)行數(shù)據(jù)請(qǐng)求224
11.2.2  請(qǐng)求的配置與響應(yīng)數(shù)據(jù)結(jié)構(gòu)225
11.2.3  攔截器的使用226
11.3  范例演練：天氣預(yù)報(bào)應(yīng)用227
11.3.1  搭建頁(yè)面框架227
11.3.2  實(shí)現(xiàn)天氣預(yù)報(bào)應(yīng)用的核心邏輯230
11.4  小結(jié)與練習(xí)231
第12章　Vue路由管理232
12.1  Vue Router的安裝與簡(jiǎn)單使用232
12.1.1  Vue Router的安裝233
12.1.2  一個(gè)簡(jiǎn)單的Vue Router的使用示例233
12.2  帶參數(shù)的動(dòng)態(tài)路由235
12.2.1  路由參數(shù)匹配235
12.2.2  路由匹配的語(yǔ)法規(guī)則237
12.2.3  路由的嵌套239
12.3  頁(yè)面導(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  為特定的路由注冊(cè)導(dǎo)航守衛(wèi)248
12.7  動(dòng)態(tài)路由250
12.8  小結(jié)與練習(xí)252
第13章　Vue狀態(tài)管理253
13.1  認(rèn)識(shí)Vuex框架253
13.1.1  關(guān)于狀態(tài)管理253
13.1.2  安裝與體驗(yàn)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章　實(shí)戰(zhàn)項(xiàng)目：開(kāi)發(fā)一個(gè)學(xué)習(xí)筆記網(wǎng)站267
14.1  網(wǎng)站框架的搭建267
14.2  配置專題與文章目錄272
14.3  渲染文章筆記內(nèi)容275
14.4  小結(jié)與練習(xí)279
第15章　實(shí)戰(zhàn)項(xiàng)目：電商后臺(tái)管理系統(tǒng)實(shí)戰(zhàn)280
15.1  用戶登錄模塊開(kāi)發(fā)280
15.1.1  項(xiàng)目搭建280
15.1.2  用戶登錄頁(yè)面開(kāi)發(fā)283
15.2  項(xiàng)目主頁(yè)搭建286
15.2.1  主頁(yè)框架搭建286
15.2.2  完善注銷功能289
15.3  訂單管理模塊開(kāi)發(fā)290
15.3.1  使用Mock.js進(jìn)行模擬數(shù)據(jù)的生成290
15.3.2  編寫(xiě)工具類與全局樣式291
15.3.3  完善訂單管理頁(yè)面292
15.4  商品管理模塊的開(kāi)發(fā)298
15.4.1  商品管理列表頁(yè)的開(kāi)發(fā)298
15.4.2  新增商品之基礎(chǔ)配置303
15.4.3  新增商品之價(jià)格和庫(kù)存配置306
15.4.4  新增商品之詳情設(shè)置309
15.4.5  添加商品分類311
15.5  店長(zhǎng)管理模塊的開(kāi)發(fā)313
15.5.1  店長(zhǎng)列表開(kāi)發(fā)313
15.5.2  店長(zhǎng)審批列表與店長(zhǎng)訂單316
15.6  財(cái)務(wù)管理與數(shù)據(jù)統(tǒng)計(jì)功能模塊開(kāi)發(fā)317
15.6.1  交易明細(xì)與財(cái)務(wù)對(duì)賬單318
15.6.2  數(shù)據(jù)統(tǒng)計(jì)模塊開(kāi)發(fā)319
15.7  小結(jié)與練習(xí)323