【章名目錄】 第　1章 Web前端開發(fā)概述 第　2章 Vue.js開發(fā)基礎(chǔ) 第3章　計算屬性與偵聽器 第4章　控制頁面的CSS樣式 第5章　事件處理 第6章　表單綁定 第7章　結(jié)構(gòu)渲染 第8章　階段案例——網(wǎng)頁匯率計算器和番茄鐘 第9章　組件基礎(chǔ) 第　10章 單文件組件 第　11章 AJAX與Axios 第　12章 過渡動畫 第　13章 路由Vue Router 第　14章 狀態(tài)管理 第　15章 綜合案例——“豪華版”待辦事項 第　16章 綜合案例——網(wǎng)頁圖片剪裁器 第　17章 綜合案例——電子商務(wù)網(wǎng)站 附錄A　從Vue.js 2升級到Vue.js　3 附錄B　ECMAScript 2015（ES6）基礎(chǔ)知識 【詳細(xì)目錄】 第　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　10 1.6　上手實踐：第 一個Vue.js程序　11 本章小結(jié)　13 習(xí)題1　13 第　2章 Vue.js開發(fā)基礎(chǔ) 2.1　Vue應(yīng)用實例　14 2.1.1　文本插值　14 2.1.2　方法屬性　18 2.1.3　屬性綁定　21 2.1.4　插入HTML片段　22 2.2　Vue實例的生命周期　23 本章小結(jié)　25 習(xí)題2　25 第3章　計算屬性與偵聽器 3.1　計算屬性　26 3.1.1　定義計算屬性　26 3.1.2　計算屬性的緩存特性　28 3.2　偵聽器　31 3.2.1　偵聽器的應(yīng)用場景　31 3.2.2　偵聽器的基本用法　32 3.2.3　深度偵聽　33 3.2.4　偵聽對象時獲取對象原值　34 3.2.5　使用immediate參數(shù)　36 3.2.6　對數(shù)組進(jìn)行偵聽　36 本章小結(jié)　38 習(xí)題3　38 第4章　控制頁面的CSS樣式 4.1　綁定class屬性　39 4.1.1　以對象方式綁定class屬性　39 4.1.2　將class屬性與對象變量綁定　41 4.1.3　以數(shù)組方式綁定class屬性　42 4.1.4　動態(tài)改變class屬性值　43 4.1.5　在數(shù)組中使用對象　43 4.2　綁定style屬性　44 4.2.1　以對象方式綁定style屬性　44 4.2.2　將style屬性與對象變量綁定　45 4.2.3　以數(shù)組方式綁定style屬性　46 4.2.4　動態(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　事件對象　49 5.2　使用Vue.js處理事件　51 5.2.1　以內(nèi)聯(lián)方式響應(yīng)事件　51 5.2.2　事件處理方法　52 5.2.3　在Vue.js中使用事件對象　53 5.3　動手練習(xí)：監(jiān)視鼠標(biāo)移動　54 5.4　事件修飾符　55 5.4.1　準(zhǔn)備基礎(chǔ)頁面　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　事件修飾符使用說明　58 5.4.8　按鍵修飾符　59 本章小結(jié)　61 習(xí)題5　61 第6章　表單綁定 6.1　輸入文本的綁定　62 6.1.1　文本框　62 6.1.2　多行文本框　63 6.2　選擇類表單元素的綁定　64 6.2.1　單選按鈕　64 6.2.2　復(fù)選框　65 6.2.3　下拉框　66 6.2.4　多選列表框　66 6.2.5　鍵值對綁定　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　迭代對象數(shù)組　74 7.2.3　對象屬性列表　75 7.2.4　數(shù)值范圍　76 7.2.5　數(shù)組更新檢測　76 7.2.6　v-for中的key屬性有何作用　78 7.2.7　將v-for與v-if一同使用時的注意事項　80 本章小結(jié)　81 習(xí)題7　81 第8章　階段案例——網(wǎng)頁匯率計算器和番茄鐘 8.1　網(wǎng)頁匯率計算器　82 8.1.1　頁面結(jié)構(gòu)和樣式　83 8.1.2　數(shù)據(jù)模型　83 8.2　番茄鐘　86 8.2.1　功能描述　86 8.2.2　用到的知識點　87 8.2.3　頁面結(jié)構(gòu)和樣式　87 8.2.4　實現(xiàn)核心邏輯　88 8.2.5　使用Vue.js處理交互　91 本章小結(jié)　95 第9章　組件基礎(chǔ) 9.1　自定義組件與HTML標(biāo)記　97 9.1.1　組件的名稱　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　動手練習(xí)：投票頁面　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īng)用和多頁應(yīng)用　120 10.3.1　單頁應(yīng)用和多頁應(yīng)用的區(qū)別　121 10.3.2　多頁應(yīng)用開發(fā)　121 10.3.3　單頁應(yīng)用開發(fā)　123 本章小結(jié)　129 習(xí)題10　129 第　11章 AJAX與Axios 11.1　認(rèn)識AJAX與Axios　130 11.1.1　AJAX的基本概念　130 11.1.2　AJAX的組成部分　132 11.1.3　用原生方法獲取異步數(shù)據(jù)　133 11.1.4　認(rèn)識Axios　135 11.2　Axios的基礎(chǔ)用法　136 11.2.1　基本用法　136 11.2.2　GET與POST　138 11.2.3　嵌套請求與并發(fā)請求　142 11.3　Axios的進(jìn)階用法　146 11.3.1　創(chuàng)建實例　146 11.3.2　實例的相關(guān)配置　146 11.3.3　錯誤處理　147 11.3.4　攔截器　148 11.4　動手練習(xí)：實現(xiàn)自動提示的文本框　151 11.4.1　基本思路與結(jié)構(gòu)　152 11.4.2　樣式布局　152 11.4.3　匹配用戶輸入并顯示提示框　153 11.5　動手練習(xí)：模擬百度的“數(shù)據(jù)加載中”效果　155 本章小結(jié)　155 習(xí)題11　156 第　12章 過渡動畫 12.1　CSS過渡　157 12.2　單元素過渡　158 12.2.1　transition組件　158 12.2.2　過渡的類名　159 12.3　動手練習(xí)：可折疊的多級菜單　160 12.3.1　搭建頁面結(jié)構(gòu)　160 12.3.2　展開和收起菜單　162 12.3.3　添加過渡效果　163 12.3.4　實現(xiàn)多級菜單　164 12.4　列表過渡　167 12.4.1　transition-group組件　167 12.4.2　動手練習(xí)：待辦事項　169 本章小結(jié)　174 習(xí)題12　174 第　13章 路由Vue Router 13.1　基本用法　175 13.2　命名路由　179 13.3　路由動態(tài)匹配　180 13.3.1　路由參數(shù)　180 13.3.2　多路由參數(shù)與偵聽路由　182 13.3.3　查詢參數(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　整體頁面結(jié)構(gòu)　193 14.1.2　創(chuàng)建store對象　193 14.1.3　使用store對象　194 14.2　Vuex的基本用法　196 14.3　深入掌握Vuex　199 14.3.1　在單文件組件中使用Vuex　199 14.3.2　action與mutation　203 14.4　動手練習(xí)：改進(jìn)版的“待辦事項”（TodoList）　207 本章小結(jié)　208 習(xí)題14　208 第　15章 綜合案例——“豪華版”待辦事項 15.1　功能描述　212 15.2　用到的知識點　213 15.3　使用Vue CLI搭建項目　213 15.4　頁面結(jié)構(gòu)和樣式　215 15.4.1　添加待辦事項　215 15.4.2　任務(wù)狀態(tài)的篩選項以及對應(yīng)的任務(wù)個數(shù)　217 15.4.3　任務(wù)列表　218 15.4.4　編輯任務(wù)彈框　219 15.5　組件化　220 15.5.1　抽離單個任務(wù)　220 15.5.2　抽離編輯彈框　221 15.6　核心功能的實現(xiàn)　221 15.6.1　定義Todo類　221 15.6.2　使用Vuex管理任務(wù)列表　222 15.7　實現(xiàn)各項功能　224 15.7.1　添加任務(wù)　224 15.7.2　顯示任務(wù)列表　225 15.7.3　動態(tài)化篩選項　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)頁圖片剪裁器 16.1　整體分析　235 16.2　頁面結(jié)構(gòu)和CSS樣式　236 16.2.1　HTML結(jié)構(gòu)　236 16.2.2　選區(qū)部分的結(jié)構(gòu)與樣式　237 16.3　實現(xiàn)核心邏輯　238 16.3.1　定義基礎(chǔ)類　238 16.3.2　定義Cropper類　240 16.4　使用Vue.js處理交互　244 16.4.1　初始化圖像　244 16.4.2　繪制選區(qū)　246 16.4.3　移動選區(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搭建項目　264 17.2.2　準(zhǔn)備基本頁面及路由　266 17.2.3　安裝Bootstrap　268 17.3　產(chǎn)品頁面　269 17.3.1　靜態(tài)產(chǎn)品列表頁　269 17.3.2　動態(tài)化產(chǎn)品列表頁　270 17.3.3　產(chǎn)品詳情頁　273 17.3.4　頁面裝載狀態(tài)提示　274 17.4　購物車　278 17.4.1　靜態(tài)結(jié)構(gòu)　278 17.4.2　實現(xiàn)購物車可移動　279 17.4.3　實現(xiàn)購物車動態(tài)化　281 17.5　完成網(wǎng)站剩余部分　284 本章小結(jié)　287 附錄A　從Vue.js 2升級到Vue.js　3 A.1　底層變化　288 A.2　開發(fā)者使用層面的改進(jìn)　293 A.3　開發(fā)工具層面的改進(jìn)　294 附錄B　ECMAScript 2015（ES6）基礎(chǔ)知識 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　類與繼承　299 B.7　箭頭函數(shù)　300 B.8　剩余運算符與剩余參數(shù)　302 B.9　展開運算符　302 B.10　數(shù)組的解構(gòu)賦值　303 B.11　對象的解構(gòu)賦值　303 B.12　模塊　304