Vue.js開發快速入門到精通

基礎篇 001
第1章 初識Vue.js 002
1.1 Vue.js概述 002
1.1.1 什麽是Vue.js 002
1.1.2 Vue.js的主要特性 003
1.2 Vue.js的安裝 003
1.2.1 直接下載並引入 003
1.2.2 引用外部CDN文件 004
1.2.3 使用NPM方法 004
1.3 Vue.js的開發模式 005
1.4 WebStorm簡介 005
1.4.1 WebStorm的下載 006
1.4.2 WebStorm的安裝 006
1.5 創建第一個Vue實例 010

第2章 基礎特性 015
2.1 創建Vue實例 015
2.1.1 使用el選項定義掛載元素 015
2.1.2 使用data選項定義數據 016
2.1.3 使用methods選項定義方法 017
2.1.4 生命周期鉤子函數 018
2.2 實現數據綁定 019
2.2.1 插值 019
2.2.2 定義過濾器 024
2.2.3 使用指令 028
2.3 綜合案例—動態顯示時間 029
2.4 實戰練習 031

第3章 條件判斷 032
3.1 使用v-if指令 032
3.1.1 基本用法 032
3.1.2 判斷一組元素 033
3.2 使用v-else指令 033
3.3 使用v-else-if指令 035
3.4 管理可覆用的元素 037
3.5 使用v-show指令 038
3.5.1 基本用法 038
3.5.2 v-if指令和v-show指令的比較 039
3.6 綜合案例—輸出獎項級別及獎品 039
3.7 實戰練習 041

第4章 列表渲染 043
4.1 遍歷數組 043
4.1.1 基本用法 043
4.1.2 循環渲染多個元素 045
4.1.3 數組的操作 046
4.2 遍歷對象 050
4.2.1 基本用法 050
4.2.2 添加響應式屬性 052
4.3 遍歷整數 054
4.4 綜合案例—過濾圖書信息 055
4.5 實戰練習 056

第5章 計算屬性和監聽屬性 058
5.1 計算屬性的基本用法 058
5.1.1 什麽是計算屬性 058
5.1.2 簡單應用 059
5.2 getter和setter 060
5.2.1 使用getter讀取屬性值 060
5.2.2 使用setter設置屬性值 061
5.3 計算屬性的緩存 062
5.4 監聽屬性的用法 064
5.4.1 什麽是監聽屬性 064
5.4.2 簡單應用 065
5.4.3 deep選項的用法 066
5.5 計算屬性和監聽屬性的比較 066
5.6 綜合案例—統計購物車中的商品總價 067
5.7 實戰練習 069

第6章 樣式綁定 070
6.1 綁定class屬性 070
6.1.1 綁定為對象 070
6.1.2 綁定為數組 076
6.2 綁定style屬性 078
6.2.1 綁定為對象 078
6.2.2 綁定為數組 081
6.3 綜合案例—豎向導航菜單 082
6.4 實戰練習 084

第7章 事件處理 085
7.1 監聽DOM事件 085
7.1.1 v-on指令 085
7.1.2 綁定事件處理方法 086
7.1.3 使用內聯語句 089
7.2 事件中的修飾符 091
7.2.1 事件修飾符 091
7.2.2 按鍵修飾符 093
7.3 綜合案例—二級聯動菜單 095
7.4 實戰練習 098

第8章 表單控件綁定 099
8.1 文本框的綁定 099
8.1.1 綁定單行文本框 099
8.1.2 綁定文本域 101
8.2 單選按鈕的綁定 103
8.3 覆選框的綁定 105
8.3.1 綁定單個覆選框 105
8.3.2 綁定多個覆選框 107
8.4 下拉菜單的綁定 108
8.4.1 綁定單選下拉菜單 108
8.4.2 綁定可多選的下拉菜單 111
8.5 將值綁定到動態屬性 113
8.5.1 單選按鈕的值綁定 113
8.5.2 覆選框的值綁定 113
8.5.3 下拉菜單的值綁定 115
8.6 v-model指令的修飾符 115
8.6.1 lazy修飾符 115
8.6.2 number修飾符 116
8.6.3 trim修飾符 116
8.7 綜合案例—省市區三級聯動菜單 117
8.8 實戰練習 119

第9章 自定義指令 121
9.1 註冊自定義指令 121
9.1.1 註冊全局自定義指令 121
9.1.2 註冊局部自定義指令 122
9.2 鉤子函數 123
9.3 綁定值的類型 126
9.3.1 綁定數值 126
9.3.2 綁定字符串 127
9.3.3 綁定對象字面量 127
9.4 綜合案例—實現元素的隨意拖動 128
9.5 實戰練習 130

第10章 組件 131
10.1 組件的註冊 131
10.1.1 全局註冊 131
10.1.2 局部註冊 134
10.2 向子組件傳遞數據 135
10.2.1 傳遞靜態數據 135
10.2.2 Prop的書寫規則 136
10.2.3 傳遞動態數據 137
10.2.4 Prop驗證 141
10.3 組件的事件處理 143
10.3.1 自定義事件 143
10.3.2 監聽原生事件 147
10.4 使用插槽實現內容分發 147
10.4.1 插槽的基礎用法 148
10.4.2 編譯作用域 148
10.4.3 設置後備內容 149
10.4.4 具名插槽的用法 150
10.4.5 插槽Prop 153
10.5 混入對象 156
10.5.1 混入的基礎用法 156
10.5.2 選項的合並 157
10.5.3 全局混入對象 160
10.6 動態組件的使用 161
10.6.1 動態組件的基礎用法 161
10.6.2 組件的緩存 163
10.7 綜合案例—實現經典散文和經典小說之間的切換 166
10.8 實戰練習 169

