Vue.js 3.x高效前端開(kāi)發(fā)（視頻教學(xué)版）

第1章 認(rèn)識(shí)Vue.js 3.x 1
1.1 Web前端技術(shù)的發(fā)展歷程 1
1.1.1 從靜態(tài)向動(dòng)態(tài)轉(zhuǎn)變 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發(fā)展歷程 4
1.3 MV*模式 4
1.3.1 MVC模式 4
1.3.2 MVVM模式 5
第2章 創(chuàng)建Vue.js實(shí)例 6
2.1 安裝vue-devtools 6
2.2 在項(xiàng)目中引入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 項(xiàng)目實(shí)訓(xùn)—我的第一個(gè)Vue.js程序 12
第3章 Vue.js模板語(yǔ)法 16
3.1 創(chuàng)建應(yīng)用程序?qū)嵗?16
3.2 插值 17
3.3 方法選項(xiàng) 19
3.3.1 使用方法 19
3.3.2 傳遞參數(shù) 21
3.3.3 方法之間的調(diào)用 22
3.4 Vue實(shí)例的生命周期 23
3.4.1 認(rèn)識(shí)生命周期鉤子函數(shù) 23
3.4.2 created和mouted 25
3.5 指令 27
第4章 精通指令 29
4.1 常見(jiàn)內(nèi)置指令 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 注冊(cè)自定義指令 53
4.4.2 鉤子函數(shù) 54
4.4.3 動(dòng)態(tài)指令參數(shù) 56
4.5 項(xiàng)目實(shí)訓(xùn)—通過(guò)指令實(shí)現(xiàn)隨機(jī)背景色效果 57
第5章 計(jì)算屬性 59
5.1 計(jì)算屬性的定義 59
5.2 計(jì)算屬性的getter和setter方法 60
5.3 計(jì)算屬性的緩存 62
5.4 計(jì)算屬性代替v-for和v-if 65
5.5 項(xiàng)目實(shí)訓(xùn)—使用計(jì)算屬性設(shè)計(jì)計(jì)算器 66
第6章 v-bind及class與style綁定 68
6.1 綁定HTML樣式class 68
6.1.1 數(shù)組語(yǔ)法 68
6.1.2 對(duì)象語(yǔ)法 70
6.1.3 用在組件上 74
6.2 綁定內(nèi)聯(lián)樣式style 74
6.2.1 對(duì)象語(yǔ)法 74
6.2.2 數(shù)組語(yǔ)法 77
6.3 項(xiàng)目實(shí)訓(xùn)—設(shè)計(jì)隔行變色的水果信息表 78
第7章 表單與v-model雙向綁定 81
7.1 實(shí)現(xiàn)雙向數(shù)據(jù)綁定 81
7.2 單行文本輸入框 81
7.3 多行文本輸入框 82
7.4 復(fù)選框 83
7.5 單選按鈕 85
7.6 選擇框 86
7.7 值綁定 89
7.7.1 復(fù)選框 89
7.7.2 單選框 89
7.7.3 選擇框的選項(xiàng) 90
7.8 修飾符 91
7.8.1 lazy 91
7.8.2 number 92
7.8.3 trim 93
7.9 項(xiàng)目實(shí)訓(xùn)—設(shè)計(jì)用戶注冊(cè)頁(yè)面 94
第8章 精通監(jiān)聽(tīng)器 96
8.1 使用監(jiān)聽(tīng)器 96
8.2 監(jiān)聽(tīng)方法和對(duì)象 97
8.2.1 監(jiān)聽(tīng)方法 97
8.2.2 監(jiān)聽(tīng)對(duì)象 98
8.3 實(shí)例方法$watch 101
8.4 項(xiàng)目實(shí)訓(xùn)—使用監(jiān)聽(tīng)器設(shè)計(jì)購(gòu)物車效果 102
第9章 事件處理 107
9.1 監(jiān)聽(tīng)事件 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 系統(tǒng)修飾鍵 121
9.6 項(xiàng)目實(shí)訓(xùn)—處理用戶注冊(cè)信息 122
第10章 過(guò)渡和動(dòng)畫(huà)效果 125
10.1 單元素/組件的過(guò)渡和動(dòng)畫(huà) 125
10.1.1 CSS過(guò)渡 125
10.1.2 過(guò)渡的類名 127
10.1.3 CSS動(dòng)畫(huà) 129
10.1.4 自定義過(guò)渡的類名 130
10.1.5 動(dòng)畫(huà)的JavaScript鉤子函數(shù) 131
10.2 初始渲染的過(guò)渡 135
10.3 多個(gè)元素的過(guò)渡 136
10.4 列表過(guò)渡 137
10.4.1 列表的進(jìn)入/離開(kāi)過(guò)渡 138
10.4.2 列表的排序過(guò)渡 139
10.4.3 列表的交錯(cuò)過(guò)渡 140
10.5 項(xiàng)目實(shí)訓(xùn)—設(shè)計(jì)折疊菜單的過(guò)渡動(dòng)畫(huà) 142
第11章 組件和組合API 145
11.1 組件是什么 145
11.2 組件的注冊(cè) 146
11.2.1 全局注冊(cè) 146
11.2.2 局部注冊(cè) 147
11.3 使用prop向子組件傳遞數(shù)據(jù) 147
11.3.1 prop基本用法 148
11.3.2 單向數(shù)據(jù)流 151
11.3.3 prop驗(yàn)證 151
11.3.4 非prop的屬性 153
11.4 子組件向父組件傳遞數(shù)據(jù) 154
11.4.1 監(jiān)聽(tīng)子組件事件 155
11.4.2 將原生事件綁定到組件 156
11.4.3 .sync修飾符 158
11.5 插槽 160
11.5.1 插槽基本用法 160
11.5.2 編譯作用域 160
11.5.3 默認(rèn)內(nèi)容 161
11.5.4 命名插槽 162
11.5.5 作用域插槽 165
11.5.6 解構(gòu)插槽prop 166
11.6 什么是組合API 168
11.7 setup()函數(shù) 168
11.8 響應(yīng)式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 項(xiàng)目實(shí)訓(xùn)—使用組件創(chuàng)建樹(shù)狀項(xiàng)目分類 173
第12章 虛擬DOM和render()函數(shù) 176
12.1 虛擬DOM 176
12.2 render()函數(shù) 177
12.3 創(chuàng)建組件的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 函數(shù)式組件 185
12.6 JSX 185
12.7 項(xiàng)目實(shí)訓(xùn)—設(shè)計(jì)商品采購(gòu)信息列表 186
第13章 精通Vue CLI和Vite 189
13.1 腳手架的組件 189
13.2 腳手架環(huán)境搭建 190
13.3 安裝腳手架 191
13.4 創(chuàng)建項(xiàng)目 192
13.4.1 使用命令 192
13.4.2 使用圖形化界面 195
13.5 分析項(xiàng)目結(jié)構(gòu) 196
13.6 配置scss、less和stuly 198
13.7 配置文件gackage.json 201
13.8 Vue.js 3.x新增的開(kāi)發(fā)構(gòu)建工具Vite 202
第14章 使用Vue Router開(kāi)發(fā)單頁(yè)面應(yīng)用 205
14.1 使用Vue Router 205
14.1.1 在HTML頁(yè)面使用路由 205
14.1.2 在項(xiàng)目中使用路由 210
14.2 命名路由 211
14.3 命名視圖 213
14.4 路由傳參 217
14.5 編程式導(dǎo)航 222
14.6 組件與Vue Router之間解耦 226
14.6.1 布爾模式 226
14.6.2 對(duì)象模式 229
14.6.3 函數(shù)模式 232
第15章 使用axios與服務(wù)器通信 235
15.1 什么是axios 235
15.2 安裝axios 236
15.3 基本用法 236
15.3.1 get請(qǐng)求和post請(qǐng)求 236
15.3.2 請(qǐng)求JSON數(shù)據(jù) 238
15.3.3 跨域請(qǐng)求數(shù)據(jù) 239
15.3.4 并發(fā)請(qǐng)求 241
15.4 axios API 243
15.5 請(qǐng)求配置 244
15.6 創(chuàng)建實(shí)例 246
15.7 配置默認(rèn)選項(xiàng) 246
15.8 攔截器 247
15.9 項(xiàng)目實(shí)訓(xùn)—顯示近7日的天氣情況 248
第16章 使用Vuex管理組件狀態(tài) 250
16.1 什么是Vuex 250
16.2 安裝Vuex 251
16.3 在項(xiàng)目中使用Vuex 252
16.3.1 搭建一個(gè)項(xiàng)目 252
16.3.2 state對(duì)象 254
16.3.3 getter對(duì)象 255
16.3.4 mutation對(duì)象 257
16.3.5 action對(duì)象 259
第17章 開(kāi)發(fā)網(wǎng)上商城項(xiàng)目 262
17.1 系統(tǒng)功能模塊 262
17.2 系統(tǒng)結(jié)構(gòu)分析 263
17.3 系統(tǒng)運(yùn)行效果 263
17.4 系統(tǒng)功能模塊設(shè)計(jì)與實(shí)現(xiàn) 264
17.4.1 首頁(yè)頭部組件 264
17.4.2 首頁(yè)信息模塊 265
17.4.3 用戶注冊(cè)與登錄模塊 268
17.4.4 商品模塊 270
17.4.5 購(gòu)買模塊 276
17.4.6 支付模塊 277
后記 279