Vue.js 3.x+Element Plus從入門到項目實踐

目    錄

第1章  搭建Vue + Element Plus開發環境 1

1.1  Vue.js 3.x概述 1

1.1.1  MVVM模式 1

1.1.2  Vue.js的概念 2

1.1.3  Vue.js的數據驅動原理 3

1.2  為什麽要使用Vue.js 4

1.2.1  傳統的前端開發模式 4

1.2.2  Vue.js開發模式 5

1.3  安裝Vue.js 5

1.3.1  直接使用<script>引入 5

1.3.2  使用NPM方式 5

1.3.3  使用命令行工具(CLI)方式 6

1.3.4  使用Vite方式 6

1.4  綜合案例1——第一個Vue.js程序 6

1.5  安裝Element Plus 7

1.6  綜合案例2——第一個Vue.js + Element Plus案例 8

第2章  模板語法和指令 10

2.1  Vue.js實例 10

2.1.1  創建一個Vue.js實例 10

2.1.2  數據與方法 11

2.1.3  實例化多個對象 11

2.2  模板語法 15

2.2.1  插值 15

2.2.2  指令 18

2.2.3  縮寫 18

2.3  基本指令 19

2.3.1  v-cloak 19

2.3.2  v-once 20

2.3.3  v-text與v-html 20

2.3.4  v-bind 21

2.3.5  v-on 22

2.4  條件渲染 24

2.4.1  v-if 24

2.4.2  在<template>元素上使用v-if條件渲染分組 25

2.4.3  v-else 26

2.4.4  v-else-if 27

2.4.5  v-show 28

2.4.6  v-if與v-show的區別 29

2.5  列表渲染 31

2.5.1  使用v-for指令遍歷元素 31

2.5.2  維護狀態 34

2.5.3  數組更新檢測 35

2.5.4  對象變更檢測註意事項 37

2.5.5  在<template>上使用v-for 38

2.5.6  v-for與v-if一同使用 39

2.6  自定義指令 40

2.7  綜合案例1——設計商品採購列表 41

2.8  綜合案例2——通過插值語法實現商品信息組合 43

第3章  計算屬性和偵聽器 44

3.1  計算屬性computed 44

3.2  計算屬性與方法的區別 45

3.3  監聽器 47

3.3.1  回調值為方法 48

3.3.2  回調值為對象 49

3.4  綜合案例——通過計算屬性設計註冊表 51

第4章  雙向數據綁定 55

4.1  綁定HTML樣式(Class) 55

4.1.1  數組語法 55

4.1.2  對象語法 57

4.1.3  用在組件上 60

4.2  綁定內聯樣式(style) 60

4.2.1  對象語法 60

4.2.2  數組語法 62

4.3  雙向綁定 63

4.4  基本用法 64

4.4.1  文本 64

4.4.2  多行文本 65

4.4.3  復選框 66

4.4.4  單選按鈕 67

4.4.5  選擇框 68

4.5  值綁定 70

4.5.1  復選框 70

4.5.2  單選按鈕 71

4.5.3  選擇框的選項 72

4.6  修飾符 73

4.6.1  lazy 73

4.6.2  number 73

4.6.3  trim 74

4.7  綜合案例1——破壞瓶子小游戲 75

4.8  綜合案例2——設計網上商城購物車效果 77

第5章  事件處理 82

5.1  監聽事件 82

5.2  事件處理方法 83

5.3  事件修飾符 87

5.3.1  stop 88

5.3.2  capture 90

5.3.3  self 91

5.3.4  once 93

5.3.5  prevent 93

5.3.6  passive 94

5.4  按鍵修飾符 95

5.5  系統修飾鍵 97

5.6  綜合案例——設計商城tab欄切換 98

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

6.1  組件是什麽 100

6.2  組件的註冊 100

6.2.1  全局註冊 101

6.2.2  局部註冊 102

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

6.3.1  prop的基本用法 103

6.3.2  單向數據流 106

6.3.3  prop驗證 106

6.3.4  非prop的屬性 108

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

6.4.1  監聽子組件事件 110

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

6.4.3  sync修飾符 112

6.5  插槽 114

6.5.1  插槽的基本用法 114

6.5.2  編譯作用域 115

6.5.3  默認內容 115

6.5.4  命名插槽 116

6.5.5  作用域插槽 119

6.5.6  解構插槽prop 121

6.6  為什麽要引入組合API 122

6.7  setup()函數 123

6.8  響應式API 124

6.8.1  reactive()方法和watchEffect()

方法 124

6.8.2  ref()方法 125

6.8.3  readonly()方法 125

6.8.4  computed()方法 126

6.8.5  watch()方法 127

6.9  綜合案例1——開發待辦事項功能 127

6.10  綜合案例2——設計商城輪播效果圖 129

第7章  項目腳手架vue-cli和Vite 132

7.1  腳手架的組件 132

7.2  腳手架環境搭建 133

7.3  安裝腳手架 135

7.4  創建項目 136

7.4.1  使用命令創建項目 136

7.4.2  使用圖形化界面創建項目 138

7.5  分析項目結構 140

7.6  構建工具Vite 142

第8章  玩轉前端路由 144