第11章 過渡效果 171
11.1 單元素的過渡效果 171
11.1.1 CSS過渡效果 171
11.1.2 過渡的類名 172
11.1.3 CSS動畫效果 174
11.1.4 自定義過渡類名 176
11.1.5 使用鉤子函數設置過渡 177
11.2 多元素的過渡效果 180
11.2.1 多元素過渡的基本用法 180
11.2.2 設置元素的key屬性 181
11.2.3 設置過渡模式 184
11.3 多組件的過渡效果 185
11.4 列表的過渡效果 188
11.5 綜合案例—廣告圖片的輪播效果 190
11.6 實戰練習 193

第12章 使用插件實現路由和Ajax 194
12.1 設置路由 194
12.1.1 引入vue-router 194
12.1.2 路由的基本用法 196
12.1.3 動態匹配路由 197
12.1.4 設置路由名稱 198
12.1.5 應用push()方法實現跳轉 198
12.1.6 嵌套路由 201
12.1.7 設置視圖名稱 208
12.1.8 路由重定向 211
12.1.9 路由的高級用法 211
12.2 實現Ajax請求 216
12.2.1 引入axios 216
12.2.2 發送GET請求 217
12.2.3 發送POST請求 220
12.3 綜合案例—應用嵌套路由實現組件的切換 223
12.4 實戰練習 225

第13章 單頁Web應用 227
13.1 webpack簡介 227
13.1.1 webpack的安裝 227
13.1.2 webpack的基本用法 228
13.2 loader簡介 230
13.2.1 CSS加載器 230
13.2.2 配置文件 231
13.2.3 圖片加載器 233
13.3 單文件組件 235
13.3.1 什麽是單文件組件 235
13.3.2 簡單應用 235
13.4 使用@vue/cli構建項目 238
13.4.1 @vue/cli的安裝 238
13.4.2 快速構建項目 239
13.5 綜合案例—實現購物車功能 243
13.6 實戰練習 247

第14章 狀態管理 248
14.1 什麽是Vuex 248
14.2 Vuex的使用 249
14.2.1 Vuex的組成 249
14.2.2 在@vue/cli中使用Vuex 249
14.3 綜合案例—保存用戶登錄狀態 260
14.4 實戰練習 266

案例篇 269
第15章 模擬QQ聊天窗口——Vue.js+JavaScript實現 270
15.1 案例分析 270
15.2 實現過程 271
15.2.1 左側用戶列表的設計 272
15.2.2 聊天內容顯示區域設計 274
15.2.3 文字編輯區域設計 274

第16章 貪吃蛇小遊戲——Vue.js+JavaScript實現 278
16.1 案例分析 278
16.2 實現過程 279
16.2.1 遊戲初始界面設計 279
16.2.2 遊戲操作 282

第17章 註冊與登錄——@vue/cli+Router+Vuex實現 285
17.1 案例分析 285
17.2 實現過程 286
17.2.1 註冊頁面設計 287
17.2.2 用戶註冊驗證 288
17.2.3 保存註冊信息 290
17.2.4 登錄頁面設計 290
17.2.5 驗證滑塊設計 291
17.2.6 用戶登錄驗證 292
17.2.7 在根組件中實現路由 293

第18章 時光音樂網首頁設計——@vue/cli+axios實現 296
18.1 案例分析 296
18.2 實現過程 297
18.2.1 導航欄的設計 297
18.2.2 歌曲列表展示界面 298
18.2.3 輪播圖的設計 300
18.2.4 歌曲排行榜 302
18.2.5 最新音樂資訊 303
18.2.6 頁面底部的設計 304
18.2.7 在根組件中構建音樂網首頁 305

第19章 遊戲公園——@vue/cli+Router+Vuex實現 307
19.1 案例分析 307
19.2 實現過程 309
19.2.1 主頁設計 309
19.2.2 博客列表頁面設計 314
19.2.3 博客詳情頁面設計 315
19.2.4 關於我們頁面設計 318

項目篇 321
第20章 51購商城——Vue.js+@vue/cli+Vuex實現 322
20.1 項目的設計思路 322
20.1.1 項目概述 322
20.1.2 界面預覽 322
20.1.3 功能結構 324
20.1.4 業務流程 324
20.1.5 文件夾組織結構 325
20.2 主頁的設計與實現 325
20.2.1 主頁的設計 325
20.2.2 頂部區和底部區功能的實現 327
20.2.3 商品分類導航功能的實現 330
20.2.4 輪播圖功能的實現 331
20.2.5 商品推薦功能的實現 335
20.3 商品詳情頁面的設計與實現 337
20.3.1 商品詳情頁面的設計 337
20.3.2 圖片放大鏡效果的實現 338
20.3.3 商品概要功能的實現 340
20.3.4 猜你喜歡功能的實現 343
20.3.5 選項卡切換效果的實現 345
20.4 購物車頁面的設計與實現 346
20.4.1 購物車頁面的設計 346
20.4.2 購物車頁面的實現 347
20.5 付款頁面的設計與實現 350
20.5.1 付款頁面的設計 350
20.5.2 付款頁面的實現 350
20.6 登錄註冊頁面的設計與實現 354
20.6.1 登錄註冊頁面的設計 354
20.6.2 登錄頁面的實現 354
20.6.3 註冊頁面的實現 357