第1章 Vue.js基礎(chǔ)語(yǔ)法 1
1.1 Vue.js框架簡(jiǎn)介 1
1.1.1 國(guó)內(nèi)外前端主流框架分析 1
1.1.2 Vue.js框架簡(jiǎn)介 2
1.1.3 Vue.js開(kāi)發(fā)編輯器 2
1.1.4 Vue.js安裝 3
1.2 Vue.js語(yǔ)法結(jié)構(gòu) 4
1.2.1 實(shí)例化Vue與Mustache語(yǔ)法 4
1.2.2 雙向數(shù)據(jù)綁定及其原理 6
1.2.3 Vue.js文件中的MVVM 8
第2章 Vue.js指令、事件與計(jì)算屬性 9
2.1 Vue.js基礎(chǔ)指令 9
2.2 事件綁定指令 14
2.3 屬性綁定指令 17
2.4 計(jì)算屬性 21
第3章 過(guò)濾器及組件化開(kāi)發(fā) 25
3.1 過(guò)濾器與生命周期 25
3.1.1 Filter過(guò)濾器 25
3.1.2 LifeCycle生命周期 27
3.2 組件化開(kāi)發(fā) 28
3.2.1 組件化開(kāi)發(fā)的必要性 28
3.2.2 全局組件 28
3.2.3 局部組件 33
3.3 書(shū)店購(gòu)物車(chē)項(xiàng)目實(shí)戰(zhàn) 39

