Vue.js從入門到精通

第1篇 基礎(chǔ)知識(shí)
第1章 初識(shí)Vue.js 2
視頻講解：19分鐘
1.1 什么是Vue.js 2
1.1.1 Vue.js簡介 2
1.1.2 MVVM開發(fā)模式 3
1.1.3 Vue.js的特點(diǎn) 3
1.2 安裝Vue.js 4
1.2.1 使用CDN 4
1.2.2 使用NPM 4
1.2.3 使用Vue CLI 5
1.3 Vue.js 3.0的新特性 5
1.4 WebStorm的下載和安裝 6
1.4.1 WebStorm的下載 6
1.4.2 WebStorm的安裝 7
1.5 第一個(gè)Vue.js程序 10
1.6 實(shí)踐與練習(xí) 14
第2章 ECMAScript 6語法介紹 15
視頻講解：74分鐘
2.1 塊級(jí)聲明 15
2.1.1 let聲明 16
2.1.2 const聲明 16
2.2 模板字面量 17
2.2.1 多行字符串 17
2.2.2 字符串占位符 17
2.3 默認(rèn)參數(shù)和rest參數(shù) 18
2.3.1 默認(rèn)參數(shù) 18
2.3.2 rest參數(shù) 18
2.4 解構(gòu)賦值 20
2.4.1 對(duì)象解構(gòu) 20
2.4.2 數(shù)組解構(gòu) 21
2.5 展開運(yùn)算符 21
2.6 對(duì)象字面量語法擴(kuò)展 22
2.6.1 對(duì)象初始化的簡寫 23
2.6.2 對(duì)象方法的簡寫 23
2.6.3 動(dòng)態(tài)屬性名 24
2.7 箭頭函數(shù) 24
2.7.1 語法 24
2.7.2 箭頭函數(shù)中的this 25
2.8 Promise 26
2.9 類 27
2.9.1 創(chuàng)建類和實(shí)例 27
2.9.2 類的構(gòu)造函數(shù) 28
2.9.3 在類中添加方法 29
2.9.4 類的繼承 31
2.9.5 靜態(tài)成員 31
2.10 模塊 32
2.10.1 模塊概述 32
2.10.2 ES6中的模塊 33
2.11 實(shí)踐與練習(xí) 36
第3章 Vue實(shí)例與數(shù)據(jù)綁定 38
視頻講解：36分鐘
3.1 應(yīng)用程序?qū)嵗斑x項(xiàng) 38
3.1.1 數(shù)據(jù) 39
3.1.2 方法 39
3.1.3 生命周期鉤子 40
3.2 插值 42
3.2.1 文本插值 42
3.2.2 插入HTML 43
3.2.3 綁定屬性 44
3.2.4 使用表達(dá)式 45
3.3 指令 47
3.3.1 參數(shù) 47
3.3.2 動(dòng)態(tài)參數(shù) 47
3.3.3 修飾符 48
3.4 實(shí)踐與練習(xí) 48
第4章 條件判斷指令 49
視頻講解：30分鐘
4.1 v-if指令 49
4.1.1 基本用法 49
4.1.2 判斷一組元素 50
4.2 v-else指令 51
4.3 v-else-if指令 53
4.4 v-show指令 55
4.5 如何選擇v-if和v-show 56
4.6 實(shí)踐與練習(xí) 57
第5章 v-for指令 58
視頻講解：56分鐘
5.1 遍歷數(shù)組 58
5.1.1 基本用法 58
5.1.2 循環(huán)一組元素 61
5.1.3 更新數(shù)組 62
5.2 遍歷對(duì)象 65
5.2.1 基本用法 65
5.2.2 向?qū)ο笾刑砑禹憫?yīng)式屬性 67
5.3 遍歷整數(shù) 68
5.4 key屬性 70
5.5 實(shí)踐與練習(xí) 71
第6章 計(jì)算屬性和監(jiān)聽屬性 72
視頻講解：47分鐘
6.1 計(jì)算屬性 72
6.1.1 計(jì)算屬性簡介 72
6.1.2 計(jì)算屬性的應(yīng)用 73
6.1.3 計(jì)算屬性的getter和setter 74
6.1.4 計(jì)算屬性的緩存 77
6.2 監(jiān)聽屬性 79
6.2.1 監(jiān)聽屬性簡介 79
6.2.2 監(jiān)聽屬性的應(yīng)用 80
6.2.3 監(jiān)聽對(duì)象 81
6.3 計(jì)算屬性和監(jiān)聽屬性的比較 82
6.4 實(shí)踐與練習(xí) 83
第2篇 核心技術(shù)
第7章 元素樣式綁定 86
視頻講解：38分鐘
7.1 class綁定 86
7.1.1 對(duì)象語法 86
7.1.2 數(shù)組語法 94
7.2 style綁定 96
7.2.1 對(duì)象語法 96
7.2.2 數(shù)組語法 99
7.3 實(shí)踐與練習(xí) 101
第8章 事件處理 102
視頻講解：34分鐘
8.1 監(jiān)聽事件 102
8.2 事件處理方法 103
8.2.1 綁定方法 103
8.2.2 使用事件對(duì)象 105
8.2.3 使用內(nèi)聯(lián)語句 107
8.3 修飾符的使用 109
8.3.1 事件修飾符 109
8.3.2 按鍵修飾符 111
8.4 實(shí)踐與練習(xí) 114
第9章 表單元素綁定 116
視頻講解：95分鐘
9.1 文本框綁定 116
9.1.1 單行文本框 117
9.1.2 多行文本框 119
9.2 復(fù)選框綁定 121
9.2.1 單個(gè)復(fù)選框 121
9.2.2 多個(gè)復(fù)選框 124
9.3 單選按鈕綁定 125
9.4 下拉列表框綁定 127
9.4.1 單選列表框 127
9.4.2 多選列表框 130
9.5 值綁定 133
9.5.1 單選按鈕 133
9.5.2 復(fù)選框 134
9.5.3 下拉列表框 135
9.6 修飾符的使用 136
9.6.1 lazy 136
9.6.2 number 137
9.6.3 trim 137
9.7 實(shí)踐與練習(xí) 138
第10章 自定義指令 139
視頻講解：16分鐘
10.1 注冊(cè)自定義指令 139
10.1.1 全局自定義指令 139
10.1.2 局部自定義指令 140
10.2 鉤子函數(shù) 141
10.3 綁定值的類型 145
10.3.1 綁定數(shù)值 145
10.3.2 綁定字符串 146
10.3.3 綁定對(duì)象字面量 147
10.4 實(shí)踐與練習(xí) 148
第11章 組件 149
視頻講解：118分鐘
11.1 注冊(cè)組件 149
11.1.1 注冊(cè)全局組件 150
11.1.2 注冊(cè)局部組件 152
11.2 向子組件傳遞數(shù)據(jù) 153
11.2.1 Prop基本用法 153
11.2.2 數(shù)據(jù)驗(yàn)證 160
11.3 監(jiān)聽子組件事件 163
11.3.1 監(jiān)聽自定義事件 163
11.3.2 監(jiān)聽原生事件 166
11.4 插槽的使用 168
11.4.1 基礎(chǔ)用法 168
11.4.2 編譯作用域 169
11.4.3 默認(rèn)內(nèi)容 170
11.4.4 命名插槽 171
11.4.5 作用域插槽 174
11.5 混入 178
11.5.1 基礎(chǔ)用法 178
11.5.2 選項(xiàng)合并 179
11.6 動(dòng)態(tài)組件 182
11.6.1 動(dòng)態(tài)組件的用法 182
11.6.2 緩存效果 185
11.7 實(shí)踐與練習(xí) 190
第12章 組合API 191
視頻講解：31分鐘
12.1 什么是組合API 191
12.2 setup()函數(shù) 192
12.3 響應(yīng)式API 194
12.3.1 reactive()方法 194
12.3.2 watchEffect()方法 195
12.3.3 ref()方法 195
12.3.4 computed()方法 197
12.3.5 watch()方法 198
12.4 生命周期鉤子函數(shù) 200
12.5 使用ref獲取DOM元素 200
12.6 實(shí)踐與練習(xí) 202
第13章 過渡和動(dòng)畫效果 203
視頻講解：83分鐘
13.1 單元素過渡 203
13.1.1 CSS過渡 203
13.1.2 過渡的類名 205
13.1.3 自定義過渡的類名 206
13.1.4 CSS動(dòng)畫 208
13.1.5 使用JavaScript鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫 209
13.2 多元素過渡 213
13.2.1 多元素過渡的用法 213
13.2.2 設(shè)置元素的key屬性 214
13.2.3 過渡模式的設(shè)置 217
13.3 多組件過渡 218
13.4 列表過渡 222
13.5 實(shí)踐與練習(xí) 224
第14章 渲染函數(shù) 226
視頻講解：22分鐘
14.1 什么是虛擬DOM 226
14.2 render()函數(shù)的使用 227
14.2.1 基本用法 227
14.2.2 h()函數(shù) 230
14.3 使用JavaScript代替模板功能 233
14.4 實(shí)踐與練習(xí) 238
第3篇 高級(jí)應(yīng)用
第15章 使用Vue Router實(shí)現(xiàn)路由 240
視頻講解：42分鐘
15.1 路由基礎(chǔ) 240
15.1.1 引入Vue Router 241
15.1.2 基本用法 241
15.1.3 動(dòng)態(tài)路由匹配 244
15.1.4 命名路由 245
15.2 編程式導(dǎo)航 245
15.3 嵌套路由 249
15.4 命名視圖 254
15.5 高級(jí)用法 257
15.5.1 beforeEach鉤子函數(shù) 257
15.5.2 scrollBehavior方法 261
15.6 實(shí)踐與練習(xí) 263
第16章 使用axios實(shí)現(xiàn)Ajax請(qǐng)求 264
視頻講解：33分鐘
16.1 什么是axios 264
16.2 引入axios 265
16.3 發(fā)送get請(qǐng)求 265
16.4 發(fā)送post請(qǐng)求 267
16.5 實(shí)踐與練習(xí) 270
第17章 Vue CLI 272
視頻講解：17分鐘
17.1 Vue CLI簡介 272
17.2 Vue CLI的安裝 273
17.3 創(chuàng)建項(xiàng)目 274
17.3.1 使用vue create命令 274
17.3.2 使用圖形界面 278
17.4 項(xiàng)目結(jié)構(gòu) 279
17.5 編寫一個(gè)單文件組件 281
17.6 實(shí)踐與練習(xí) 283
第18章 狀態(tài)管理 285
視頻講解：59分鐘
18.1 什么是Vuex 285
18.2 Vuex的組成 286
18.3 Vuex的安裝 287
18.4 在項(xiàng)目中使用Vuex 287
18.4.1 創(chuàng)建store 287
18.4.2 定義state 288
18.4.3 定義getter 291
18.4.4 定義mutation 293
18.4.5 定義action 297
18.5 Vuex應(yīng)用 299
18.6 實(shí)踐與練習(xí) 304
第4篇 項(xiàng)目開發(fā)
第19章 51購商城 308
視頻講解：12分鐘
19.1 項(xiàng)目的設(shè)計(jì)思路 309
19.1.1 項(xiàng)目概述 309
19.1.2 界面預(yù)覽 309
19.1.3 功能結(jié)構(gòu) 311
19.1.4 業(yè)務(wù)流程 312
19.1.5 文件夾組織結(jié)構(gòu) 312
19.2 商城主頁 313
19.2.1 主頁的設(shè)計(jì) 313
19.2.2 頂部區(qū)和底部區(qū)功能 315
19.2.3 商品分類導(dǎo)航功能 318
19.2.4 輪播圖功能 320
19.2.5 商品推薦功能 324
19.3 商品詳情頁面 327
19.3.1 商品詳情頁面的設(shè)計(jì) 327
19.3.2 圖片放大鏡效果 328
19.3.3 商品概要功能 330
19.3.4 “猜你喜歡”功能 333
19.3.5 選項(xiàng)卡切換效果 336
19.4 購物車頁面 338
19.4.1 購物車頁面的設(shè)計(jì) 338
19.4.2 購物車頁面的實(shí)現(xiàn) 338
19.5 付款頁面 341
19.5.1 付款頁面的設(shè)計(jì) 341
19.5.2 付款頁面的實(shí)現(xiàn) 342
19.6 注冊(cè)和登錄頁面 346
19.6.1 注冊(cè)和登錄頁面的設(shè)計(jì) 346
19.6.2 注冊(cè)頁面的實(shí)現(xiàn) 347
19.6.3 登錄頁面的實(shí)現(xiàn) 350