單元1

Vue.js　3入門基礎　1

單元導學　1

學習目標　1

知識學習　1

1.1　前端開發模式的演變歷程　1

1.2　認識Vue.js　2

1.3　項目開發準備　3

1.3.1　了解相關工具　3

1.3.2　安裝開發和調試工具　4

應用實踐　10

項目1　歷史名城簡介頁面　10

任務1-1　構建Vue應用程序　10

任務1-2　運行并調試Vue應用程序　12

同步訓練　12

單元小結　13

單元練習　13



單元2

基礎語法　14

單元導學　14

學習目標　14

知識學習　15

2.1　剖析Vue應用程序　15

2.2　單向綁定　17

2.3　雙向綁定　22

2.4　流程控制　25

2.4.1　條件渲染　25

2.4.2　列表渲染　27

2.5　事件處理　29

2.5.1　事件監聽　29

2.5.2　事件修飾符　31

2.6　計算屬性　34

2.7　數據監聽器　35

應用實踐　37

項目2-1　簡易計算器　37

任務2-1-1　構建頁面布局　37

任務2-1-2　創建根組件和Vue應用實例　38

項目2-2　歷史名城典故頁面　39

任務2-2-1　構建頁面布局　39

任務2-2-2　創建根組件和Vue應用實例　40

同步訓練　40

單元小結　41

單元練習　42



單元3

組件基礎　43

單元導學　43

學習目標　43

3.1　認識組件　44

3.2　組件定義　45

3.3　組件注冊　47

3.3.1　全局注冊　47

3.3.2　局部注冊　48

3.4　組件間數據傳遞　49

3.4.1　props的使用　49

3.4.2　props的驗證　52

3.5　組件事件　55

3.5.1　組件事件的監聽與處理　55

3.5.2　組件事件的驗證　57

3.5.3　v-model與自定義事件　59

3.6　組件插槽　61

3.6.1　默認插槽　61

3.6.2　具名插槽　63

3.6.3　作用域插槽　64

3.7　動態組件　66

應用實踐　67

項目3　自定義頁面圖標樣式　67

任務3-1　構建頁面布局　68

任務3-2　實現自定義圖標樣式　69

同步訓練　70

單元小結　70

單元練習　71



單元4

組件進階　72

單元導學　72

學習目標　72

知識學習　72

4.1　組件生命周期　72

4.1.1　生命周期鉤子函數　73

4.1.2　實例創建　74

4.1.3　頁面掛載　75

4.1.4　數據更新　76

4.1.5　組件實例銷毀　77

4.2　Teleport　79

4.2.1　基本用法　79

4.2.2　結合組件使用　82

應用實踐　83

項目4　彈出式登錄框　83

任務4-1　構建頁面布局　84

任務4-2　創建登錄框組件　85

同步訓練　86

單元小結　87

單元練習　87



單元5

過渡和動畫　88

單元導學　88

學習目標　88

知識學習　89

5.1　認識過渡和動畫　89

5.2　實現過渡和動畫　90

5.2.1　Transition組件　90

5.2.2　過渡　92

5.2.3　動畫　93

5.2.4　基于鉤子函數的過渡和動畫　93

5.3　多個元素和組件過渡　97

5.4　列表過渡　100

應用實踐　101

項目5　會員中心頁面　101

任務5-1　構建頁面布局　102

任務5-2　創建局部組件　103

同步訓練　105

單元小結　105

單元練習　105



單元6

組合式API　107

單元導學　107

學習目標　107

知識學習　107

6.1　組合式API　107

6.1.1　認識組合式API　108

6.1.2　setup函數　111

6.1.3　訪問生命周期鉤子函數　113

6.2　響應性API　114

6.2.1　響應性原理　114

6.2.2　響應性API的應用　117

6.3　provide/inject響應式傳值　123

應用實踐　126

項目6　查詢歷史名城相關詩詞　126

任務6-1　采用選項式API實現　126

任務6-2　利用組合式API重構　130