8.1  使用Vue Router實現Vue前端路由控制 144

8.1.1  前端路由的實現方式 144

8.1.2  路由實現 145

8.2  Vue Router中的常用技術 148

8.2.1  命名路由 148

8.2.2  命名視圖 150

8.2.3  路由傳參 154

8.3  編程式導航 158

8.4  組件與Vue Router間解耦 162

8.4.1  布爾模式 162

8.4.2  對象模式 165

8.4.3  函數模式 167

第9章  狀態管理Vuex 171

9.1  什麽是Vuex 171

9.1.1  什麽是狀態管理模式 171

9.1.2  什麽情況下使用Vuex 172

9.2  使用Vuex 173

9.3  在項目中使用Vuex 173

9.3.1  搭建一個項目 173

9.3.2  state對象 175

9.3.3  getter對象 176

9.3.4  mutation對象 178

9.3.5  action對象 179

第10章  Element Plus基礎入門 182

10.1  頁面佈局的方式 182

10.1.1  創建頁面基礎佈局 182

10.1.2  使用佈局容器組件 184

10.2  內置過渡動畫 186

10.2.1  淡入淡出動畫 186

10.2.2  縮放動畫 187

10.2.3  折疊展開動畫 188

10.3  基本組件 189

10.3.1  按鈕組件 189

10.3.2  文字鏈接組件 190

10.3.3  間距組件 191

10.3.4  滾動條組件 193

10.4  提示類組件 194

10.4.1  警告組件 195

10.4.2  通知組件 196

10.4.3  消息提示組件 197

10.5  綜合案例——設計一個滾動菜單欄的組件 198

第11章  Element Plus中的表單 201

11.1  表單類組件 201

11.1.1  單選按鈕 201

11.1.2  復選框 202

11.1.3  標準輸入框組件 204

11.1.4  帶推薦列表的輸入框組件 206

11.1.5  計數器 207

11.1.6  選擇列表 208

11.1.7  多級列表組件 211

11.2  開關組件與滑塊組件 212

11.2.1  開關組件 212

11.2.2  滑塊組件 213

11.3  選擇器組件 215

11.3.1  時間選擇器 215

11.3.2  日期選擇器 217

11.3.3  顏色選擇器 218

11.4  上傳組件 219

11.5  評分組件 221

11.6  穿梭框組件 222

11.7  綜合案例——設計一個商城活動頁面 223

第12章  Element Plus中的數據 227

12.1  數據展示類組件 227

12.1.1  表格組件 227

12.1.2  標簽組件 229

12.1.3  進度條組件 230

12.1.4  樹形組件 231

12.1.5  分頁組件 234

12.1.6  徽章組件 236

12.1.7  描述列表組件 237

12.1.8  結果組件 239

12.2  導航類組件 241

12.2.1  導航菜單組件 241

12.2.2  標簽頁組件 243

12.2.3  麵包屑組件 244

12.2.4  頁頭組件 245

12.2.5  下拉菜單組件 245

12.2.6  步驟條組件 247

12.3  其他高級組件 248

12.3.1  對話框組件 248

12.3.2  提示組件 250

12.3.3  卡片組件 253

12.3.4  走馬燈組件 254

12.3.5  折疊面板組件 255

12.3.6  時間線組件 256

12.3.7  分割線組件 258

12.3.8  抽屜組件 258

12.4  綜合案例——設計一個商品列表管理後台頁面 259

第13章  項目實戰1——開發科技企業網站系統 266

13.1  使用Vite搭建項目 266

13.2  設 計 首 頁 269

13.2.1  網頁頭部組件 269

13.2.2  網頁首頁組件 271

13.2.3  網頁頁腳組件 272

13.3  設計主營業務組件 273

13.4  設計關於我們組件 275

13.5  設計企業新聞組件 276

13.6  設計聯系我們組件 277

13.7  路由配置 278

13.8  系統的運行 279

13.9  系統的調試 280

第14章  項目實戰2——開發圖書管理系統 283

14.1  項目環境及框架 283

14.1.1  系統開發環境要求 283

14.1.2  軟件框架 283

14.2  系統分析 284

14.2.1  系統功能設計 284

14.2.2  系統功能結構圖 285

14.3  系統主要功能實現 285

14.3.1  登錄頁面的實現 285

14.3.2  註冊頁面的實現 287

14.3.3  首頁的實現 287

14.3.4  個人中心頁面的實現 292

14.3.5  書籍管理頁面的實現 295

14.3.6  用戶管理頁面的實現 299

第15章  項目實戰3——開發企業辦公自動化系統 300

15.1  項目環境及框架 300

15.1.1  系統開發環境要求 300

15.1.2  軟件框架 300

15.2  系統分析 301

15.2.1  系統功能設計 301

15.2.2  系統功能結構圖 301

15.3  系統主要功能實現 302

15.3.1  登錄頁面的實現 302

15.3.2  概況頁面的實現 303

15.3.3  員工信息頁面的實現 307

15.3.4  招聘崗位頁面的實現 309

15.3.5  應聘者信息頁面的實現 310

15.3.6  考勤信息頁面的實現 310

15.3.7  簽到信息頁面的實現 310