Vue.js 3.x 高效前端開發 (視頻教學版)

目    錄

第1章  認識Vue.js 3.x 1

1.1  Web前端技術的發展歷程 1

1.1.1  從靜態向動態轉變 1

1.1.2  從後端走向前端 2

1.1.3  從前端走向全端 2

1.2  Vue.js概述 2

1.2.1  Vue.js是什麽 2

1.2.2  Vue.js發展歷程 4

1.3  MV*模式 4

1.3.1  MVC模式 4

1.3.2  MVVM模式 5

第2章  創建Vue.js實例 6

2.1  安裝vue-devtools 6

2.2  在項目中引入Vue.js 8

2.2.1  使用CDN 9

2.2.2  使用NPM 9

2.2.3  使用命令行工具CLI 9

2.2.4  使用Vite 10

2.3  安裝和使用編輯器HBuilder 10

2.4  項目實訓—我的第一個Vue.js程序 12

第3章  Vue.js模板語法 16

3.1  創建應用程序實例 16

3.2  插值 17

3.3  方法選項 19

3.3.1  使用方法 19

3.3.2  傳遞參數 21

3.3.3  方法之間的調用 22

3.4  Vue實例的生命周期 23

3.4.1  認識生命周期鉤子函數 23

3.4.2  created和mouted 25

3.5  指令 27

第4章  精通指令 29

4.1  常見內置指令 29

4.1.1  v-show指令 29

4.1.2  v-bind指令 30

4.1.3  v-model 31

4.1.4  v-on 33

4.1.5  v-text 34

4.1.6  v-html 35

4.1.7  v-once 36

4.1.8  v-pre 37

4.1.9  v-cloak 38

4.2  條件渲染指令 39

4.2.1  v-if 39

4.2.2  v-else-if和v-else 40

4.2.3  v-for 41

4.3  指令縮寫 53

4.4  自定義指令 53

4.4.1  註冊自定義指令 53

4.4.2  鉤子函數 54

4.4.3  動態指令參數 56

4.5  項目實訓—通過指令實現隨機背景色效果 57

第5章  計算屬性 59

5.1  計算屬性的定義 59

5.2  計算屬性的getter和setter方法 60

5.3  計算屬性的緩存 62

5.4  計算屬性代替v-for和v-if 65

5.5  項目實訓—使用計算屬性設計計算器 66

第6章  v-bind及class與style綁定 68

6.1  綁定HTML樣式class 68

6.1.1  數組語法 68

6.1.2  對象語法 70

6.1.3  用在組件上 74

6.2  綁定內聯樣式style 74

6.2.1  對象語法 74

6.2.2  數組語法 77

6.3  項目實訓—設計隔行變色的水果信息表 78

第7章  表單與v-model雙向綁定 81

7.1  實現雙向數據綁定 81

7.2  單行文本輸入框 81

7.3  多行文本輸入框 82

7.4  復選框 83

7.5  單選按鈕 85

7.6  選擇框 86

7.7  值綁定 89

7.7.1  復選框 89

7.7.2  單選框 89

7.7.3  選擇框的選項 90

7.8  修飾符 91

7.8.1  lazy 91

7.8.2  number 92

7.8.3  trim 93

7.9  項目實訓—設計用戶註冊頁面 94

第8章  精通監聽器 96

8.1  使用監聽器 96

8.2  監聽方法和對象 97

8.2.1  監聽方法 97

8.2.2  監聽對象 98

8.3  實例方法$watch 101

8.4  項目實訓—使用監聽器設計購物車效果 102

第9章  事件處理 107

9.1  監聽事件 107

9.2  事件處理方法 108

9.3  事件修飾符 111

9.3.1  stop 112

9.3.2  capture 114

9.3.3  self 115

9.3.4  once 117

9.3.5  prevent 118

9.3.6  passive 119

9.4  按鍵修飾符 119

9.5  系統修飾鍵 121

9.6  項目實訓—處理用戶註冊信息 122

第10章  過渡和動畫效果 125

10.1  單元素/組件的過渡和動畫 125

10.1.1  CSS過渡 125

10.1.2  過渡的類名 127

10.1.3  CSS動畫 129

10.1.4  自定義過渡的類名 130

