## 章名目錄 【第 一篇】　Vue.js基礎(chǔ)篇 第 1章　Web前端開(kāi)發(fā)概述 第 2章　Vue.js開(kāi)發(fā)基礎(chǔ) 第3章　計(jì)算屬性與偵聽(tīng)器 第4章　控制頁(yè)面的CSS樣式 第5章　事件處理 第6章　表單綁定　 第7章　結(jié)構(gòu)渲染　 第8章　階段案例——網(wǎng)頁(yè)匯率計(jì)算器和番茄鐘 【第二篇】　Vue.js進(jìn)階篇 第9章　組件基礎(chǔ)　 第 10章　單文件組件 第 11章　AJAX與Axios　 第 12章　過(guò)渡動(dòng)畫(huà)　 第 13章　路由Vue　Router　 第 14章　狀態(tài)管理　 【第三篇】　綜合案例篇 第 15章　綜合案例——“豪華版”待辦事項(xiàng)　 第 16章　綜合案例——網(wǎng)頁(yè)圖片剪裁器　 第 17章　綜合案例——電子商務(wù)網(wǎng)站　 附錄　ECMAScript　2015（ES6）基礎(chǔ)知識(shí) ## 詳細(xì)目錄 【第 一篇】　Vue.js基礎(chǔ)篇 第 1章　Web前端開(kāi)發(fā)概述 1.1　Web開(kāi)發(fā)簡(jiǎn)史　2 1.2　基于前后端分離模式的Web開(kāi)發(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開(kāi)發(fā)中常用的工具　7 1.4.1　Chrome瀏覽器　7 1.4.2　VS　Code文本編輯器　8 1.4.3　命令行控制臺(tái)　9 1.5　安裝Vue.js　11 1.6　上手實(shí)踐：第 一個(gè)Vue.js程序　12 本章小結(jié)　14 習(xí)題1　14 第 2章　Vue.js開(kāi)發(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章　計(jì)算屬性與偵聽(tīng)器 3.1　計(jì)算屬性　27 3.1.1　定義計(jì)算屬性　27 3.1.2　計(jì)算屬性的緩存特性　29 3.2　偵聽(tīng)器　32 3.2.1　偵聽(tīng)器的應(yīng)用場(chǎng)景　32 3.2.2　偵聽(tīng)器的基本用法　33 3.2.3　深度偵聽(tīng)　34 3.2.4　偵聽(tīng)對(duì)象時(shí)獲取對(duì)象原值　35 3.2.5　使用immediate參數(shù)　36 3.2.6　對(duì)數(shù)組進(jìn)行偵聽(tīng)　37 本章小結(jié)　40 習(xí)題3　40 第4章　控制頁(yè)面的CSS樣式 4.1　綁定class屬性　41 4.1.1　以對(duì)象方式綁定class屬性　41 4.1.2　將class屬性與對(duì)象變量綁定　43 4.1.3　以數(shù)組方式綁定class屬性　44 4.1.4　動(dòng)態(tài)改變class屬性值　45 4.1.5　在數(shù)組中使用對(duì)象　45 4.2　綁定style屬性　46 4.2.1　以對(duì)象方式綁定style屬性　46 4.2.2　將style屬性與對(duì)象變量綁定　47 4.2.3　以數(shù)組方式綁定style屬性　48 4.2.4　動(dòng)態(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　事件對(duì)象　51 5.2　使用Vue.js處理事件　53 5.2.1　以?xún)?nèi)聯(lián)方式響應(yīng)事件　53 5.2.2　事件處理方法　54 5.2.3　在Vue.js中使用事件對(duì)象　55 5.3　動(dòng)手練習(xí)：監(jiān)視鼠標(biāo)移動(dòng)　56 5.4　事件修飾符　58 5.4.1　準(zhǔn)備基礎(chǔ)頁(yè)面　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　事件修飾符使用說(shuō)明　61 5.4.8　按鍵修飾符　61 本章小結(jié)　63 習(xí)題5　63 第6章　表單綁定　 6.1　輸入文本的綁定　65 6.1.1　文本框　65 6.1.2　多行文本框　66 6.2　選擇類(lèi)表單元素的綁定　67 6.2.1　單選按鈕　67 6.2.2　復(fù)選框　68 6.2.3　下拉框　69 6.2.4　多選列表框　69 6.2.5　鍵值對(duì)綁定　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　迭代對(duì)象數(shù)組　78 7.2.3　對(duì)象屬性列表　79 7.2.4　數(shù)值范圍　80 7.2.5　數(shù)組更新檢測(cè)　80 7.2.6　v-for中的key屬性有何作用　82 7.2.7　將v-for與v-if一同使用時(shí)的注意事項(xiàng)　84 本章小結(jié)　85 習(xí)題7　85 第8章　階段案例——網(wǎng)頁(yè)匯率計(jì)算器和番茄鐘 8.1　網(wǎng)頁(yè)匯率計(jì)算器　86 8.1.1　頁(yè)面結(jié)構(gòu)和樣式　87 8.1.2　數(shù)據(jù)模型　87 8.2　番茄鐘　90 8.2.1　功能描述　90 8.2.2　用到的知識(shí)點(diǎn)　91 8.2.3　頁(yè)面結(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　組件的名稱(chēng)　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　動(dòng)手練習(xí)：投票頁(yè)面　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è)應(yīng)用和多頁(yè)應(yīng)用　126 10.3.1　單頁(yè)應(yīng)用和多頁(yè)應(yīng)用的區(qū)別　126 10.3.2　多頁(yè)應(yīng)用開(kāi)發(fā)　127 10.3.3　單頁(yè)應(yīng)用開(kāi)發(fā)　128 本章小結(jié)　134 習(xí)題10　134 第 11章　AJAX與Axios　 11.1　認(rèn)識(shí)AJAX與Axios　135 11.1.1　AJAX的基本概念　135 11.1.2　AJAX的組成部分　137 11.1.3　用原生方法獲取異步數(shù)據(jù)　138 11.1.4　認(rèn)識(shí)Axios　141 11.2　Axios的基礎(chǔ)用法　141 11.2.1　基本用法　141 11.2.2　GET與POST　143 11.2.3　嵌套請(qǐng)求與并發(fā)請(qǐng)求　147 11.3　Axios的進(jìn)階用法　151 11.3.1　創(chuàng)建實(shí)例　151 11.3.2　實(shí)例的相關(guān)配置　151 11.3.3　錯(cuò)誤處理　152 11.3.4　攔截器　154 11.4　動(dòng)手練習(xí)：實(shí)現(xiàn)自動(dòng)提示的文本框　157 11.4.1　基本思路與結(jié)構(gòu)　158 11.4.2　樣式布局　158 11.4.3　匹配用戶(hù)輸入并顯示提示框　159 11.5　動(dòng)手練習(xí)：模擬百度的“數(shù)據(jù)加載中”效果　161 本章小結(jié)　161 習(xí)題11　161 第 12章　過(guò)渡動(dòng)畫(huà)　 12.1　CSS過(guò)渡　163 12.2　單元素過(guò)渡　164 12.2.1　transition組件　164 12.2.2　過(guò)渡的類(lèi)名　165 12.3　動(dòng)手練習(xí)：可折疊的多級(jí)菜單　166 12.3.1　搭建頁(yè)面結(jié)構(gòu)　166 12.3.2　展開(kāi)和收起菜單　168 12.3.3　添加過(guò)渡效果　170 12.3.4　實(shí)現(xiàn)多級(jí)菜單　170 12.4　列表過(guò)渡　173 12.4.1　transition-group組件　173 12.4.2　動(dòng)手練習(xí)：待辦事項(xiàng)　175 本章小結(jié)　180 習(xí)題12　180 第 13章　路由Vue　Router　 13.1　基本用法　182 13.2　命名路由　186 13.3　路由動(dòng)態(tài)匹配　187 13.3.1　路由參數(shù)　187 13.3.2　多路由參數(shù)與偵聽(tīng)路由　189 13.3.3　查詢(xún)參數(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　整體頁(yè)面結(jié)構(gòu)　200 14.1.2　創(chuàng)建store對(duì)象　200 14.1.3　使用store對(duì)象　201 14.2　Vuex的基本用法　203 14.3　深入掌握Vuex　206 14.3.1　在單文件組件中使用Vuex　206 14.3.2　action與mutation　210 14.4　動(dòng)手練習(xí)：改進(jìn)版的“待辦事項(xiàng)”（TodoList）　214 本章小結(jié)　215 習(xí)題14　215　 【第三篇】　綜合案例篇 第 15章　綜合案例——“豪華版”待辦事項(xiàng)　 15.1　功能描述　219 15.2　用到的知識(shí)點(diǎn)　220 15.3　使用Vue　CLI搭建項(xiàng)目　220 15.4　頁(yè)面結(jié)構(gòu)和樣式　222 15.4.1　添加待辦事項(xiàng)　222 15.4.2　任務(wù)狀態(tài)的篩選項(xiàng)以及對(duì)應(yīng)的任務(wù)個(gè)數(shù)　224 15.4.3　任務(wù)列表　225 15.4.4　編輯任務(wù)彈框　226 15.5　組件化　227 15.5.1　抽離單個(gè)任務(wù)　227 15.5.2　抽離編輯彈框　228 15.6　核心功能的實(shí)現(xiàn)　228 15.6.1　定義Todo類(lèi)　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　動(dòng)態(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)頁(yè)圖片剪裁器　 16.1　整體分析　243 16.2　頁(yè)面結(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ǔ)類(lèi)　246 16.3.2　定義Cropper類(lèi)　248 16.4　使用Vue.js處理交互　252 16.4.1　初始化圖像　252 16.4.2　繪制選區(qū)　254 16.4.3　移動(dòng)選區(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)備基本頁(yè)面及路由　274 17.2.3　安裝Bootstrap　276 17.3　產(chǎn)品頁(yè)面　277 17.3.1　靜態(tài)產(chǎn)品列表頁(yè)　277 17.3.2　動(dòng)態(tài)化產(chǎn)品列表頁(yè)　278 17.3.3　產(chǎn)品詳情頁(yè)　281 17.3.4　頁(yè)面裝載狀態(tài)提示　283 17.4　購(gòu)物車(chē)　286 17.4.1　靜態(tài)結(jié)構(gòu)　286 17.4.2　實(shí)現(xiàn)購(gòu)物車(chē)可移動(dòng)　287 17.4.3　實(shí)現(xiàn)購(gòu)物車(chē)動(dòng)態(tài)化　289 17.5　完成網(wǎng)站剩余部分　292 本章小結(jié)　295 附錄　ECMAScript　2015（ES6）基礎(chǔ)知識(shí)