第4章 Webpack、Slot與 Vue CLI腳手架 46
4.1 Webpack模塊化打包工具 46
4.1.1 Webpack的簡(jiǎn)介與安裝 46
4.1.2 Webpack基本配置 48
4.1.3 webpack-dev-server 49
4.1.4 html-webpack-plugin 50
4.1.5 loader 51
4.1.6 babel 52
4.1.7 HTML熱更新 53
4.1.8 圖片資源 54
4.2 Vue CLI 55
4.2.1 Vue CLI的簡(jiǎn)介與安裝 55
4.2.2 Vue CLI創(chuàng)建項(xiàng)目 56
4.2.3 Vue CLI項(xiàng)目預(yù)覽 58
第5章 Vue.js高級(jí)語(yǔ)法 61
5.1 插槽 61
5.1.1 匿名插槽 61
5.1.2 具名插槽 62
5.1.3 作用域插槽 63
5.2 修飾符 64
5.2.1 表單修飾符 64
5.2.2 事件修飾符 65
5.2.3 按鍵修飾符 66
5.3 監(jiān)聽(tīng) 66
5.3.1 普通監(jiān)聽(tīng) 66
5.3.2 立即監(jiān)聽(tīng) 67
5.3.3 深度監(jiān)聽(tīng) 68
5.3.4 deep優(yōu)化 69
5.4 動(dòng)態(tài)組件與組件緩存 70
5.4.1 動(dòng)態(tài)組件 70
5.4.2 KeepAlive緩存組件 71
5.5 Vue.js其他高級(jí)用法 72
第6章 Vuex 76
6.1 DevTools 76
6.2 Vuex 79
6.2.1 Vuex簡(jiǎn)介與安裝 79
6.2.2 Vuex核心概念 80
第7章 路由與請(qǐng)求 85
7.1 路由 85
7.1.1 Vue Router簡(jiǎn)介與安裝 85
7.1.2 路由文件配置 86
7.1.3 路由跳轉(zhuǎn) 87
7.1.4 導(dǎo)航守衛(wèi) 88
7.2 請(qǐng)求 90
第8章 Vue.js 3.0新增語(yǔ)法 93
8.1 Vue.js?3.0起步 93
8.2 Vue.js?3.0新增語(yǔ)法 94
8.2.1 Composition API 94
8.2.2 Provide與Inject 98
8.2.3 Teleport 98
8.2.4 Suspense 99
8.2.5 Fragment 100
8.2.6 TreeShaking 101
8.2.7 Performance提升 102
8.2.8 生命周期 102
第9章 項(xiàng)目一：Vue.js?2.0全家桶 Element開(kāi)發(fā)后臺(tái)管理系統(tǒng) 103
9.1 創(chuàng)建項(xiàng)目與添加Element模塊 103
9.2 項(xiàng)目初始化 104
9.3 登錄組件的初步引入及使用 105
9.4 登錄組件的初步完善 106
9.4.1 登錄頁(yè)面 106
9.4.2 覆蓋Element UI樣式的正確寫(xiě)法 108
9.4.3 書(shū)寫(xiě)校驗(yàn)規(guī)則 108
9.4.4 自定義校驗(yàn)規(guī)則 109
9.4.5 校驗(yàn) 109
9.4.6 企業(yè)級(jí)項(xiàng)目驗(yàn)證 110
9.4.7 驗(yàn)證碼圖片的獲取 111
9.5 封裝axios的攔截器 111
9.6 完善登錄模塊 112
9.7 錯(cuò)誤提示及其統(tǒng)一處理方案 115
9.8 登錄成功后跳轉(zhuǎn)到首頁(yè) 117
9.9 經(jīng)典三欄布局解決方案 118
9.10 書(shū)寫(xiě)路由守衛(wèi) 120
9.11 手寫(xiě)菜單欄 121
9.11.1 折疊菜單按鈕的初步規(guī)劃 121
9.11.2 菜單展開(kāi)和折疊狀態(tài)的展示 122
9.11.3 是否折疊導(dǎo)航欄 123
9.11.4 修改Vuex中isNavCollapse的值 124
9.11.5 菜單欄折疊卡頓的問(wèn)題 125
9.11.6 折疊過(guò)渡效果的實(shí)現(xiàn) 125
9.11.7 補(bǔ)充Logo和標(biāo)題 126
9.11.8 定義初始數(shù)據(jù)導(dǎo)航 126
9.11.9 菜單實(shí)現(xiàn)路由跳轉(zhuǎn) 128
9.12 統(tǒng)一處理請(qǐng)求后的code==200的情況 129
9.13 動(dòng)態(tài)生成菜單欄 131
9.13.1 請(qǐng)求獲取用戶菜單列表 131
9.13.2 分析思路 134
9.13.3 處理menuData數(shù)組 135
9.14 修改二級(jí)菜單欄的樣式補(bǔ)充 137
9.15 圖標(biāo)處理 138
9.16 認(rèn)證失敗處理 139
9.17 配置子路由（內(nèi)容部分） 139
9.18 動(dòng)態(tài)添加子路由規(guī)則 140
9.19 添加路由切換的過(guò)渡動(dòng)畫(huà) 142
9.20 面包屑處理 143
9.20.1 渲染和樣式初步處理 143
9.20.2 title的收集 144
9.20.3 在面包屑組件中展示title 145
9.20.4 解決網(wǎng)址欄跳轉(zhuǎn)但視圖不更新的情況 145
9.21 404頁(yè)面的處理 146
9.22 刪除token 147
9.23 用戶信息處理 147
9.23.1 登錄成功獲取用戶信息 147
9.23.2 下拉菜單及退出登錄 150
9.24 標(biāo)簽欄處理 151
9.24.1 初步布局 151
9.24.2 組織tags數(shù)組 152
9.24.3 當(dāng)前樣式的處理 153
9.24.4 跳轉(zhuǎn)處理 155
9.24.5 刪除標(biāo)簽 155
9.24.6 右擊出現(xiàn)快捷菜單 156
9.24.7 菜單項(xiàng)現(xiàn)實(shí)邏輯的控制 156
9.24.8 靜動(dòng)態(tài)路由的區(qū)分 158
9.24.9 關(guān)閉標(biāo)簽欄 159
9.24.10 根據(jù)單擊的項(xiàng)目對(duì)tags進(jìn)行操作 160
9.25 表格處理 161
9.26 分頁(yè)處理 164
9.27 導(dǎo)出文件與上傳文件的處理 165
9.27.1 導(dǎo)出文件 165
9.27.2 上傳文件 166
第10章 Git介紹 169
10.1 Git的基本使用 170
10.2 Git Flow工作流模型 174
10.3 Git拓展 176
第11章 項(xiàng)目二：大型PC商城 182
11.1 項(xiàng)目準(zhǔn)備 182
11.2 網(wǎng)站數(shù)據(jù)請(qǐng)求模塊 183
11.3 頭部組件 186
11.3.1 版心樣式 186
11.3.2 頭部組件布局 186
11.4 導(dǎo)航組件 188
11.4.1 基本布局 188
11.4.2 搜索框布局 189
11.4.3 路由配置及導(dǎo)航項(xiàng)當(dāng)前樣式 190
11.5 登錄模塊布局 192
11.5.1 模態(tài)窗口的書(shū)寫(xiě) 192
11.5.2 設(shè)置單擊展示模態(tài)窗口 193
11.5.3 單擊關(guān)閉模態(tài)窗口 195
11.5.4 單擊標(biāo)題欄的切換效果 196
11.5.5 表單基本布局 197
11.6 拼圖驗(yàn)證滑塊 199
11.7 單擊獲取驗(yàn)證碼按鈕的邏輯 201
11.7.1 邏輯分析 201
11.7.2 判斷手機(jī)號(hào)格式 201
11.7.3 倒計(jì)時(shí)及其展示 202
11.7.4 連續(xù)單擊倒計(jì)時(shí)Bug 203
11.7.5 抽取工具函數(shù) 204
11.7.6 發(fā)起獲取驗(yàn)證碼請(qǐng)求 205
11.7.7 請(qǐng)求成功回調(diào)函數(shù)的完善 206
11.8 手機(jī)號(hào)碼登錄邏輯分析 207
11.8.1 抽取前兩個(gè)驗(yàn)證的代碼 207
11.8.2 發(fā)起登錄請(qǐng)求 208
11.8.3 登錄成功后的邏輯 209
11.8.4 購(gòu)物車(chē)按鈕的布局 210
11.8.5 購(gòu)物車(chē)按鈕展示（登錄狀態(tài)）分析 211
11.9 提示組件的封裝 212
11.9.1 icon圖標(biāo)的使用 212
11.9.2 Toast組件的初步封裝與使用 213
11.9.3 Toast組件展示 215
11.9.4 Toast組件的進(jìn)場(chǎng)離場(chǎng)效果 216
11.9.5 封裝Toast的屬性 217
11.9.6 Toast組件自動(dòng)關(guān)閉的處理 218
11.9.7 總結(jié)：提示框組件的使用 219
11.10 微信掃碼登錄微信登錄二維碼的獲取與展示 220
11.10.1 獲取微信二維碼 220
11.10.2 微信二維碼樣式調(diào)整 220
11.11 微信掃碼登錄用臨時(shí)票據(jù)code換取token 221
11.12 手機(jī)驗(yàn)證碼登錄 223
11.13 路由監(jiān)聽(tīng)及其應(yīng)用 223
11.14 組件重載 225
11.15 獲取登錄用戶信息 226
11.16 用戶信息渲染 227
11.17 刪除token后的用戶信息初始化 230
11.18 首頁(yè)布局的套用 230
11.19 詳情頁(yè)的處理 240
11.20 單擊加入購(gòu)物車(chē) 247
11.21 全部商品頁(yè)面 248
11.21.1 結(jié)構(gòu)樣式套用 248
11.21.2 商品列表渲染 250
11.21.3 選項(xiàng)數(shù)據(jù)的分析和渲染 251
11.21.4 單擊選項(xiàng)，切換商品列表 252
11.21.5 搜索框事件 253
11.22 導(dǎo)航守衛(wèi) 254
11.22.1 全局導(dǎo)航守衛(wèi) 254
11.22.2 組件內(nèi)部導(dǎo)航守衛(wèi) 255
11.23 個(gè)人中心購(gòu)物車(chē)頁(yè)面 255
11.24 404處理 266
11.25 滾動(dòng)到底部加載更多 266
11.26 跨域配置 269
11.27 項(xiàng)目環(huán)境變量配置 270

　　
IV

V