第1章快速進入Vue.js的世界 1
1.1前端開發技術的發展 1
1.2MV*模式 2
1.2.1MVC模式 2
1.2.2MVVM模式 2
1.3Vue.js概述 3
1.4Vue.js的發展歷程 5
1.5Vue.js3.0的新變化 5
1.6疑難解惑 7
第2章搭建開發與調試環境 8
2.1安裝Vue.js 8
2.1.1使用CDN方式 8
2.1.2NPM 9
2.1.3命令行工具（CLI） 9
2.1.4使用Vite方式 10
2.2安裝WebStorm 10
2.3安裝vue-devtools 15
2.4第一個Vue.js程序 17
2.5疑難解惑 20
第3章熟悉ECMAScript6語法 21
3.1ECMAScript6介紹 21
3.1.1ES6的前世今生 21
3.1.2為什么要使用ES6 22
3.2塊作用域構造let和const 22
3.3模板字面量 24
3.3.1Multi-lineStrings（多行字符串） 24
3.3.2字符串占位符 24
3.4默認參數和rest參數 24
3.5解構賦值 25
3.6展開運算符 26
3.7增強的對象文本 27
3.8箭頭函數 29
3.9Promise實現 30
3.10Classes（類） 30
3.11Modules（模塊） 31
3.12精簡壓縮生產環境的webpack 31
3.12.1webpack是什么 31
3.12.2配置一個完整項目的webpack 32
3.13疑難解惑 33
第4章熟悉Vue.js的語法 35
4.1創建應用程序實例 35
4.2插值 37
4.3方法選項 40
4.3.1使用方法 40
4.3.2傳遞參數 41
4.3.3方法之間調用 42
4.4生命周期鉤子函數 43
4.4.1認識生命周期鉤子函數 44
4.4.2created和mouted 46
4.5指令 47
4.6縮寫 49
4.7Vue.js3.0的新變化——取消構造函數 50
4.8疑難解惑 50
第5章指令 52
5.1內置指令 52
5.1.1v-show 52
5.1.2v-if/v-else-if/v-else 53
5.1.3v-for 55
5.1.4v-bind 67
5.1.5v-model 68
5.1.6v-on 70
5.1.7v-text 71
5.1.8v-html 72
5.1.9v-once 73
5.1.10v-pre 73
5.1.11v-cloak 74
5.2自定義指令 75
5.2.1注冊自定義指令 75
5.2.2鉤子函數 76
5.2.3動態指令參數 78
5.3綜合案例——通過指令實現下拉菜單效果 79
5.4疑難解惑 82
第6章計算屬性 83
6.1使用計算屬性 83
6.2計算屬性的getter和setter方法 85
6.3計算屬性的緩存 86
6.4使用計算屬性代替v-for和v-if 89
6.5綜合案例——使用計算屬性設計購物車效果 90
6.6疑難解惑 93
第7章精通監聽器 94
7.1使用監聽器 94
7.2監聽方法 95
7.3監聽對象 96
7.4綜合案例——使用監聽器設計購物車效果 99
7.5疑難解惑 101
第8章事件處理 102
8.1監聽事件 102
8.2事件處理方法 103
8.3事件修飾符 106
8.3.1stop 107
8.3.2capture 109
8.3.3self 111
8.3.4once 112
8.3.5prevent 113
8.3.6passive 114
8.4按鍵修飾符 114
8.5系統修飾鍵 117
8.6綜合案例——處理用戶注冊信息 118
8.7疑難解惑 119
第9章class與style綁定 120
9.1綁定HTML樣式（class） 120
9.1.1數組語法 120
9.1.2對象語法 122
9.1.3用在組件上 126
9.2綁定內聯樣式（style） 126
9.2.1對象語法 126
9.2.2數組語法 129
9.3綜合案例——設計隔行變色的商品表 130
9.4疑難解惑 132
第10章表單輸入綁定 133
10.1實現雙向數據綁定 133
10.2單行文本輸入框 133
10.3多行文本輸入框 134
10.4復選框 135
10.5單選按鈕 137
10.6選擇框 138
10.7值綁定 140
10.7.1復選框 141
10.7.2單選框 141
10.7.3選擇框的選項 142
10.8修飾符 143
10.8.1lazy 143
10.8.2number 144
10.8.3trim 145
10.9綜合案例——設計用戶注冊頁面 145
10.10疑難解惑 147
第11章組件和組合API 149
11.1組件是什么 149
11.2組件的注冊 150
11.2.1全局注冊 150
11.2.2局部注冊 151
11.3使用prop向子組件傳遞數據 152
11.3.1prop基本用法 152
11.3.2單向數據流 155
11.3.3prop驗證 156
11.3.4非prop的屬性 157
11.4子組件向父組件傳遞數據 159
11.4.1監聽子組件事件 159
11.4.2將原生事件綁定到組件 161
11.4.3.sync修飾符 162
11.5插槽 164
11.5.1插槽基本用法 164
11.5.2編譯作用域 165
11.5.3默認內容 165
11.5.4命名插槽 166
11.5.5作用域插槽 169
11.5.6解構插槽prop 171
11.6Vue.js3.0的新變化1——組合API 172
11.7setup()函數 173
11.8響應式API 174
11.8.1reactive()方法和watchEffect()方法 174
11.8.2ref()方法 175
11.8.3readonly()方法 176
11.8.4computed()方法 176
11.8.5watch()方法 177
11.9Vue.js3.0的新變化2——訪問組件的方式 178
11.10綜合案例——使用組件創建樹狀項目分類 179
11.11疑難解惑 180
第12章過渡和動畫效果 181
12.1單元素/組件的過渡 181
12.1.1CSS過渡 181
12.1.2過渡的類名 183
12.1.3CSS動畫 186
12.1.4自定義過渡的類名 187
12.1.5動畫的JavaScript鉤子函數 188
12.2初始渲染的過渡 191
12.3多個元素的過渡 193
12.4列表過渡 194
12.4.1列表的進入/離開過渡 194
12.4.2列表的排序過渡 195
12.4.3列表的交錯過渡 197
12.5綜合案例1——商品編號增加器 198
12.6綜合案例2——設計下拉菜單的過渡動畫 200
12.7疑難解惑 202
第13章精通VueCLI和Vite 203
13.1腳手架的組件 203
13.2腳手架環境搭建 204
13.3安裝腳手架 207
13.4創建項目 207
13.4.1使用命令 207
13.4.2使用圖形化界面 210
13.5分析項目結構 214
13.6配置Scss、Less和Stuly 216
13.7配置文件package.json 219
13.8Vue3.0新增開發構建工具——Vite 220
13.9疑難解惑 222
第14章使用VueRouter開發單頁面應用 223
14.1使用VueRouter 223
14.1.1HTML頁面使用路由 223
14.1.2項目中使用路由 228
14.2命名路由 230
14.3命名視圖 232
14.4路由傳參 236
14.5編程式導航 240
14.6組件與VueRouter間解耦 244
14.6.1布爾模式 244
14.6.2對象模式 247
14.6.3函數模式 250
14.7疑難解惑 251
第15章數據請求庫—axios 252
15.1什么是axios 252
15.2安裝axios 253
15.3基本用法 253
15.3.1axios的get請求和post請求 253
15.3.2請求JSON數據 255
15.3.3跨域請求數據 256
15.3.4并發請求 258
15.4使用axios創建請求 259
15.5請求配置 260
15.6創建實例 263
15.7配置默認選項 263
15.8攔截器 264
15.9Vue.js3.0的新變化—替代Vue.prototype 264
15.10綜合案例—顯示近7日的天氣情況 265
15.11疑難解惑 267
第16章狀態管理—Vuex 268
16.1什么是Vuex 268
16.2安裝Vuex 269
16.3在項目中使用Vuex 270
16.3.1搭建一個項目 270
16.3.2state對象 273
16.3.3getter對象 274
16.3.4mutation對象 276
16.3.5action對象 278
16.4疑難解惑 280
第17章網上購物商城開發實戰 282
17.1系統功能結構 282
17.2系統結構分析 283
17.3系統運行效果 283
17.4系統功能模塊設計與實現 284
17.4.1首頁模塊 284
17.4.2首頁信息展示模塊 285
17.4.3用戶登錄模塊 288
17.4.4商品模塊 290
17.4.5購買模塊 295
17.4.6支付模塊 297
第18章電影購票APP開發實戰 299
18.1腳手架項目的搭建 299
18.2系統結構 300
18.3系統運行效果 300
18.4設計項目組件 302
18.4.1設計頭部和底部導航組件 302
18.4.2設計電影頁面組件 303
18.4.3設計影院頁面組件 310
18.4.4設計我的頁面組件 312
18.5設計項目頁面組件及路由配置 313
18.5.1電影頁面組件及路由 313
18.5.2影院頁面組件及路由 314
18.5.3我的頁面組件及路由 315