Vue.js 3.x 從入門到精通 (視頻教學版)

目    錄

第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.4  Vue.js的發展歷程 4

1.5  Vue.js 3.x的新變化 5

1.6  疑難解惑 6

第2章  搭建開發與調試環境 8

2.1  安裝Vue.js 8

2.1.1  使用CDN方式 8

2.1.2  NPM 9

2.1.3  命令行工具（CLI） 9

2.1.4  使用Vite方式 10

2.2  安裝WebStorm 10

2.3  安裝vue-devtools 14

2.4  第一個Vue.js程序 16

2.5  疑難解惑 19

第3章  熟悉ECMAScript 6的語法 20

3.1  ECMAScript 6介紹 20

3.1.1  ES 6的前世今生 20

3.1.2  為什麽要使用ES 6 21

3.2  塊作用域構造let和const 21

3.3  模板字面量 23

3.3.1  多行字符串 23

3.3.2  字符串占位符 24

3.4  默認參數和rest參數 24

3.5  解構賦值 25

3.6  展開運算符 27

3.7  增強的對象文本 28

3.8  箭頭函數 30

3.9  Promise實現 31

3.10  Classes（類） 32

3.11  Modules（模塊） 33

3.12  疑難解惑 33

第4章  熟悉Vue.js的語法 35

4.1  創建應用程序實例 35

4.2  插值 36

4.3  方法選項 39

4.3.1  使用方法 39

4.3.2  傳遞參數 41

4.3.3  方法之間的調用 42

4.4  指令 43

4.5  縮寫 45

4.6  Vue.js 3.x的新變化——取消構造函數 46

4.7  綜合案例——通過插值語法實現姓名組合 46

4.8  疑難解惑 47

第5章  指令 48

5.1  內置指令 48

5.1.1  v-show 48

5.1.2  v-if/v-else-if/v-else 49

5.1.3  v-for 51

5.1.4  v-bind 63

5.1.5  v-model 64

5.1.6  v-on 65

5.1.7  v-text 66

5.1.8  v-html 67

5.1.9  v-once 68

5.1.10  v-pre 69

5.1.11  v-cloak 69

5.2  自定義指令 70

5.2.1  註冊自定義指令 70

5.2.2  鉤子函數 71

5.2.3  動態指令參數 73

5.3  綜合案例——通過指令實現下拉菜單效果 74

5.4  疑難解惑 76

第6章  計算屬性 77

6.1  使用計算屬性 77

6.2  計算屬性的getter和setter方法 78

6.3  計算屬性的緩存 80

6.4  使用計算屬性代替v-for和v-if 82

6.5  綜合案例——使用計算屬性設計購物車效果 84

6.6  疑難解惑 87

第7章  精通監聽器 88

7.1  使用監聽器 88

7.2  監聽方法 89

7.3  監聽對象 90

7.4  綜合案例——使用監聽器設計購物車效果 93

7.5  疑難解惑 95

第8章  事件處理 96

8.1  監聽事件 96

8.2  事件處理方法 97

8.3  事件修飾符 100

8.3.1  stop 100

8.3.2  capture 102

8.3.3  self 104

8.3.4  once 106

8.3.5  prevent 106

8.3.6  passive 107

8.4  按鍵修飾符 108

8.5  系統修飾鍵 110

8.6  綜合案例——處理用戶註冊信息 111

8.7  疑難解惑 113

第9章  class與style綁定 114

9.1  綁定HTML樣式（class） 114

9.1.1  數組語法 114

9.1.2  對象語法 116

9.1.3  在組件上使用class屬性 120

9.2  綁定內聯樣式（style） 120

9.2.1  對象語法 120

9.2.2  數組語法 123

9.3  綜合案例——設計隔行變色的商品表 124

9.4  疑難解惑 126

第10章  表單輸入綁定 127

10.1  實現雙向數據綁定 127

10.2  單行文本輸入框 127

10.3  多行文本輸入框 128

10.4  復選框 129

10.5  單選按鈕 131

10.6  選擇框 132

10.7  值綁定 134

10.7.1  復選框 135

10.7.2  單選框 135

10.7.3  選擇框的選項 136

10.8  修飾符 137

10.8.1  lazy 137

10.8.2  number 138

10.8.3  trim 139

10.9  綜合案例——設計用戶註冊頁面 139

10.10  疑難解惑 141

第11章  組件和組合API 143

11.1  組件是什麽 143

11.2  組件的註冊 143

11.2.1  全局註冊 144

11.2.2  局部註冊 145

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

