Vue.js前端開發（全案例微課版）

劉榮英在慧文教育集團主要負責計算機系的畢業生項目實訓，擅長網站前端開發技術，包括HTML5、CSS3、JavaScript和前端框架（Bootstrap和Vue.js）。善於引導學生學習，讓學校所學的知識和社會的需求很好地銜接，同時具有豐富的教學經驗和開發經驗。曾做電子貨幣交易系統、 B2C 電子商務平台和眾多企業網站等項目。

第1章 快速搭建開發與調試環境 001
1.1 前端開發的前世今生 001
1.2 MV*模式 002
1.2.1 MVC模式 002
1.2.2 MVVM模式 002
1.3 Vue.js概述 003
1.4 安裝Vue.js 004
1.4.1 使用
引入的方式 004
1.4.2 命令行工具(CLI) 005
1.4.3 NPM 006
1.5 安裝WebStorm 006
1.6 安裝vue-devtools 009
1.7 小試身手——我的個Vue.js程序 010
1.8 新手疑難問題解答 012
第2章 熟悉Vue.js語法 013
2.1 創建Vue實例 013
2.2 data選項 014
2.2.1 new Vue()實例中的data 014
2.2.2 組件中的data 016
2.2.3 多個對像中的data 018
2.3 方法選項 020
2.3.1 使用方法 021
2.3.2 傳遞參數 022
2.3.3 方法之間的調用 022
2.4 生命週期鉤子函數 023
2.4.1 認識生命週期鉤子函數 023
2.4.2 created和mouted 024
2.5 插值 025
2.6 指令 027
2.7 縮寫 029
2.8 新手疑難問題解答 030
第3章 指令 031
3.1 內置指令 031
3.1.1 v-bind 031
3.1.2 v-on 031
3.1.3 v-model 032
3.1.4 v-text 033
3.1.5 v-html 034
3.1.6 v-show 034
3.1.7 v-if/v-else-if/v-else 036
3.1.8 v-for 038
3.1.9 v-pre 046
3.1.10 v-once 046
3.1.11 v-cloak 047
3.2 自定義指令 048
3.2.1 註冊自定義指令 048
3.2.2 鉤子函數 048
3.3 新手疑難問題解答 050
第4章 計算屬性 051
4.1 使用計算屬性 051
4.2 計算屬性的getter和setter方法 052
4.3 計算屬性和方法的區別 054
4.4 計算屬性代替v-for和v-if 055
4.5 新手疑難問題解答 056
第5 章 精通器和過濾器 057
5.1 使用器 057
5.2 方法 058
5.3 對象 058
5.4 全局過濾器與局部過濾器 061
5.5 過濾器的參數 062
5.6 過濾器的串聯 062
5.7 綜合實訓——使用過濾器格式化時間 063
5.8 新手疑難問題解答 064
第6 章 事件處理 065
6.1 事件 065
6.2 事件處理方法 066
6.3 事件修飾符 067
6.3.1 stop 068
6.3.2 capture 069
6.3.3 self 070
6.3.4 once 071
6.3.5 prevent 072
6.3.6 passive 072
6.4 按鍵修飾符 073
6.5 系統修飾鍵 074
6.6 綜合實訓——動態獲取鼠標的坐標 075
6.7 新手疑難問題解答 076
第7 章 Class 與Style 綁定 077
7.1 綁定HTML 樣式(Class) 077
7.1.1 數組語法 077
7.1.2 對象語法 078
7.1.3 在組件上使用class 屬性 080
7.2 綁定內聯樣式(style) 081
7.2.1 對象語法 081
7.2.2 數組語法 082
7.3 綜合實訓——實現簡易計算器 083
7.4 新手疑難問題解答 087
第8 章 表單輸入綁定 089
8.1 雙向綁定 089
8.2 基本用法 089
8.2.1 單行文本 089
8.2.2 多行文本 090
8.2.3 複選框 090
8.2.4 單選按鈕 091
8.2.5 選擇框 092
8.3 值綁定 093
8.3.1 複選框 094
8.3.2 單選按鈕 094
8.3.3 選擇框的選項 095
8.4 修飾符 095
8.4.1 trim 095
8.4.2 lazy 096
8.4.3 number 096
8.5 綜合實訓——設計動態表格 097
8.6 新手疑難問題解答 101
第9 章 精通組件 104
9.1 什麼是組件 104
9.2 組件的註冊 104
9.2.1 全局註冊 105
9.2.2 局部註冊 107
9.3 使用prop 向子組件傳遞數據 107
9.3.1 prop 基本用法 108
9.3.2 單向數據流 110
9.3.3 prop 驗證 110
9.3.4 非prop 的屬性 112
9.4 子組件向父組件傳遞數據 113
9.4.1 子組件事件 113
9.4.2 將原生事件綁定到組件 114
9.4.3 sync 修飾符 116
9.5 插槽 117
9.5.1 插槽的基本用法 117
9.5.2 編譯作用域 118
9.5.3 默認內容 118
9.5.4 命名插槽 119
9.5.5 作用域插槽 121
9.5.6 解構插槽prop 123
9.6 綜合實訓——設計3D 相冊效果 124
9.7 新手疑難問題解答 127
第10 章 玩轉過渡和動畫 128
10.1 單元素/ 組件的過渡 128
10.1.1 CSS 過渡 128
10.1.2 過渡的類名 129
10.1.3 CSS 動畫 131
10.1.4 自定義過渡的類名 132
10.1.5 動畫的JavaScript 鉤子函數 133
10.2 初始渲染的過渡 135
10.3 多個元素的過渡 137
10.4 列表過渡 138
10.4.1 列表的進入/ 離開過渡 138
10.4.2 列表的排序過渡 139
10.4.3 列表的交錯過渡 140
10.5 綜合實訓——數字階梯排序動畫 141
10.6 新手疑難問題解答 147
第11 章 腳手架Vue CLI 148
11.1 腳手架的組件 148
11.2 腳手架環境搭建 149
11.3 安裝腳手架 151
11.4 創建項目 152
11.4.1 使用命令 152
11.4.2 使用圖形化界面 154
11.5 配置sass、less 和stylus 157
11.6 配置文件gackage.json 158
11.7 新手疑難問題解答 159
第12 章 使用Vue Router 開發單頁面應用 160
12.1 使用Vue Router 160
12.1.1 HTML 頁面中使用路由 160
12.1.2 項目中使用路由 163
12.2 命名路由 164
12.3 命名視圖 166
12.4 路由傳參 168
12.5 編程式導航 173
12.6 組件與Vue Router 間解耦 176
12.6.1 布爾模式 176
12.6.2 對像模式 177
12.6.3 函數模式 178
12.7 新手疑難問題解答 178
第13 章 狀態管理——Vuex 180
13.1 什麼是Vuex 180
13.2 安裝Vuex 181
13.3 Vuex 的基本用法 181
13.4 在項目中使用Vuex 184
13.4.1 搭建一個項目 184
13.4.2 State 對象 188
13.4.3 Getter 對象 189
13.4.4 Mutation 對象 191
13.4.5 Action 對象 193
13.5 新手疑難問題解答 195
第14 章 數據請求庫——axios 196
14.1 什麼是axios 196
14.2 安裝axios 196
14.3 基本用法 197
14.3.1 get 請求和post 請求 197
14.3.2 請求json 數據 199
14.3.3 跨域請求數據 200
14.3.4 並發請求 201
14.4 axios API 202
14.5 請求配置 203
14.6 創建實例 206
14.7 配置默認選項 206
14.8 攔截器 206
14.9 綜合實訓——顯示近7 日的天氣情況 207
14.10 新手疑難問題解答 209
第15 章 開發短視頻社交App 210
15.1 腳手架搭建項目 210
15.2 Home 組件 211
15.2.1 配置Home 組件路由 211
15.2.2 底部導航欄組件 213
15.2.3 配置Home 組件子路由 214
15.3 首頁組件 216
15.3.1 頂部導航欄組件 216
15.3.2 視頻列表組件 219
15.3.3 視頻播放組件 221
15.3.4 點贊和分享組件 225
15.3.5 發布者和歌曲滾動組件 227
15.3.6 評論列表內容 229
15.4 附近組件 234
15.5 發布組件 237
15.5.1 拍攝組件 237
15.5.2 上傳組件 239
15.5.3 配置拍攝和上傳組件的路由 245
15.6 消息組件 245
15.7 登錄組件 249
15.7.1 配置登錄組件的路由 249
15.7.2 手機驗證組件 249
15.7.3 密碼登錄組件 257
15.8 個人信息組件 262
15.8.1 配置登錄組件的路由 263
15.8.2 信息組件 263
15.8.3 修改信息組件 267
第16 章 開發在線外賣App 271
16.1 項目概述 271
16.1.1 開發環境 271
16.1.2 技術概括 272
16.1.3 項目結構 272
16.2 入口文件 273
16.2.1 項目入口文件（index.html） 273
16.2.2 程序入口文件（main.js） 273
16.2.3 組件入口文件（App.vue） 274
16.3 項目組件 275
16.3.1 頭部組件（header.vue） 275
16.3.2 商品數量控制組件（cartControl.vue） 277
16.3.3 購物車組件（showcart.vue） 279
16.3.4 評論內容組件（ratingselect.vue） 283
16.3.5 商品詳情組件（food.vue） 285
16.3.6 星級組件（star.vue） 288
16.3.7 商品組件（goods.vue） 289
16.3.8 評論組件（ratings.vue） 292
16.3.9 商家信息組件（seller.vue） 295