同步訓練　131

單元小結　131

單元練習　132



單元7

與后端交互——axios　134

單元導學　134

學習目標　134

知識學習　134

7.1　認識axios　134

7.1.1　異步編程　135

7.1.2　axios安裝與配置　140

7.2　axios處理HTTP請求　142

7.3　axios攔截器　145

應用實踐　147

項目7　查詢旅游城市天氣　147

任務7-1　構建頁面布局　148

任務7-2　實現天氣預報查詢　149

同步訓練　152

單元小結　152

單元練習　153



單元8

路由管理——Vue　Router　154

單元導學　154

學習目標　154

知識學習　155

8.1　認識Vue Router　155

8.1.1　前端路由　155

8.1.2　Vue Router安裝與使用　156

8.2　路由屬性　157

8.2.1　嵌套路由　157

8.2.2　命名路由　159

8.2.3　命名視圖　160

8.3　動態路由　161

8.3.1　路由傳參　161

8.3.2　路由函數　162

8.4　導航　164

8.4.1　聲明式導航　164

8.4.2　編程式導航　166

8.5　導航守衛　168

8.5.1　全局導航守衛　168

8.5.2　路由導航守衛　170

應用實踐　171

項目8　用戶登錄及注冊　171

任務8-1　構建頁面頭部布局　172

任務8-2　實現登錄和注冊功能　173

同步訓練　176

單元小結　176

單元練習　177



單元9

狀態管理——Vuex　179

單元導學　179

學習目標　179

知識學習　179

9.1　認識Vuex　179

9.1.1　狀態管理模式　180

9.1.2　Vuex安裝與使用　182

9.2　Vuex核心屬性　184

9.2.1　state　184

9.2.2　getters　185

9.2.3　mutations　187

9.2.4　actions　189

9.2.5　modules　192

應用實踐　194

項目9　記錄用戶瀏覽歷史　194

任務9-1　構建頁面布局　195

任務9-2　實現瀏覽歷史的記錄和獲取功能　198

同步訓練　201

單元小結　201

單元練習　202



單元10

構建工程化的Vue項目　203

單元導學　203

學習目標　203

知識學習　204

10.1　Vue CLI工具　204

10.2　快速構建項目　205

10.3　項目組成要素　207

10.3.1　項目結構　207

10.3.2　項目入口文件　207

10.3.3　單文件組件　208

10.4　項目配置文件　212

10.4.1　package.json　212

10.4.2　vue.config.js　213

10.5　新一代構建工具Vite　214

10.5.1　Vite工具特點　215

10.5.2　體驗Vite工具　215

10.6　Element Plus組件庫　216

應用實踐　218

項目10　todoMVC　218

任務10-1　構建項目主頁布局　219

任務10-2　構建組件TodoHeader　220

任務10-3　構建組件TodoList　221

任務10-4　構建組件TodoFooter　223

同步訓練　224

單元小結　225

單元練習　225



單元11

工程化項目實戰：圖片素材庫網站　226

單元導學　226

學習目標　226

11.1　項目設計　227

11.1.1　項目功能模塊　227

11.1.2　項目實現思路　227

11.1.3　項目工程化規范　232

11.2　前端子項目——構建項目　233

11.2.1　創建Vue工程　234

11.2.2　配置路由　234

11.2.3　配置Vuex　235

11.2.4　配置axios　237

11.2.5　項目入口　238

11.3　前端子項目——公共組件　239

11.4　前端子項目——網站首頁　240

11.4.1　整體布局　240

11.4.2　輪播圖　243

11.5　前端子項目——用戶登錄　245

11.6　前端子項目——圖片展示與操作　247

11.7　前端子項目——圖片分享　251

11.8　后端子項目——構建項目　255

11.8.1　認識Express框架　255

11.8.2　搭建后端子項目　257

11.9　后端子項目——用戶登錄合法性驗證　258

單元小結　262

單元練習　263



附錄

ES6相關語法　264