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

第 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  案例實戰(zhàn)——使用Vue.js框架 8
1.6  Vue.js 3.x的新變化 9
第 2 章  Vue.js模板應用 12
2.1  模板插值 12
2.1.1  文本插值 12
2.1.2  原始HTML 13
2.1.3  使用JavaScript表達式 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指令進行條件渲染 22
2.4  使用v-for指令進行循環(huán)渲染 23
2.5  案例實戰(zhàn)1——通過插值語法實現(xiàn)姓名組合 35
2.6  案例實戰(zhàn)2——通過指令實現(xiàn)下拉菜單效果 36
第 3 章  組件的方法和計算屬性 39
3.1  方法選項 39
3.1.1  使用方法 39
3.1.2  傳遞參數(shù) 41
3.1.3  方法之間的調(diào)用 42
3.2  使用計算屬性 43
3.3  計算屬性的get和set方法 44
3.4  計算屬性的緩存 46
3.5  使用計算屬性代替v-for和v-if 49
3.6  綁定HTML樣式（class） 51
3.6.1  數(shù)組語法 51
3.6.2  對象語法 53
3.6.3  在組件上使用class屬性 56
3.7  綁定內(nèi)聯(lián)樣式（style） 57
3.7.1  對象語法 57
3.7.2  數(shù)組語法 59
3.8  案例實戰(zhàn)1——設計隔行變色的商品表 60
3.9  案例實戰(zhàn)2——使用計算屬性設計購物車效果 63
第 4 章  表單的雙向綁定 66
4.1  實現(xiàn)雙向數(shù)據(jù)綁定 66
4.2  單行文本輸入框 66
4.3  多行文本輸入框 67
4.4  復選框 68
4.5  單選按鈕 70
4.6  選擇框 71
4.7  值綁定 74
4.7.1  復選框 74
4.7.2  單選框 75
4.7.3  選擇框的選項 75
4.8  修飾符 76
4.8.1  lazy 76
4.8.2  number 77
4.8.3  trim 78
4.9  案例實戰(zhàn)——設計用戶注冊頁面 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)聽對象 100
5.9  案例實戰(zhàn)1——使用監(jiān)聽器設計購物車效果 103
5.10  案例實戰(zhàn)2——處理用戶注冊信息 105
第 6 章  精通組件和組合API 107
6.1  組件是什么 107
6.2  組件的注冊 107
6.2.1  全局注冊 108
6.2.2  局部注冊 109
6.3  使用prop向子組件傳遞數(shù)據(jù) 110
6.3.1  prop的基本用法 110
6.3.2  單向數(shù)據(jù)流 113
6.3.3  prop驗證 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  默認內(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  響應式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  案例實戰(zhàn)——使用組件創(chuà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  案例實戰(zhàn)——設計商品采購信息列表 150
第 8 章  玩轉(zhuǎn)動畫效果 153
8.1  單元素/組件的過渡 153
8.1.1  CSS過渡 153
8.1.2  過渡的類名 155
8.1.3  CSS動畫 158
8.1.4  自定義過渡的類名 159
8.1.5  動畫的JavaScript鉤子函數(shù) 160
8.2  初始渲染的過渡 164
8.3  多個元素的過渡 165
8.4  列表過渡 166
8.4.1  列表的進入/離開過渡 167
8.4.2  列表的排序過渡 168
8.4.3  列表的交錯過渡 169
8.5  案例實戰(zhàn)1——商品編號增加器 171
8.6  案例實戰(zhàn)2——設計下拉菜單的過渡動畫 173
第 9 章  熟練使用構(gòu)建工具Vue CLI和Vite 175
9.1  腳手架的組件 175
9.2  腳手架環(huán)境搭建 176
9.3  安裝腳手架 179
9.4  創(chuàng)建項目 180
9.4.1  使用命令 180
9.4.2  使用圖形化界面 182
9.5  分析項目結(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)建頁面基礎布局 201
10.3.2  布局容器 203
10.4  表單類組件 205
10.4.1  單選框 205
10.4.2  復選框 206
10.4.3  標準輸入框組件 208
10.4.4  帶推薦列表的輸入框組件 210
10.4.5  數(shù)字輸入框 212
10.4.6  選擇列表 213
10.4.7  多級列表組件 216
10.5  開關(guān)與滑塊組件 218
10.5.1  開關(guān)組件 218
10.5.2  滑塊組件 219
10.6  選擇器組件 221
10.6.1  時間選擇器 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  導航菜單組件 232
10.8.3  標簽頁組件 234
10.8.4  標記組件 236
10.8.5  結(jié)果組件 237
10.8.6  抽屜組件 238
10.9  案例實戰(zhàn)——設計一個商城活動頁面 240
第 11 章  網(wǎng)絡通信框架axios 244
11.1  什么是axios 244
11.2  安裝axios 244
11.3  基本用法 245
11.3.1  axios的get請求和post請求 245
11.3.2  請求同域下的JSON數(shù)據(jù) 247
11.3.3  跨域請求數(shù)據(jù) 249
11.3.4  并發(fā)請求 250
11.4  axios API 251
11.5  請求配置 251
11.6  創(chuàng)建實例 254
11.7  配置默認選項 254
11.8  攔截器 255
11.9  Vue.js 3.x的新變化——替代Vue.prototype 255
11.10  案例實戰(zhàn)——顯示近7日的天氣情況 256
第 12 章  使用Vue Router進行路由管理 259
12.1  使用Vue Router 259
12.1.1  在HTML頁面使用路由 259
12.1.2  在項目中使用路由 264
12.2  命名路由 266
12.3  命名視圖 268
12.4  路由傳參 272
12.5  編程式導航 277
12.6  組件與Vue Router間解耦 281
12.6.1  布爾模式 281
12.6.2  對象模式 284
12.6.3  函數(shù)模式 287
12.7  案例實戰(zhàn)——開發(fā)網(wǎng)站會員登錄頁面 290
第 13 章  狀態(tài)管理框架Vuex 295
13.1  什么是Vuex 295
13.2  安裝Vuex 296
13.3  在項目中使用Vuex 297
13.3.1  搭建一個項目 297
13.3.2  state對象 299
13.3.3  getter對象 300
13.3.4  mutation對象 302
13.3.5  action對象 304
13.4  案例實戰(zhàn)——設計一個商城購物車頁面 306
第 14 章  基于Vue的網(wǎng)上商城系統(tǒng)開發(fā) 313
14.1  系統(tǒng)功能模塊 313
14.2  使用Vite搭建項目 313
14.3  設計首頁 314
14.3.1  頁面頭部組件 314
14.3.2  網(wǎng)頁首頁組件 315
14.3.3  網(wǎng)頁頁腳組件 320
14.4  設計商品詳情頁面 320
14.5  設計商品分類頁面 322
14.6  設計商品結(jié)算頁面 325
14.7  設計個人信息頁面 328
14.8  設計訂單信息頁面 331
14.9  路由配置 334
14.10  系統(tǒng)的運行 335
第 15 章  基于Element Plus的圖書借閱系統(tǒng)開發(fā) 336
15.1  使用Vite搭建項目 336
15.2  設計登錄頁面 338
15.3  設計注冊頁面 340
15.4  設計首頁 341
15.5  設計會員信息頁面 344
15.6  設計圖書借閱信息頁面 349
15.7  設計還書信息頁面 351
15.8  系統(tǒng)的運行 353
15.9  系統(tǒng)的調(diào)試 353