11.3.1  prop的基本用法 146

11.3.2  單向數據流 149

11.3.3  prop驗證 150

11.3.4  非prop的屬性 151

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

11.4.1  監聽子組件事件 153

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

11.4.3  .sync修飾符 156

11.5  插槽 158

11.5.1  插槽的基本用法 158

11.5.2  編譯作用域 158

11.5.3  默認內容 159

11.5.4  命名插槽 160

11.5.5  作用域插槽 162

11.5.6  解構插槽prop 164

11.6  Vue.js 3.x的新變化1——組合API 165

11.7  setup()函數 166

11.8  響應式API 167

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

11.8.2  ref()方法 168

11.8.3  readonly()方法 169

11.8.4  computed()方法 170

11.8.5  watch()方法 170

11.9  Vue.js 3.x的新變化2——訪問組件的方式 171

11.10  綜合案例——使用組件創建樹狀項目分類 172

11.11  疑難解惑 173

第12章  過渡和動畫效果 174

12.1  單元素/組件的過渡 174

12.1.1  CSS過渡 174

12.1.2  過渡的類名 176

12.1.3  CSS動畫 179

12.1.4  自定義過渡的類名 180

12.1.5  動畫的JavaScript鉤子函數 181

12.2  初始渲染的過渡 184

12.3  多個元素的過渡 186

12.4  列表過渡 187

12.4.1  列表的進入/離開過渡 187

12.4.2  列表的排序過渡 188

12.4.3  列表的交錯過渡 190

12.5  綜合案例1——商品編號增加器 191

12.6  綜合案例2——設計下拉菜單的過渡動畫 193

12.7  疑難解惑 195

第13章  精通Vue CLI和Vite 196

13.1  腳手架的組件 196

13.2  腳手架環境搭建 197

13.3  安裝腳手架 199

13.4  創建項目 200

13.4.1  使用命令 200

13.4.2  使用圖形化界面 202

13.5  分析項目結構 205

13.6  配置Scss、Less和Stylus 207

13.7  配置文件package.json 209

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

13.9  疑難解惑 212

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

14.1  使用Vue Router 213

14.1.1  在HTML頁面使用路由 213

14.1.2  在項目中使用路由 218

14.2  命名路由 219

14.3  命名視圖 221

14.4  路由傳參 225

14.5  編程式導航 229

14.6  組件與Vue Router間解耦 233

14.6.1  布爾模式 233

14.6.2  對象模式 236

14.6.3  函數模式 239

14.7  疑難解惑 242

第15章  數據請求庫—Axios 243

15.1  什麽是Axios 243

15.2  安裝Axios 244

15.3  基本用法 244

15.3.1  Axios的get請求和post請求 244

15.3.2  請求同域下的JSON數據 246

15.3.3  跨域請求數據 248

15.3.4  並發請求 250

15.4  Axios API 250

15.5  請求配置 251

15.6  創建實例 253

15.7  配置默認選項 253

15.8  攔截器 254

15.9  Vue.js 3.x的新變化——替代Vue.prototype 254

15.10  綜合案例——顯示近7天的天氣情況 255

15.11  疑難解惑 257

第16章  狀態管理—Vuex 258

16.1  什麽是Vuex 258

16.2  安裝Vuex 259

16.3  在項目中使用Vuex 260

16.3.1  搭建一個項目 260

16.3.2  state對象 261

16.3.3  getter對象 262

16.3.4  mutation對象 264

16.3.5  action對象 265

16.4  綜合案例——使用Vuex開發商城購物車功能 268

16.5  疑難解惑 274

第17章  網上購物商城開發實戰 275

17.1  系統功能結構 275

17.2  系統結構分析 276

17.3  系統運行效果 276

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

17.4.1  首頁模塊 277

17.4.2  首頁信息展示模塊 278

17.4.3  用戶登錄模塊 281

17.4.4  商品模塊 283

17.4.5  購買模塊 288

17.4.6  支付模塊 289

第18章  電影購票App開發實戰 292

18.1  腳手架項目的搭建 292

18.2  系統結構 292

18.3  系統運行效果 293

18.4  設計項目組件 294

18.4.1  設計頭部和底部導航組件 294

18.4.2  設計電影頁面組件 295

18.4.3  設計影院頁面組件 302

18.4.4  設計我的頁面組件 304

18.5  設計項目頁面組件及路由配置 305

18.5.1  電影頁面組件及路由 305

18.5.2  影院頁面組件及路由 307

18.5.3  我的頁面組件及路由 307