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

目    錄

第 1 章  流行的前端開發框架Vue.js 1

1.1  前端開發技術的發展 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的發展歷程 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  案例實戰——使用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  常用的內置模板指令 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指令進行循環渲染 23

2.5  案例實戰1——通過插值語法實現姓名組合 35

2.6  案例實戰2——通過指令實現下拉菜單效果 36

第 3 章  組件的方法和計算屬性 39

3.1  方法選項 39

3.1.1  使用方法 39

3.1.2  傳遞參數 41

3.1.3  方法之間的調用 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  數組語法 51

3.6.2  對象語法 53

3.6.3  在組件上使用class屬性 56

3.7  綁定內聯樣式（style） 57

3.7.1  對象語法 57

3.7.2  數組語法 59

3.8  案例實戰1——設計隔行變色的商品表 60

3.9  案例實戰2——使用計算屬性設計購物車效果 63

第 4 章  表單的雙向綁定 66

4.1  實現雙向數據綁定 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  案例實戰——設計用戶註冊頁面 79

第 5 章  處理用戶交互 81

5.1  監聽事件 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  系統修飾鍵 96

5.6  使用監聽器 97

5.7  監聽方法 99

5.8  監聽對象 100

5.9  案例實戰1——使用監聽器設計購物車效果 103

5.10  案例實戰2——處理用戶註冊信息 105

第 6 章  精通組件和組合API 107

6.1  組件是什麽 107

6.2  組件的註冊 107

6.2.1  全局註冊 108

6.2.2  局部註冊 109

6.3  使用prop向子組件傳遞數據 110

6.3.1  prop的基本用法 110

6.3.2  單向數據流 113

6.3.3  prop驗證 114

6.3.4  非prop的屬性 116

6.4  子組件向父組件傳遞數據 117

6.4.1  監聽子組件事件 118

6.4.2  將原生事件綁定到組件 119

6.4.3  .sync修飾符 121

6.5  插槽 123

6.5.1  插槽的基本用法 123

6.5.2  編譯作用域 123

6.5.3  默認內容 124

6.5.4  命名插槽 125

6.5.5  作用域插槽 128

6.5.6  解構插槽prop 130

6.6  Vue.js 3.x的新變化1——組合API 131

6.7  setup()函數 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  案例實戰——使用組件創建樹狀項目分類 138

第 7 章  虛擬DOM和render()函數 140

7.1  虛擬DOM 140

7.2  render()函數 141

7.3  創建組件的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  函數式組件 149

7.6  JSX 149

7.7  案例實戰——設計商品採購信息列表 150

第 8 章  玩轉動畫效果 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鉤子函數 160

8.2  初始渲染的過渡 164

8.3  多個元素的過渡 165

8.4  列表過渡 166

8.4.1  列表的進入/離開過渡 167

8.4.2  列表的排序過渡 168

8.4.3  列表的交錯過渡 169

8.5  案例實戰1——商品編號增加器 171

8.6  案例實戰2——設計下拉菜單的過渡動畫 173

第 9 章  熟練使用構建工具Vue CLI和Vite 175

9.1  腳手架的組件 175

9.2  腳手架環境搭建 176

9.3  安裝腳手架 179

9.4  創建項目 180

9.4.1  使用命令 180

9.4.2  使用圖形化界面 182

9.5  分析項目結構 186

9.6  配置Sass、Less和Stylus 188

9.7  配置文件package.json 190

9.8  Vue.js 3.x新增開發構建工具——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  創建頁面基礎佈局 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  數字輸入框 212

10.4.6  選擇列表 213

10.4.7  多級列表組件 216

10.5  開關與滑塊組件 218

10.5.1  開關組件 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  數據承載相關組件 229

10.8.1  表格組件 229

10.8.2  導航菜單組件 232

10.8.3  標簽頁組件 234

10.8.4  標記組件 236

10.8.5  結果組件 237

10.8.6  抽屜組件 238

10.9  案例實戰——設計一個商城活動頁面 240

第 11 章  網絡通信框架axios 244

11.1  什麽是axios 244

11.2  安裝axios 244

11.3  基本用法 245

11.3.1  axios的get請求和post請求 245

11.3.2  請求同域下的JSON數據 247

11.3.3  跨域請求數據 249

11.3.4  並發請求 250

11.4  axios API 251

11.5  請求配置 251

11.6  創建實例 254

11.7  配置默認選項 254

11.8  攔截器 255

11.9  Vue.js 3.x的新變化——替代Vue.prototype 255

11.10  案例實戰——顯示近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  函數模式 287

12.7  案例實戰——開發網站會員登錄頁面 290

第 13 章  狀態管理框架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  案例實戰——設計一個商城購物車頁面 306

第 14 章  基於Vue的網上商城系統開發 313

14.1  系統功能模塊 313

14.2  使用Vite搭建項目 313

14.3  設計首頁 314

14.3.1  頁面頭部組件 314

14.3.2  網頁首頁組件 315

14.3.3  網頁頁腳組件 320

14.4  設計商品詳情頁面 320

14.5  設計商品分類頁面 322

14.6  設計商品結算頁面 325

14.7  設計個人信息頁面 328

14.8  設計訂單信息頁面 331

14.9  路由配置 334

14.10  系統的運行 335

第 15 章  基於Element Plus的圖書借閱系統開發 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  系統的運行 353

15.9  系統的調試 353