【章名目錄】 第　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ì)算器和番茄鐘 第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)站 附錄A　從Vue.js 2升級(jí)到Vue.js　3 附錄B　ECMAScript 2015（ES6）基礎(chǔ)知識(shí) 【詳細(xì)目錄】 第　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　命令行窗口　9 1.5　安裝Vue.js　10 1.6　上手實(shí)踐：第 一個(gè)Vue.js程序　11 本章小結(jié)　13 習(xí)題1　13 第　2章 Vue.js開(kāi)發(fā)基礎(chǔ) 2.1　Vue應(yīng)用實(shí)例　14 2.1.1　文本插值　14 2.1.2　方法屬性　18 2.1.3　屬性綁定　21 2.1.4　插入HTML片段　22 2.2　Vue實(shí)例的生命周期　23 本章小結(jié)　25 習(xí)題2　25 第3章　計(jì)算屬性與偵聽(tīng)器 3.1　計(jì)算屬性　26 3.1.1　定義計(jì)算屬性　26 3.1.2　計(jì)算屬性的緩存特性　28 3.2　偵聽(tīng)器　31 3.2.1　偵聽(tīng)器的應(yīng)用場(chǎng)景　31 3.2.2　偵聽(tīng)器的基本用法　32 3.2.3　深度偵聽(tīng)　33 3.2.4　偵聽(tīng)對(duì)象時(shí)獲取對(duì)象原值　34 3.2.5　使用immediate參數(shù)　36 3.2.6　對(duì)數(shù)組進(jìn)行偵聽(tīng)　36 本章小結(jié)　38 習(xí)題3　38 第4章　控制頁(yè)面的CSS樣式 4.1　綁定class屬性　39 4.1.1　以對(duì)象方式綁定class屬性　39 4.1.2　將class屬性與對(duì)象變量綁定　41 4.1.3　以數(shù)組方式綁定class屬性　42 4.1.4　動(dòng)態(tài)改變class屬性值　43 4.1.5　在數(shù)組中使用對(duì)象　43 4.2　綁定style屬性　44 4.2.1　以對(duì)象方式綁定style屬性　44 4.2.2　將style屬性與對(duì)象變量綁定　45 4.2.3　以數(shù)組方式綁定style屬性　46 4.2.4　動(dòng)態(tài)改變style屬性值　46 本章小結(jié)　47 習(xí)題4　47 第5章　事件處理 5.1　標(biāo)準(zhǔn)DOM中的事件　48 5.1.1　事件與事件流　48 5.1.2　事件對(duì)象　49 5.2　使用Vue.js處理事件　51 5.2.1　以?xún)?nèi)聯(lián)方式響應(yīng)事件　51 5.2.2　事件處理方法　52 5.2.3　在Vue.js中使用事件對(duì)象　53 5.3　動(dòng)手練習(xí)：監(jiān)視鼠標(biāo)移動(dòng)　54 5.4　事件修飾符　55 5.4.1　準(zhǔn)備基礎(chǔ)頁(yè)面　56 5.4.2　.stop　56 5.4.3　.self　57 5.4.4　.capture　57 5.4.5　.once　57 5.4.6　.prevent　58 5.4.7　事件修飾符使用說(shuō)明　58 5.4.8　按鍵修飾符　59 本章小結(jié)　61 習(xí)題5　61 第6章　表單綁定 6.1　輸入文本的綁定　62 6.1.1　文本框　62 6.1.2　多行文本框　63 6.2　選擇類(lèi)表單元素的綁定　64 6.2.1　單選按鈕　64 6.2.2　復(fù)選框　65 6.2.3　下拉框　66 6.2.4　多選列表框　66 6.2.5　鍵值對(duì)綁定　67 6.3　修飾符　68 6.3.1　.lazy　68 6.3.2　.number　68 6.3.3　.trim　69 本章小結(jié)　69 習(xí)題6　69 第7章　結(jié)構(gòu)渲染 7.1　條件渲染指令v-if　70 7.1.1　v-if和v-else　70 7.1.2　v-else-if　71 7.1.3　v-if和v-show　72 7.2　列表渲染指令v-for　73 7.2.1　基本列表　73 7.2.2　迭代對(duì)象數(shù)組　74 7.2.3　對(duì)象屬性列表　75 7.2.4　數(shù)值范圍　76 7.2.5　數(shù)組更新檢測(cè)　76 7.2.6　v-for中的key屬性有何作用　78 7.2.7　將v-for與v-if一同使用時(shí)的注意事項(xiàng)　80 本章小結(jié)　81 習(xí)題7　81 第8章　階段案例——網(wǎng)頁(yè)匯率計(jì)算器和番茄鐘 8.1　網(wǎng)頁(yè)匯率計(jì)算器　82 8.1.1　頁(yè)面結(jié)構(gòu)和樣式　83 8.1.2　數(shù)據(jù)模型　83 8.2　番茄鐘　86 8.2.1　功能描述　86 8.2.2　用到的知識(shí)點(diǎn)　87 8.2.3　頁(yè)面結(jié)構(gòu)和樣式　87 8.2.4　實(shí)現(xiàn)核心邏輯　88 8.2.5　使用Vue.js處理交互　91 本章小結(jié)　95 第9章　組件基礎(chǔ) 9.1　自定義組件與HTML標(biāo)記　97 9.1.1　組件的名稱(chēng)　98 9.1.2　組件的屬性　99 9.1.3　組件的內(nèi)容　100 9.1.4　在組件中處理事件　100 9.2　全局組件與局部組件　103 本章小結(jié)　105 習(xí)題9　105 第　10章 單文件組件 10.1　安裝Vue CLI腳手架工具　107 10.2　動(dòng)手練習(xí)：投票頁(yè)面　111 10.2.1　制作greeting組件　112 10.2.2　制作app組件　113 10.2.3　在父子組件之間傳遞數(shù)據(jù)　115 10.2.4　構(gòu)建用于生產(chǎn)環(huán)境的文件　119 10.3　單頁(yè)應(yīng)用和多頁(yè)應(yīng)用　120 10.3.1　單頁(yè)應(yīng)用和多頁(yè)應(yīng)用的區(qū)別　121 10.3.2　多頁(yè)應(yīng)用開(kāi)發(fā)　121 10.3.3　單頁(yè)應(yīng)用開(kāi)發(fā)　123 本章小結(jié)　129 習(xí)題10　129 第　11章 AJAX與Axios 11.1　認(rèn)識(shí)AJAX與Axios　130 11.1.1　AJAX的基本概念　130 11.1.2　AJAX的組成部分　132 11.1.3　用原生方法獲取異步數(shù)據(jù)　133 11.1.4　認(rèn)識(shí)Axios　135 11.2　Axios的基礎(chǔ)用法　136 11.2.1　基本用法　136 11.2.2　GET與POST　138 11.2.3　嵌套請(qǐng)求與并發(fā)請(qǐng)求　142 11.3　Axios的進(jìn)階用法　146 11.3.1　創(chuàng)建實(shí)例　146 11.3.2　實(shí)例的相關(guān)配置　146 11.3.3　錯(cuò)誤處理　147 11.3.4　攔截器　148 11.4　動(dòng)手練習(xí)：實(shí)現(xiàn)自動(dòng)提示的文本框　151 11.4.1　基本思路與結(jié)構(gòu)　152 11.4.2　樣式布局　152 11.4.3　匹配用戶(hù)輸入并顯示提示框　153 11.5　動(dòng)手練習(xí)：模擬百度的“數(shù)據(jù)加載中”效果　155 本章小結(jié)　155 習(xí)題11　156 第　12章 過(guò)渡動(dòng)畫(huà) 12.1　CSS過(guò)渡　157 12.2　單元素過(guò)渡　158 12.2.1　transition組件　158 12.2.2　過(guò)渡的類(lèi)名　159 12.3　動(dòng)手練習(xí)：可折疊的多級(jí)菜單　160 12.3.1　搭建頁(yè)面結(jié)構(gòu)　160 12.3.2　展開(kāi)和收起菜單　162 12.3.3　添加過(guò)渡效果　163 12.3.4　實(shí)現(xiàn)多級(jí)菜單　164 12.4　列表過(guò)渡　167 12.4.1　transition-group組件　167 12.4.2　動(dòng)手練習(xí)：待辦事項(xiàng)　169 本章小結(jié)　174 習(xí)題12　174 第　13章 路由Vue Router 13.1　基本用法　175 13.2　命名路由　179 13.3　路由動(dòng)態(tài)匹配　180 13.3.1　路由參數(shù)　180 13.3.2　多路由參數(shù)與偵聽(tīng)路由　182 13.3.3　查詢(xún)參數(shù)　184 13.3.4　捕獲所有路由　184 13.4　編程式導(dǎo)航　186 13.5　重定向和別名　186 13.6　進(jìn)階用法　187 13.6.1　導(dǎo)航守衛(wèi)　187 13.6.2　路由元信息　189 13.7　history模式　190 本章小結(jié)　190 習(xí)題13　190 第　14章 狀態(tài)管理 14.1　store模式　192 14.1.1　整體頁(yè)面結(jié)構(gòu)　193 14.1.2　創(chuàng)建store對(duì)象　193 14.1.3　使用store對(duì)象　194 14.2　Vuex的基本用法　196 14.3　深入掌握Vuex　199 14.3.1　在單文件組件中使用Vuex　199 14.3.2　action與mutation　203 14.4　動(dòng)手練習(xí)：改進(jìn)版的“待辦事項(xiàng)”（TodoList）　207 本章小結(jié)　208 習(xí)題14　208 第　15章 綜合案例——“豪華版”待辦事項(xiàng) 15.1　功能描述　212 15.2　用到的知識(shí)點(diǎn)　213 15.3　使用Vue CLI搭建項(xiàng)目　213 15.4　頁(yè)面結(jié)構(gòu)和樣式　215 15.4.1　添加待辦事項(xiàng)　215 15.4.2　任務(wù)狀態(tài)的篩選項(xiàng)以及對(duì)應(yīng)的任務(wù)個(gè)數(shù)　217 15.4.3　任務(wù)列表　218 15.4.4　編輯任務(wù)彈框　219 15.5　組件化　220 15.5.1　抽離單個(gè)任務(wù)　220 15.5.2　抽離編輯彈框　221 15.6　核心功能的實(shí)現(xiàn)　221 15.6.1　定義Todo類(lèi)　221 15.6.2　使用Vuex管理任務(wù)列表　222 15.7　實(shí)現(xiàn)各項(xiàng)功能　224 15.7.1　添加任務(wù)　224 15.7.2　顯示任務(wù)列表　225 15.7.3　動(dòng)態(tài)化篩選項(xiàng)　225 15.7.4　修改任務(wù)狀態(tài)　226 15.7.5　編輯任務(wù)　227 15.7.6　刪除任務(wù)　230 15.7.7　調(diào)整任務(wù)順序　230 15.7.8　持久化任務(wù)　231 本章小結(jié)　233 第　16章 綜合案例——網(wǎng)頁(yè)圖片剪裁器 16.1　整體分析　235 16.2　頁(yè)面結(jié)構(gòu)和CSS樣式　236 16.2.1　HTML結(jié)構(gòu)　236 16.2.2　選區(qū)部分的結(jié)構(gòu)與樣式　237 16.3　實(shí)現(xiàn)核心邏輯　238 16.3.1　定義基礎(chǔ)類(lèi)　238 16.3.2　定義Cropper類(lèi)　240 16.4　使用Vue.js處理交互　244 16.4.1　初始化圖像　244 16.4.2　繪制選區(qū)　246 16.4.3　移動(dòng)選區(qū)　251 16.4.4　調(diào)整選區(qū)大小　252 16.4.5　將手柄封裝為組件　256 16.4.6　最終剪裁　258 本章小結(jié)　259 第　17章 綜合案例——電子商務(wù)網(wǎng)站 17.1　案例總體介紹　260 17.1.1　案例目標(biāo)　260 17.1.2　最終效果展示　262 17.2　搭建網(wǎng)站框架　264 17.2.1　使用Vue CLI搭建項(xiàng)目　264 17.2.2　準(zhǔn)備基本頁(yè)面及路由　266 17.2.3　安裝Bootstrap　268 17.3　產(chǎn)品頁(yè)面　269 17.3.1　靜態(tài)產(chǎn)品列表頁(yè)　269 17.3.2　動(dòng)態(tài)化產(chǎn)品列表頁(yè)　270 17.3.3　產(chǎn)品詳情頁(yè)　273 17.3.4　頁(yè)面裝載狀態(tài)提示　274 17.4　購(gòu)物車(chē)　278 17.4.1　靜態(tài)結(jié)構(gòu)　278 17.4.2　實(shí)現(xiàn)購(gòu)物車(chē)可移動(dòng)　279 17.4.3　實(shí)現(xiàn)購(gòu)物車(chē)動(dòng)態(tài)化　281 17.5　完成網(wǎng)站剩余部分　284 本章小結(jié)　287 附錄A　從Vue.js 2升級(jí)到Vue.js　3 A.1　底層變化　288 A.2　開(kāi)發(fā)者使用層面的改進(jìn)　293 A.3　開(kāi)發(fā)工具層面的改進(jìn)　294 附錄B　ECMAScript 2015（ES6）基礎(chǔ)知識(shí) B.1　let關(guān)鍵字　296 B.2　const關(guān)鍵字　297 B.3　for…of循環(huán)　298 B.4　字符串模板　298 B.5　參數(shù)默認(rèn)值　298 B.6　類(lèi)與繼承　299 B.7　箭頭函數(shù)　300 B.8　剩余運(yùn)算符與剩余參數(shù)　302 B.9　展開(kāi)運(yùn)算符　302 B.10　數(shù)組的解構(gòu)賦值　303 B.11　對(duì)象的解構(gòu)賦值　303 B.12　模塊　304