10.1.5  動畫的JavaScript鉤子函數 131

10.2  初始渲染的過渡 135

10.3  多個元素的過渡 136

10.4  列表過渡 137

10.4.1  列表的進入/離開過渡 138

10.4.2  列表的排序過渡 139

10.4.3  列表的交錯過渡 140

10.5  項目實訓—設計折疊菜單的過渡動畫 142

第11章  組件和組合API 145

11.1  組件是什麽 145

11.2  組件的註冊 146

11.2.1  全局註冊 146

11.2.2  局部註冊 147

11.3  使用prop向子組件傳遞數據 147

11.3.1  prop基本用法 148

11.3.2  單向數據流 151

11.3.3  prop驗證 151

11.3.4  非prop的屬性 153

11.4  子組件向父組件傳遞數據 154

11.4.1  監聽子組件事件 155

11.4.2  將原生事件綁定到組件 156

11.4.3  .sync修飾符 158

11.5  插槽 160

11.5.1  插槽基本用法 160

11.5.2  編譯作用域 160

11.5.3  默認內容 161

11.5.4  命名插槽 162

11.5.5  作用域插槽 165

11.5.6  解構插槽prop 166

11.6  什麽是組合API 168

11.7  setup()函數 168

11.8  響應式API 169

11.8.1  reactive()方法和watchEffect()方法 169

11.8.2  ref()方法 170

11.8.3  readonly()方法 171

11.8.4  computed()方法 172

11.8.5  watch()方法 172

11.9  項目實訓—使用組件創建樹狀項目分類 173

第12章  虛擬DOM和render()函數 176

12.1  虛擬DOM 176

12.2  render()函數 177

12.3  創建組件的VNode 180

12.4  使用JavaScript代替模板功能 181

12.4.1  v-if和v-for 181

12.4.2  v-on 182

12.4.3  事件和按鍵修飾符 182

12.4.4  插槽 183

12.5  函數式組件 185

12.6  JSX 185

12.7  項目實訓—設計商品採購信息列表 186

第13章  精通Vue CLI和Vite 189

13.1  腳手架的組件 189

13.2  腳手架環境搭建 190

13.3  安裝腳手架 191

13.4  創建項目 192

13.4.1  使用命令 192

13.4.2  使用圖形化界面 195

13.5  分析項目結構 196

13.6  配置scss、less和stuly 198

13.7  配置文件gackage.json 201

13.8  Vue.js 3.x新增的開發構建工具Vite 202

第14章  使用Vue Router開發單頁面應用 205

14.1  使用Vue Router 205

14.1.1  在HTML頁面使用路由 205

14.1.2  在項目中使用路由 210

14.2  命名路由 211

14.3  命名視圖 213

14.4  路由傳參 217

14.5  編程式導航 222

14.6  組件與Vue Router之間解耦 226

14.6.1  布爾模式 226

14.6.2  對象模式 229

14.6.3  函數模式 232

第15章  使用axios與服務器通信 235

15.1  什麽是axios 235

15.2  安裝axios 236

15.3  基本用法 236

15.3.1  get請求和post請求 236

15.3.2  請求JSON數據 238

15.3.3  跨域請求數據 239

15.3.4  並發請求 241

15.4  axios API 243

15.5  請求配置 244

15.6  創建實例 246

15.7  配置默認選項 246

15.8  攔截器 247

15.9  項目實訓—顯示近7日的天氣情況 248

第16章  使用Vuex管理組件狀態 250

16.1  什麽是Vuex 250

16.2  安裝Vuex 251

16.3  在項目中使用Vuex 252

16.3.1  搭建一個項目 252

16.3.2  state對象 254

16.3.3  getter對象 255

16.3.4  mutation對象 257

16.3.5  action對象 259

第17章  開發網上商城項目 262

17.1  系統功能模塊 262

17.2  系統結構分析 263

17.3  系統運行效果 263

17.4  系統功能模塊設計與實現 264

17.4.1  首頁頭部組件 264

17.4.2  首頁信息模塊 265

17.4.3  用戶註冊與登錄模塊 268

17.4.4  商品模塊 270

17.4.5  購買模塊 276

17.4.6  支付模塊 277

後記 279