隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，JavaScript語言及其相關(guān)技術(shù)越來越受到人們的關(guān)注，各種JavaScript框架層出不窮。Vue.js作為新一代JavaScript框架的優(yōu)秀代表，為廣大開發(fā)者提供了諸多便利，占據(jù)著Web開發(fā)技術(shù)中的重要位置。
本書詳細(xì)講解了Vue.js框架的相關(guān)技術(shù)，如數(shù)據(jù)綁定、偵聽、事件、樣式控制、結(jié)構(gòu)渲染等核心基礎(chǔ)知識；并在此基礎(chǔ)上，講解了組件化開發(fā)的完整邏輯；最后講解了AJAX、過渡動畫、路由、狀態(tài)管理等高級內(nèi)容。本書內(nèi)容翔實(shí)、結(jié)構(gòu)框架清晰、講解循序漸進(jìn)，注重各章以及實(shí)例之間的呼應(yīng)與對照。此外，編者在本書中還編排了豐富的案例（包括綜合案例），并對Web前端的工程化進(jìn)行了必要的講解，這能夠幫助讀者鞏固所學(xué)理論知識，提高編程實(shí)戰(zhàn)技能。
本書既可以作為高等院校相關(guān)專業(yè)的網(wǎng)頁設(shè)計與制作、前端開發(fā)等課程的教材，也可以作為Vue.js初學(xué)者的入門用書。
叢書特色：
（1）編排豐富實(shí)戰(zhàn)案例，可掃前言二維碼進(jìn)行快速預(yù)覽。
（2）提供在線實(shí)訓(xùn)平臺（http://code.artech.cn），支撐隨時開展全書案例實(shí)戰(zhàn)演練。
（3）開源分階實(shí)戰(zhàn)項(xiàng)目（http://www.geekfun.website），助力不同層次讀者（學(xué)生）獲取企業(yè)實(shí)戰(zhàn)項(xiàng)目開發(fā)能力。
（4）配套多類教輔資源，包含文本類、視頻類（微課視頻）、案例類、平臺類等。
（5）建立教師服務(wù)與交流群（QQ群號：368845661），立體化服務(wù)院校教師教學(xué)。
特別說明：
為了使本書中的案例作用最大化，我們專門為其提供了“在線實(shí)訓(xùn)平臺”（http://code.artech.cn）。該平臺的具體功能介紹如下。
【在線實(shí)訓(xùn)平臺】功能：
（1）教師可以利用該平臺，在上課過程中直接演練（展示）書中的所有案例，并可通過實(shí)時的運(yùn)行結(jié)果同步講解相關(guān)知識點(diǎn)和技能。
（2）師生可以通過該平臺觀看全書導(dǎo)學(xué)、原理講解、案例講解等視頻，配合實(shí)操演練，隨時隨地進(jìn)行學(xué)習(xí)，支持開展線上線下混合式教學(xué)。
（3）學(xué)生可以在課前或課后通過該平臺，實(shí)操練習(xí)書中的所有案例，實(shí)時查看代碼運(yùn)行結(jié)果，而且所有案例代碼均支持復(fù)制與還原。
（4）學(xué)生還可以通過該平臺實(shí)操練習(xí)各章課后的實(shí)操題，并可通過微信分享功能，將實(shí)操的結(jié)果分享給其他人，如分享給老師進(jìn)行審閱。
說明：掃描“從書序中的二維碼”可以了解該平臺的具體使用方法，教師也可通過“教師用書指導(dǎo)手冊”了解該平臺的具體操作步驟。
溫謙：
## 全棧工程師，前沿科技創(chuàng)始人，現(xiàn)從事企業(yè)大型軟件系統(tǒng)的分析與開發(fā)工作，擁有超20年的軟件開發(fā)經(jīng)驗(yàn)，主持并成功開發(fā)了多個復(fù)雜系統(tǒng)，項(xiàng)目實(shí)戰(zhàn)經(jīng)驗(yàn)豐富。
## 常銷書作者，畢業(yè)于華中科技大學(xué)計算機(jī)專業(yè)，主編網(wǎng)頁設(shè)計與軟件開發(fā)相關(guān)領(lǐng)域圖書共12本，圖書編寫經(jīng)驗(yàn)頗豐，其中《HTML+CSS網(wǎng)頁設(shè)計與布局從入門到精通》《網(wǎng)頁設(shè)計與布局項(xiàng)目化教程（HTML+CSS+DIV）》等圖書常銷10余年，被百余所高校選作教材。
## 章名目錄
【第 一篇】 Vue.js基礎(chǔ)篇
第 1章 Web前端開發(fā)概述
第 2章 Vue.js開發(fā)基礎(chǔ)
第3章 計算屬性與偵聽器
第4章 控制頁面的CSS樣式
第5章 事件處理
第6章 表單綁定
第7章 結(jié)構(gòu)渲染
第8章 階段案例——網(wǎng)頁匯率計算器和番茄鐘
【第二篇】 Vue.js進(jìn)階篇
第9章 組件基礎(chǔ)
第 10章 單文件組件
第 11章 AJAX與Axios
第 12章 過渡動畫
第 13章 路由Vue Router
第 14章 狀態(tài)管理
【第三篇】 綜合案例篇
第 15章 綜合案例——“豪華版”待辦事項(xiàng)
第 16章 綜合案例——網(wǎng)頁圖片剪裁器
第 17章 綜合案例——電子商務(wù)網(wǎng)站
附錄 ECMAScript 2015（ES6）基礎(chǔ)知識
## 詳細(xì)目錄
【第 一篇】 Vue.js基礎(chǔ)篇
第 1章 Web前端開發(fā)概述
1.1 Web開發(fā)簡史 2
1.2 基于前后端分離模式的Web開發(fā) 3
1.2.1 從提供內(nèi)容到提供服務(wù)的轉(zhuǎn)變 3
1.2.2 從“單一網(wǎng)站”到“多終端應(yīng)用” 4
1.3 Vue.js與MVVM模式 4
1.4 Vue.js開發(fā)中常用的工具 7
1.4.1 Chrome瀏覽器 7
1.4.2 VS Code文本編輯器 8
1.4.3 命令行控制臺 9
1.5 安裝Vue.js 11
1.6 上手實(shí)踐：第 一個Vue.js程序 12
本章小結(jié) 14
習(xí)題1 14
第 2章 Vue.js開發(fā)基礎(chǔ)
2.1 Vue根實(shí)例 15
2.1.1 文本插值 15
2.1.2 方法屬性 19
2.1.3 屬性綁定 22
2.1.4 插入HTML片段 23
2.2 Vue實(shí)例的生命周期 24
本章小結(jié) 26
習(xí)題2 26
第3章 計算屬性與偵聽器
3.1 計算屬性 27
3.1.1 定義計算屬性 27
3.1.2 計算屬性的緩存特性 29
3.2 偵聽器 32
3.2.1 偵聽器的應(yīng)用場景 32
3.2.2 偵聽器的基本用法 33
3.2.3 深度偵聽 34
3.2.4 偵聽對象時獲取對象原值 35
3.2.5 使用immediate參數(shù) 36
3.2.6 對數(shù)組進(jìn)行偵聽 37
本章小結(jié) 40
習(xí)題3 40
第4章 控制頁面的CSS樣式
4.1 綁定class屬性 41
4.1.1 以對象方式綁定class屬性 41
4.1.2 將class屬性與對象變量綁定 43
4.1.3 以數(shù)組方式綁定class屬性 44
4.1.4 動態(tài)改變class屬性值 45
4.1.5 在數(shù)組中使用對象 45
4.2 綁定style屬性 46
4.2.1 以對象方式綁定style屬性 46
4.2.2 將style屬性與對象變量綁定 47
4.2.3 以數(shù)組方式綁定style屬性 48
4.2.4 動態(tài)改變style屬性值 48
本章小結(jié) 49
習(xí)題4 49
第5章 事件處理
5.1 標(biāo)準(zhǔn)DOM中的事件 50
5.1.1 事件與事件流 50
5.1.2 事件對象 51
5.2 使用Vue.js處理事件 53
5.2.1 以內(nèi)聯(lián)方式響應(yīng)事件 53
5.2.2 事件處理方法 54
5.2.3 在Vue.js中使用事件對象 55
5.3 動手練習(xí)：監(jiān)視鼠標(biāo)移動 56
5.4 事件修飾符 58
5.4.1 準(zhǔn)備基礎(chǔ)頁面 58
5.4.2 .stop 59
5.4.3 .self 59
5.4.4 .capture 59
5.4.5 .once 60
5.4.6 .prevent 60
5.4.7 事件修飾符使用說明 61
5.4.8 按鍵修飾符 61
本章小結(jié) 63
習(xí)題5 63
第6章 表單綁定
6.1 輸入文本的綁定 65
6.1.1 文本框 65
6.1.2 多行文本框 66
6.2 選擇類表單元素的綁定 67
6.2.1 單選按鈕 67
6.2.2 復(fù)選框 68
6.2.3 下拉框 69
6.2.4 多選列表框 69
6.2.5 鍵值對綁定 70
6.3 修飾符 71
6.3.1 .lazy 71
6.3.2 .number 71
6.3.3 .trim 72
本章小結(jié) 72
習(xí)題6 72
第7章 結(jié)構(gòu)渲染
7.1 條件渲染指令v-if 73
7.1.1 v-if和v-else 73
7.1.2 v-else-if 74
7.1.3 用key屬性管理可復(fù)用的元素 75
7.1.4 v-if與v-show 76
7.2 列表渲染指令v-for 77
7.2.1 基本列表 77
7.2.2 迭代對象數(shù)組 78
7.2.3 對象屬性列表 79
7.2.4 數(shù)值范圍 80
7.2.5 數(shù)組更新檢測 80
7.2.6 v-for中的key屬性有何作用 82
7.2.7 將v-for與v-if一同使用時的注意事項(xiàng) 84
本章小結(jié) 85
習(xí)題7 85
第8章 階段案例——網(wǎng)頁匯率計算器和番茄鐘
8.1 網(wǎng)頁匯率計算器 86
8.1.1 頁面結(jié)構(gòu)和樣式 87
8.1.2 數(shù)據(jù)模型 87
8.2 番茄鐘 90
8.2.1 功能描述 90
8.2.2 用到的知識點(diǎn) 91
8.2.3 頁面結(jié)構(gòu)和樣式 91
8.2.4 實(shí)現(xiàn)核心邏輯 92
8.2.5 使用Vue.js處理交互 96
本章小結(jié) 100
【第二篇】 Vue.js進(jìn)階篇
第9章 組件基礎(chǔ)
9.1 自定義組件與HTML標(biāo)記 102
9.1.1 組件的名稱 103
9.1.2 組件的屬性 104
9.1.3 組件的內(nèi)容 105
9.1.4 在組件中處理事件 106
9.2 全局組件與局部組件 109
本章小結(jié) 110
習(xí)題9 110
第 10章 單文件組件
10.1 安裝Vue CLI腳手架工具 112
10.2 動手練習(xí)：投票頁面 117
10.2.1 制作greeting組件 117
10.2.2 制作app組件 118
10.2.3 在父子組件之間傳遞數(shù)據(jù) 121
10.2.4 構(gòu)建用于生產(chǎn)環(huán)境的文件 125
10.3 單頁應(yīng)用和多頁應(yīng)用 126
10.3.1 單頁應(yīng)用和多頁應(yīng)用的區(qū)別 126
10.3.2 多頁應(yīng)用開發(fā) 127
10.3.3 單頁應(yīng)用開發(fā) 128
本章小結(jié) 134
習(xí)題10 134
第 11章 AJAX與Axios
11.1 認(rèn)識AJAX與Axios 135
11.1.1 AJAX的基本概念 135
11.1.2 AJAX的組成部分 137
11.1.3 用原生方法獲取異步數(shù)據(jù) 138
11.1.4 認(rèn)識Axios 141
11.2 Axios的基礎(chǔ)用法 141
11.2.1 基本用法 141
11.2.2 GET與POST 143
11.2.3 嵌套請求與并發(fā)請求 147
11.3 Axios的進(jìn)階用法 151
11.3.1 創(chuàng)建實(shí)例 151
11.3.2 實(shí)例的相關(guān)配置 151
11.3.3 錯誤處理 152
11.3.4 攔截器 154
11.4 動手練習(xí)：實(shí)現(xiàn)自動提示的文本框 157
11.4.1 基本思路與結(jié)構(gòu) 158
11.4.2 樣式布局 158
11.4.3 匹配用戶輸入并顯示提示框 159
11.5 動手練習(xí)：模擬百度的“數(shù)據(jù)加載中”效果 161
本章小結(jié) 161
習(xí)題11 161
第 12章 過渡動畫
12.1 CSS過渡 163
12.2 單元素過渡 164
12.2.1 transition組件 164
12.2.2 過渡的類名 165
12.3 動手練習(xí)：可折疊的多級菜單 166
12.3.1 搭建頁面結(jié)構(gòu) 166
12.3.2 展開和收起菜單 168
12.3.3 添加過渡效果 170
12.3.4 實(shí)現(xiàn)多級菜單 170
12.4 列表過渡 173
12.4.1 transition-group組件 173
12.4.2 動手練習(xí)：待辦事項(xiàng) 175
本章小結(jié) 180
習(xí)題12 180
第 13章 路由Vue Router
13.1 基本用法 182
13.2 命名路由 186
13.3 路由動態(tài)匹配 187
13.3.1 路由參數(shù) 187
13.3.2 多路由參數(shù)與偵聽路由 189
13.3.3 查詢參數(shù) 191
13.3.4 捕獲所有路由 191
13.4 編程式導(dǎo)航 193
13.5 重定向和別名 193
13.6 進(jìn)階用法 194
13.6.1 導(dǎo)航守衛(wèi) 194
13.6.2 路由元信息 196
13.7 history模式 197
本章小結(jié) 197
習(xí)題13 197
第 14章 狀態(tài)管理
14.1 store模式 199
14.1.1 整體頁面結(jié)構(gòu) 200
14.1.2 創(chuàng)建store對象 200
14.1.3 使用store對象 201
14.2 Vuex的基本用法 203
14.3 深入掌握Vuex 206
14.3.1 在單文件組件中使用Vuex 206
14.3.2 action與mutation 210
14.4 動手練習(xí)：改進(jìn)版的“待辦事項(xiàng)”（TodoList） 214
本章小結(jié) 215
習(xí)題14 215
【第三篇】 綜合案例篇
第 15章 綜合案例——“豪華版”待辦事項(xiàng)
15.1 功能描述 219
15.2 用到的知識點(diǎn) 220
15.3 使用Vue CLI搭建項(xiàng)目 220
15.4 頁面結(jié)構(gòu)和樣式 222
15.4.1 添加待辦事項(xiàng) 222
15.4.2 任務(wù)狀態(tài)的篩選項(xiàng)以及對應(yīng)的任務(wù)個數(shù) 224
15.4.3 任務(wù)列表 225
15.4.4 編輯任務(wù)彈框 226
15.5 組件化 227
15.5.1 抽離單個任務(wù) 227
15.5.2 抽離編輯彈框 228
15.6 核心功能的實(shí)現(xiàn) 228
15.6.1 定義Todo類 228
15.6.2 使用Vuex管理任務(wù)列表 229
15.7 實(shí)現(xiàn)各項(xiàng)功能 231
15.7.1 添加任務(wù) 231
15.7.2 顯示任務(wù)列表 232
15.7.3 動態(tài)化篩選項(xiàng) 233
15.7.4 修改任務(wù)狀態(tài) 234
15.7.5 編輯任務(wù) 234
15.7.6 刪除任務(wù) 237
15.7.7 調(diào)整任務(wù)順序 238
15.7.8 持久化任務(wù) 239
本章小結(jié) 241
第 16章 綜合案例——網(wǎng)頁圖片剪裁器
16.1 整體分析 243
16.2 頁面結(jié)構(gòu)和CSS樣式 244
16.2.1 HTML結(jié)構(gòu) 244
16.2.2 選區(qū)部分的結(jié)構(gòu)與樣式 245
16.3 實(shí)現(xiàn)核心邏輯 246
16.3.1 定義基礎(chǔ)類 246
16.3.2 定義Cropper類 248
16.4 使用Vue.js處理交互 252
16.4.1 初始化圖像 252
16.4.2 繪制選區(qū) 254
16.4.3 移動選區(qū) 259
16.4.4 調(diào)整選區(qū)大小 260
16.4.5 將手柄封裝為組件 264
16.4.6 最終剪裁 266
本章小結(jié) 267
第 17章 綜合案例——電子商務(wù)網(wǎng)站
17.1 案例總體介紹 268
17.1.1 案例目標(biāo) 268
17.1.2 最終效果展示 270
17.2 搭建網(wǎng)站框架 272
17.2.1 使用Vue CLI搭建項(xiàng)目 272
17.2.2 準(zhǔn)備基本頁面及路由 274
17.2.3 安裝Bootstrap 276
17.3 產(chǎn)品頁面 277
17.3.1 靜態(tài)產(chǎn)品列表頁 277
17.3.2 動態(tài)化產(chǎn)品列表頁 278
17.3.3 產(chǎn)品詳情頁 281
17.3.4 頁面裝載狀態(tài)提示 283
17.4 購物車 286
17.4.1 靜態(tài)結(jié)構(gòu) 286
17.4.2 實(shí)現(xiàn)購物車可移動 287
17.4.3 實(shí)現(xiàn)購物車動態(tài)化 289
17.5 完成網(wǎng)站剩余部分 292
本章小結(jié) 295
附錄 ECMAScript 2015（ES6）基礎(chǔ)知識
書單推薦
