Vue.js 3.x從入門(mén)到精通（視頻教學(xué)版）

第1章  快速進(jìn)入Vue.js的世界 1
1.1  前端開(kāi)發(fā)技術(shù)的發(fā)展 1
1.2  MV*模式 2
1.2.1  MVC模式 2
1.2.2  MVVM模式 2
1.3  Vue.js概述 3
1.4  Vue.js的發(fā)展歷程 4
1.5  Vue.js 3.x的新變化 5
1.6  疑難解惑 6
第2章  搭建開(kāi)發(fā)與調(diào)試環(huán)境 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  第一個(gè)Vue.js程序 16
2.5  疑難解惑 19
第3章  熟悉ECMAScript 6的語(yǔ)法 20
3.1  ECMAScript 6介紹 20
3.1.1  ES 6的前世今生 20
3.1.2  為什么要使用ES 6 21
3.2  塊作用域構(gòu)造let和const 21
3.3  模板字面量 23
3.3.1  多行字符串 23
3.3.2  字符串占位符 24
3.4  默認(rèn)參數(shù)和rest參數(shù) 24
3.5  解構(gòu)賦值 25
3.6  展開(kāi)運(yùn)算符 27
3.7  增強(qiáng)的對(duì)象文本 28
3.8  箭頭函數(shù) 30
3.9  Promise實(shí)現(xiàn) 31
3.10  Classes（類） 32
3.11  Modules（模塊） 33
3.12  疑難解惑 33
第4章  熟悉Vue.js的語(yǔ)法 35
4.1  創(chuàng)建應(yīng)用程序?qū)嵗?35
4.2  插值 36
4.3  方法選項(xiàng) 39
4.3.1  使用方法 39
4.3.2  傳遞參數(shù) 41
4.3.3  方法之間的調(diào)用 42
4.4  指令 43
4.5  縮寫(xiě) 45
4.6  Vue.js 3.x的新變化——取消構(gòu)造函數(shù) 46
4.7  綜合案例——通過(guò)插值語(yǔ)法實(shí)現(xiàn)姓名組合 46
4.8  疑難解惑 47
第5章  指令 48
5.1  內(nèi)置指令 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  注冊(cè)自定義指令 70
5.2.2  鉤子函數(shù) 71
5.2.3  動(dòng)態(tài)指令參數(shù) 73
5.3  綜合案例——通過(guò)指令實(shí)現(xiàn)下拉菜單效果 74
5.4  疑難解惑 76
第6章  計(jì)算屬性 77
6.1  使用計(jì)算屬性 77
6.2  計(jì)算屬性的getter和setter方法 78
6.3  計(jì)算屬性的緩存 80
6.4  使用計(jì)算屬性代替v-for和v-if 82
6.5  綜合案例——使用計(jì)算屬性設(shè)計(jì)購(gòu)物車效果 84
6.6  疑難解惑 87
第7章  精通監(jiān)聽(tīng)器 88
7.1  使用監(jiān)聽(tīng)器 88
7.2  監(jiān)聽(tīng)方法 89
7.3  監(jiān)聽(tīng)對(duì)象 90
7.4  綜合案例——使用監(jiān)聽(tīng)器設(shè)計(jì)購(gòu)物車效果 93
7.5  疑難解惑 95
第8章  事件處理 96
8.1  監(jiān)聽(tīng)事件 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  系統(tǒng)修飾鍵 110
8.6  綜合案例——處理用戶注冊(cè)信息 111
8.7  疑難解惑 113
第9章  class與style綁定 114
9.1  綁定HTML樣式（class） 114
9.1.1  數(shù)組語(yǔ)法 114
9.1.2  對(duì)象語(yǔ)法 116
9.1.3  在組件上使用class屬性 120
9.2  綁定內(nèi)聯(lián)樣式（style） 120
9.2.1  對(duì)象語(yǔ)法 120
9.2.2  數(shù)組語(yǔ)法 123
9.3  綜合案例——設(shè)計(jì)隔行變色的商品表 124
9.4  疑難解惑 126
第10章  表單輸入綁定 127
10.1  實(shí)現(xiàn)雙向數(shù)據(jù)綁定 127
10.2  單行文本輸入框 127
10.3  多行文本輸入框 128
10.4  復(fù)選框 129
10.5  單選按鈕 131
10.6  選擇框 132
10.7  值綁定 134
10.7.1  復(fù)選框 135
10.7.2  單選框 135
10.7.3  選擇框的選項(xiàng) 136
10.8  修飾符 137
10.8.1  lazy 137
10.8.2  number 138
10.8.3  trim 139
10.9  綜合案例——設(shè)計(jì)用戶注冊(cè)頁(yè)面 139
10.10  疑難解惑 141
第11章  組件和組合API 143
11.1  組件是什么 143
11.2  組件的注冊(cè) 143
11.2.1  全局注冊(cè) 144
11.2.2  局部注冊(cè) 145
11.3  使用prop向子組件傳遞數(shù)據(jù) 145
11.3.1  prop的基本用法 146
11.3.2  單向數(shù)據(jù)流 149
11.3.3  prop驗(yàn)證 150
11.3.4  非prop的屬性 151
11.4  子組件向父組件傳遞數(shù)據(jù) 153
11.4.1  監(jiān)聽(tīng)子組件事件 153
11.4.2  將原生事件綁定到組件 155
11.4.3  .sync修飾符 156
11.5  插槽 158
11.5.1  插槽的基本用法 158
11.5.2  編譯作用域 158
11.5.3  默認(rèn)內(nèi)容 159
11.5.4  命名插槽 160
11.5.5  作用域插槽 162
11.5.6  解構(gòu)插槽prop 164
11.6  Vue.js 3.x的新變化1——組合API 165
11.7  setup()函數(shù) 166
11.8  響應(yīng)式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——訪問(wèn)組件的方式 171
11.10  綜合案例——使用組件創(chuàng)建樹(shù)狀項(xiàng)目分類 172
11.11  疑難解惑 173
第12章  過(guò)渡和動(dòng)畫(huà)效果 174
12.1  單元素/組件的過(guò)渡 174
12.1.1  CSS過(guò)渡 174
12.1.2  過(guò)渡的類名 176
12.1.3  CSS動(dòng)畫(huà) 179
12.1.4  自定義過(guò)渡的類名 180
12.1.5  動(dòng)畫(huà)的JavaScript鉤子函數(shù) 181
12.2  初始渲染的過(guò)渡 184
12.3  多個(gè)元素的過(guò)渡 186
12.4  列表過(guò)渡 187
12.4.1  列表的進(jìn)入/離開(kāi)過(guò)渡 187
12.4.2  列表的排序過(guò)渡 188
12.4.3  列表的交錯(cuò)過(guò)渡 190
12.5  綜合案例1——商品編號(hào)增加器 191
12.6  綜合案例2——設(shè)計(jì)下拉菜單的過(guò)渡動(dòng)畫(huà) 193
12.7  疑難解惑 195
第13章  精通Vue CLI和Vite 196
13.1  腳手架的組件 196
13.2  腳手架環(huán)境搭建 197
13.3  安裝腳手架 199
13.4  創(chuàng)建項(xiàng)目 200
13.4.1  使用命令 200
13.4.2  使用圖形化界面 202
13.5  分析項(xiàng)目結(jié)構(gòu) 205
13.6  配置Scss、Less和Stylus 207
13.7  配置文件package.json 209
13.8  Vue.js 3.x新增的開(kāi)發(fā)構(gòu)建工具——Vite 210
13.9  疑難解惑 212
第14章  使用Vue Router開(kāi)發(fā)單頁(yè)面應(yīng)用 213
14.1  使用Vue Router 213
14.1.1  在HTML頁(yè)面使用路由 213
14.1.2  在項(xiàng)目中使用路由 218
14.2  命名路由 219
14.3  命名視圖 221
14.4  路由傳參 225
14.5  編程式導(dǎo)航 229
14.6  組件與Vue Router間解耦 233
14.6.1  布爾模式 233
14.6.2  對(duì)象模式 236
14.6.3  函數(shù)模式 239
14.7  疑難解惑 242
第15章  數(shù)據(jù)請(qǐng)求庫(kù)—Axios 243
15.1  什么是Axios 243
15.2  安裝Axios 244
15.3  基本用法 244
15.3.1  Axios的get請(qǐng)求和post請(qǐng)求 244
15.3.2  請(qǐng)求同域下的JSON數(shù)據(jù) 246
15.3.3  跨域請(qǐng)求數(shù)據(jù) 248
15.3.4  并發(fā)請(qǐng)求 250
15.4  Axios API 250
15.5  請(qǐng)求配置 251
15.6  創(chuàng)建實(shí)例 253
15.7  配置默認(rèn)選項(xiàng) 253
15.8  攔截器 254
15.9  Vue.js 3.x的新變化——替代Vue.prototype 254
15.10  綜合案例——顯示近7天的天氣情況 255
15.11  疑難解惑 257
第16章  狀態(tài)管理—Vuex 258
16.1  什么是Vuex 258
16.2  安裝Vuex 259
16.3  在項(xiàng)目中使用Vuex 260
16.3.1  搭建一個(gè)項(xiàng)目 260
16.3.2  state對(duì)象 261
16.3.3  getter對(duì)象 262
16.3.4  mutation對(duì)象 264
16.3.5  action對(duì)象 265
16.4  綜合案例——使用Vuex開(kāi)發(fā)商城購(gòu)物車功能 268
16.5  疑難解惑 274
第17章  網(wǎng)上購(gòu)物商城開(kāi)發(fā)實(shí)戰(zhàn) 275
17.1  系統(tǒng)功能結(jié)構(gòu) 275
17.2  系統(tǒng)結(jié)構(gòu)分析 276
17.3  系統(tǒng)運(yùn)行效果 276
17.4  系統(tǒng)功能模塊設(shè)計(jì)與實(shí)現(xiàn) 277
17.4.1  首頁(yè)模塊 277
17.4.2  首頁(yè)信息展示模塊 278
17.4.3  用戶登錄模塊 281
17.4.4  商品模塊 283
17.4.5  購(gòu)買模塊 288
17.4.6  支付模塊 289
第18章  電影購(gòu)票App開(kāi)發(fā)實(shí)戰(zhàn) 292
18.1  腳手架項(xiàng)目的搭建 292
18.2  系統(tǒng)結(jié)構(gòu) 292
18.3  系統(tǒng)運(yùn)行效果 293
18.4  設(shè)計(jì)項(xiàng)目組件 294
18.4.1  設(shè)計(jì)頭部和底部導(dǎo)航組件 294
18.4.2  設(shè)計(jì)電影頁(yè)面組件 295
18.4.3  設(shè)計(jì)影院頁(yè)面組件 302
18.4.4  設(shè)計(jì)我的頁(yè)面組件 304
18.5  設(shè)計(jì)項(xiàng)目頁(yè)面組件及路由配置 305
18.5.1  電影頁(yè)面組件及路由 305
18.5.2  影院頁(yè)面組件及路由 307
18.5.3  我的頁(yè)面組件及路由 307