Vue.js 3.x+Element Plus從入門到精通（視頻教學(xué)版）

第 1 章  流行的前端開發(fā)框架Vue.js 1
1.1  前端開發(fā)技術(shù)的發(fā)展 1
1.2  熟悉MV*模式 2
1.2.1  MVC模式 2
1.2.2  MVVM模式 2
1.3  Vue.js概述 3
1.3.1  Vue.js“組件化”思想 3
1.3.2  Vue.js的發(fā)展歷程 4
1.3.3  Vue.js 3.4的特性 5
1.4  安裝Vue.js 3.x 6
1.4.1  使用CDN方式 6
1.4.2  NPM 6
1.4.3  命令行工具 7
1.4.4  使用Vite方式 7
1.5  案例實(shí)戰(zhàn)——使用Vue.js框架 8
1.6  Vue.js 3.x的新變化 9
第 2 章  Vue.js模板應(yīng)用 12
2.1  模板插值 12
2.1.1  文本插值 12
2.1.2  原始HTML 13
2.1.3  使用JavaScript表達(dá)式 14
2.2  常用的內(nèi)置模板指令 15
2.2.1  v-on 16
2.2.2  v-text 17
2.2.3  v-once 18
2.2.4  v-pre 18
2.2.5  v-cloak 19
2.3  條件渲染 20
2.3.1  v-if/v-else-if/v-else 20
2.3.2  使用v-show指令進(jìn)行條件渲染 22
2.4  使用v-for指令進(jìn)行循環(huán)渲染 23
2.5  案例實(shí)戰(zhàn)1——通過插值語法實(shí)現(xiàn)姓名組合 35
2.6  案例實(shí)戰(zhàn)2——通過指令實(shí)現(xiàn)下拉菜單效果 36
第 3 章  組件的方法和計(jì)算屬性 39
3.1  方法選項(xiàng) 39
3.1.1  使用方法 39
3.1.2  傳遞參數(shù) 41
3.1.3  方法之間的調(diào)用 42
3.2  使用計(jì)算屬性 43
3.3  計(jì)算屬性的get和set方法 44
3.4  計(jì)算屬性的緩存 46
3.5  使用計(jì)算屬性代替v-for和v-if 49
3.6  綁定HTML樣式（class） 51
3.6.1  數(shù)組語法 51
3.6.2  對(duì)象語法 53
3.6.3  在組件上使用class屬性 56
3.7  綁定內(nèi)聯(lián)樣式（style） 57
3.7.1  對(duì)象語法 57
3.7.2  數(shù)組語法 59
3.8  案例實(shí)戰(zhàn)1——設(shè)計(jì)隔行變色的商品表 60
3.9  案例實(shí)戰(zhàn)2——使用計(jì)算屬性設(shè)計(jì)購物車效果 63
第 4 章  表單的雙向綁定 66
4.1  實(shí)現(xiàn)雙向數(shù)據(jù)綁定 66
4.2  單行文本輸入框 66
4.3  多行文本輸入框 67
4.4  復(fù)選框 68
4.5  單選按鈕 70
4.6  選擇框 71
4.7  值綁定 74
4.7.1  復(fù)選框 74
4.7.2  單選框 75
4.7.3  選擇框的選項(xiàng) 75
4.8  修飾符 76
4.8.1  lazy 76
4.8.2  number 77
4.8.3  trim 78
4.9  案例實(shí)戰(zhàn)——設(shè)計(jì)用戶注冊(cè)頁面 79
第 5 章  處理用戶交互 81
5.1  監(jiān)聽事件 81
5.2  事件處理方法 82
5.3  事件修飾符 86
5.3.1  stop 86
5.3.2  capture 88
5.3.3  self 90
5.3.4  once 92
5.3.5  prevent 93
5.3.6  passive 94
5.4  按鍵修飾符 94
5.5  系統(tǒng)修飾鍵 96
5.6  使用監(jiān)聽器 97
5.7  監(jiān)聽方法 99
5.8  監(jiān)聽對(duì)象 100
5.9  案例實(shí)戰(zhàn)1——使用監(jiān)聽器設(shè)計(jì)購物車效果 103
5.10  案例實(shí)戰(zhàn)2——處理用戶注冊(cè)信息 105
第 6 章  精通組件和組合API 107
6.1  組件是什么 107
6.2  組件的注冊(cè) 107
6.2.1  全局注冊(cè) 108
6.2.2  局部注冊(cè) 109
6.3  使用prop向子組件傳遞數(shù)據(jù) 110
6.3.1  prop的基本用法 110
6.3.2  單向數(shù)據(jù)流 113
6.3.3  prop驗(yàn)證 114
6.3.4  非prop的屬性 116
6.4  子組件向父組件傳遞數(shù)據(jù) 117
6.4.1  監(jiān)聽子組件事件 118
6.4.2  將原生事件綁定到組件 119
6.4.3  .sync修飾符 121
6.5  插槽 123
6.5.1  插槽的基本用法 123
6.5.2  編譯作用域 123
6.5.3  默認(rèn)內(nèi)容 124
6.5.4  命名插槽 125
6.5.5  作用域插槽 128
6.5.6  解構(gòu)插槽prop 130
6.6  Vue.js 3.x的新變化1——組合API 131
6.7  setup()函數(shù) 131
6.8  響應(yīng)式API 133
6.8.1  reactive()方法和watchEffect()方法 133
6.8.2  ref()方法 134
6.8.3  readonly()方法 135
6.8.4  computed()方法 135
6.8.5  watch()方法 136
6.9  Vue.js 3.x的新變化2——訪問組件的方式 137
6.10  案例實(shí)戰(zhàn)——使用組件創(chuàng)建樹狀項(xiàng)目分類 138
第 7 章  虛擬DOM和render()函數(shù) 140
7.1  虛擬DOM 140
7.2  render()函數(shù) 141
7.3  創(chuàng)建組件的VNode 144
7.4  使用JavaScript代替模板功能 145
7.4.1  v-if和v-for 145
7.4.2  v-on 146
7.4.3  事件和按鍵修飾符 146
7.4.4  插槽 147
7.5  函數(shù)式組件 149
7.6  JSX 149
7.7  案例實(shí)戰(zhàn)——設(shè)計(jì)商品采購信息列表 150
第 8 章  玩轉(zhuǎn)動(dòng)畫效果 153
8.1  單元素/組件的過渡 153
8.1.1  CSS過渡 153
8.1.2  過渡的類名 155
8.1.3  CSS動(dòng)畫 158
8.1.4  自定義過渡的類名 159
8.1.5  動(dòng)畫的JavaScript鉤子函數(shù) 160
8.2  初始渲染的過渡 164
8.3  多個(gè)元素的過渡 165
8.4  列表過渡 166
8.4.1  列表的進(jìn)入/離開過渡 167
8.4.2  列表的排序過渡 168
8.4.3  列表的交錯(cuò)過渡 169
8.5  案例實(shí)戰(zhàn)1——商品編號(hào)增加器 171
8.6  案例實(shí)戰(zhàn)2——設(shè)計(jì)下拉菜單的過渡動(dòng)畫 173
第 9 章  熟練使用構(gòu)建工具Vue CLI和Vite 175
9.1  腳手架的組件 175
9.2  腳手架環(huán)境搭建 176
9.3  安裝腳手架 179
9.4  創(chuàng)建項(xiàng)目 180
9.4.1  使用命令 180
9.4.2  使用圖形化界面 182
9.5  分析項(xiàng)目結(jié)構(gòu) 186
9.6  配置Sass、Less和Stylus 188
9.7  配置文件package.json 190
9.8  Vue.js 3.x新增開發(fā)構(gòu)建工具——Vite 191
第 10 章  基于Vue 3的UI組件庫Element Plus 194
10.1  Element Plus的安裝與使用 194
10.2  基本組件 196
10.2.1  按鈕組件 196
10.2.2  文字鏈接組件 198
10.2.3  間距組件 198
10.3  頁面布局 201
10.3.1  創(chuàng)建頁面基礎(chǔ)布局 201
10.3.2  布局容器 203
10.4  表單類組件 205
10.4.1  單選框 205
10.4.2  復(fù)選框 206
10.4.3  標(biāo)準(zhǔn)輸入框組件 208
10.4.4  帶推薦列表的輸入框組件 210
10.4.5  數(shù)字輸入框 212
10.4.6  選擇列表 213
10.4.7  多級(jí)列表組件 216
10.5  開關(guān)與滑塊組件 218
10.5.1  開關(guān)組件 218
10.5.2  滑塊組件 219
10.6  選擇器組件 221
10.6.1  時(shí)間選擇器 221
10.6.2  日期選擇器 223
10.6.3  顏色選擇器 224
10.7  提示類組件 225
10.7.1  警告組件 225
10.7.2  通知組件 227
10.7.3  消息提示組件 228
10.8  數(shù)據(jù)承載相關(guān)組件 229
10.8.1  表格組件 229
10.8.2  導(dǎo)航菜單組件 232
10.8.3  標(biāo)簽頁組件 234
10.8.4  標(biāo)記組件 236
10.8.5  結(jié)果組件 237
10.8.6  抽屜組件 238
10.9  案例實(shí)戰(zhàn)——設(shè)計(jì)一個(gè)商城活動(dòng)頁面 240
第 11 章  網(wǎng)絡(luò)通信框架axios 244
11.1  什么是axios 244
11.2  安裝axios 244
11.3  基本用法 245
11.3.1  axios的get請(qǐng)求和post請(qǐng)求 245
11.3.2  請(qǐng)求同域下的JSON數(shù)據(jù) 247
11.3.3  跨域請(qǐng)求數(shù)據(jù) 249
11.3.4  并發(fā)請(qǐng)求 250
11.4  axios API 251
11.5  請(qǐng)求配置 251
11.6  創(chuàng)建實(shí)例 254
11.7  配置默認(rèn)選項(xiàng) 254
11.8  攔截器 255
11.9  Vue.js 3.x的新變化——替代Vue.prototype 255
11.10  案例實(shí)戰(zhàn)——顯示近7日的天氣情況 256
第 12 章  使用Vue Router進(jìn)行路由管理 259
12.1  使用Vue Router 259
12.1.1  在HTML頁面使用路由 259
12.1.2  在項(xiàng)目中使用路由 264
12.2  命名路由 266
12.3  命名視圖 268
12.4  路由傳參 272
12.5  編程式導(dǎo)航 277
12.6  組件與Vue Router間解耦 281
12.6.1  布爾模式 281
12.6.2  對(duì)象模式 284
12.6.3  函數(shù)模式 287
12.7  案例實(shí)戰(zhàn)——開發(fā)網(wǎng)站會(huì)員登錄頁面 290
第 13 章  狀態(tài)管理框架Vuex 295
13.1  什么是Vuex 295
13.2  安裝Vuex 296
13.3  在項(xiàng)目中使用Vuex 297
13.3.1  搭建一個(gè)項(xiàng)目 297
13.3.2  state對(duì)象 299
13.3.3  getter對(duì)象 300
13.3.4  mutation對(duì)象 302
13.3.5  action對(duì)象 304
13.4  案例實(shí)戰(zhàn)——設(shè)計(jì)一個(gè)商城購物車頁面 306
第 14 章  基于Vue的網(wǎng)上商城系統(tǒng)開發(fā) 313
14.1  系統(tǒng)功能模塊 313
14.2  使用Vite搭建項(xiàng)目 313
14.3  設(shè)計(jì)首頁 314
14.3.1  頁面頭部組件 314
14.3.2  網(wǎng)頁首頁組件 315
14.3.3  網(wǎng)頁頁腳組件 320
14.4  設(shè)計(jì)商品詳情頁面 320
14.5  設(shè)計(jì)商品分類頁面 322
14.6  設(shè)計(jì)商品結(jié)算頁面 325
14.7  設(shè)計(jì)個(gè)人信息頁面 328
14.8  設(shè)計(jì)訂單信息頁面 331
14.9  路由配置 334
14.10  系統(tǒng)的運(yùn)行 335
第 15 章  基于Element Plus的圖書借閱系統(tǒng)開發(fā) 336
15.1  使用Vite搭建項(xiàng)目 336
15.2  設(shè)計(jì)登錄頁面 338
15.3  設(shè)計(jì)注冊(cè)頁面 340
15.4  設(shè)計(jì)首頁 341
15.5  設(shè)計(jì)會(huì)員信息頁面 344
15.6  設(shè)計(jì)圖書借閱信息頁面 349
15.7  設(shè)計(jì)還書信息頁面 351
15.8  系統(tǒng)的運(yùn)行 353
15.9  系統(tǒng)的調(diào)試 353