## 章名目錄 【第 一篇】　Vue.js程序開發(fā) 第 1章　Vue.js開發(fā)基礎(chǔ) 第 2章　計(jì)算屬性與偵聽器 第3章　控制頁面的CSS樣式 第4章　事件處理 第5章　表單綁定 第6章　結(jié)構(gòu)渲染 第7章　組件基礎(chǔ) 第8章　單文件組件 第9章　AJAX與axios 第 10章　過渡和動(dòng)畫 第 11章　Vue.js插件 【第二篇】 Bootstrap程序開發(fā) 第 12章　Bootstrap基礎(chǔ) 第 13章　CSS原子化與工具類 第 14章　Bootstrap的柵格布局 第 15章　Bootstrap的表單樣式 第 16章　Bootstrap的常用組件 【第三篇】 綜合實(shí)戰(zhàn) 第 17章　綜合案例：產(chǎn)品著陸頁 第 18章　綜合案例：“豪華版”待辦事項(xiàng) ## 詳細(xì)目錄 【第 一篇】　Vue.js程序開發(fā) 第 1章　Vue.js開發(fā)基礎(chǔ) 1.1 Web前端開發(fā)概述　2 1.1.1 Web開發(fā)簡史　2 1.1.2 基于前后端分離模式的Web開發(fā)　3 1.1.3 Vue.js與MVVM模式　4 1.1.4 安裝Vue.js　7 1.1.5 上手實(shí)踐：第 一個(gè)Vue.js程序　8 1.2 Vue.js開發(fā)入門　10 1.2.1 Vue根實(shí)例　10 1.2.2 Vue實(shí)例的生命周期　19 本章小結(jié)　21 習(xí)題1　21 第 2章　計(jì)算屬性與偵聽器 2.1 計(jì)算屬性　22 2.1.1 定義計(jì)算屬性　22 2.1.2 計(jì)算屬性的緩存特性　24 2.2 偵聽器　27 2.2.1 偵聽器的應(yīng)用場(chǎng)景　27 2.2.2 偵聽器的基本用法　28 2.2.3 深度偵聽　29 2.2.4 偵聽對(duì)象時(shí)獲取對(duì)象原值　30 2.2.5 使用immediate參數(shù)　31 2.2.6 對(duì)數(shù)組的偵聽　32 本章小結(jié)　35 習(xí)題2　35 第3章　控制頁面的CSS樣式 3.1 綁定class屬性　36 3.1.1 以對(duì)象方式綁定 class屬性　36 3.1.2 將class屬性與對(duì)象變量綁定　38 3.1.3 以數(shù)組方式綁定class屬性　39 3.1.4 動(dòng)態(tài)改變class屬性值　40 3.1.5 在數(shù)組中使用對(duì)象　40 3.2 綁定style屬性　41 3.2.1 以對(duì)象方式綁定style屬性　41 3.2.2 將style屬性與對(duì)象變量綁定　42 3.2.3 以數(shù)組方式綁定style屬性　43 3.2.4 動(dòng)態(tài)改變style屬性值　43 本章小結(jié)　44 習(xí)題3　44 第4章　事件處理 4.1 標(biāo)準(zhǔn)DOM中的事件　45 4.1.1 事件與事件流　45 4.1.2 事件對(duì)象　46 4.2 使用Vue.js處理事件　47 4.2.1 內(nèi)聯(lián)方式響應(yīng)事件　48 4.2.2 事件處理方法　48 4.2.3 在Vue.js中使用事件對(duì)象　50 4.3 動(dòng)手練習(xí)：監(jiān)視鼠標(biāo)移動(dòng)　51 4.4 事件修飾符　52 4.4.1 準(zhǔn)備基礎(chǔ)頁面　52 4.4.2 .stop修飾符　53 4.4.3 .self修飾符　53 4.4.4 .capture修飾符　54 4.4.5 .once修飾符　54 4.4.6 .prevent修飾符　54 4.4.7 事件修飾符的使用說明　55 4.4.8 按鍵修飾符　55 本章小結(jié)　58 習(xí)題4　58 第5章　表單綁定 5.1 輸入文本的綁定　59 5.1.1 文本框　59 5.1.2 多行文本框　60 5.2 選擇類表單元素的綁定　61 5.2.1 單選按鈕　61 5.2.2 復(fù)選框　62 5.2.3 下拉框　63 5.2.4 多選列表框　63 5.2.5 鍵值對(duì)綁定　64 5.3 修飾符　65 5.3.1 .lazy修飾符　65 5.3.2 .number修飾符　65 5.3.3 .trim修飾符　66 本章小結(jié)　66 習(xí)題5　66 第6章　結(jié)構(gòu)渲染 6.1 條件渲染指令v-if　67 6.1.1 v-if和v-else　67 6.1.2 v-else-if　68 6.1.3 用key管理可復(fù)用的元素　69 6.1.4 v-if與v-show　69 6.2 列表渲染指令v-for　70 6.2.1 基本列表　71 6.2.2 迭代對(duì)象數(shù)組　71 6.2.3 對(duì)象屬性列表　73 6.2.4 數(shù)值范圍　73 6.2.5 數(shù)組更新檢測(cè)　74 6.2.6 v-for中key的作用　76 6.2.7 v-for與v-if一同使用時(shí)的注意事項(xiàng)　78 6.3 案例——匯率計(jì)算器　79 6.3.1 頁面結(jié)構(gòu)和樣式　79 6.3.2 數(shù)據(jù)模型　80 本章小結(jié)　82 習(xí)題6　82 第7章　組件基礎(chǔ) 7.1 自定義組件與HTML標(biāo)記　83 7.1.1 組件的名稱　84 7.1.2 組件的屬性　85 7.1.3 組件的內(nèi)容　86 7.1.4 在組件中處理事件　86 7.2 全局組件與局部組件　89 本章小結(jié)　91 習(xí)題7　91 第8章　單文件組件 8.1 基礎(chǔ)知識(shí)　92 8.2 安裝Vue CLI腳手架工具　93 8.2.1 安裝基礎(chǔ)環(huán)境　94 8.2.2 安裝Vue CLI　95 8.3 動(dòng)手實(shí)踐：投票頁面　97 8.3.1 制作greeting組件　98 8.3.2 制作app組件　99 8.3.3 父子組件之間傳遞數(shù)據(jù)　101 8.3.4 構(gòu)建用于生產(chǎn)環(huán)境的文件　105 8.4 單頁應(yīng)用和多頁應(yīng)用　106 8.4.1 單頁應(yīng)用和多頁應(yīng)用的區(qū)別　106 8.4.2 多頁應(yīng)用的開發(fā)　107 8.4.3 單頁應(yīng)用的開發(fā)　108 本章小結(jié)　114 習(xí)題8　114 第9章　AJAX與axios 9.1 認(rèn)識(shí)axios　115 9.2 axios的基礎(chǔ)用法　116 9.2.1 基礎(chǔ)用法　116 9.2.2 GET與POST方法　118 9.2.3 嵌套請(qǐng)求與并發(fā)請(qǐng)求　121 9.3 axios的進(jìn)階用法　124 9.3.1 創(chuàng)建實(shí)例　124 9.3.2 實(shí)例的相關(guān)配置　124 9.3.3 錯(cuò)誤處理　125 9.3.4 攔截器　126 本章小結(jié)　130 習(xí)題9　130 第 10章　過渡和動(dòng)畫 10.1 CSS過渡　131 10.2 單元素過渡　132 10.2.1 transition組件　132 10.2.2 過渡的類名　133 10.3 動(dòng)手實(shí)踐：可折疊的多級(jí)菜單　134 10.3.1 搭建頁面結(jié)構(gòu)　134 10.3.2 展開和收起菜單　135 10.3.3 添加過渡效果　136 10.3.4 實(shí)現(xiàn)多級(jí)菜單　137 10.4 列表過渡　140 本章小結(jié)　142 習(xí)題10　142 第 11章　Vue.js插件 11.1 Vue Router　143 11.1.1 基本用法　143 11.1.2 命名路由　147 11.1.3 路由動(dòng)態(tài)匹配　148 11.1.4 編程式導(dǎo)航　153 11.1.5 重定向和別名　154 11.1.6 進(jìn)階用法　155 11.1.7 history模式　157 11.2 狀態(tài)管理　158 11.2.1 Vuex的基本用法　158 11.2.2 深入掌握Vuex　161 本章小結(jié)　169 習(xí)題11　169 【第二篇】 Bootstrap程序開發(fā) 第 12章　Bootstrap基礎(chǔ) 12.1 Bootstrap簡介　173 12.2 下載并使用Bootstrap　174 12.3 常用樣式　176 12.3.1 文本樣式　176 12.3.2 圖片樣式　180 12.3.3 表格樣式　181 12.4 圖標(biāo)庫　183 本章小結(jié)　185 習(xí)題12　185 第 13章　CSS原子化與工具類 13.1 CSS原子化的理念　186 13.2 Bootstrap的工具類規(guī)則　190 13.3 顏色　191 13.4 尺寸　192 13.4.1 font-size　193 13.4.2 padding和margin　193 13.4.3 width和height　194 13.5 布局　194 13.5.1 display　195 13.5.2 flexbox　195 13.5.3 實(shí)例：制作導(dǎo)航菜單　196 13.5.4 float　199 13.6 其他工具類　199 13.7 動(dòng)手練習(xí)：創(chuàng)建嵌套的留言組件　201 13.7.1 搭建框架　202 13.7.2 用工具類布局　202 13.7.3 頭像放右側(cè)　202 13.7.4 實(shí)現(xiàn)布局的嵌套　203 本章小結(jié)　204 習(xí)題13　204 第 14章　Bootstrap的柵格布局 14.1 柵格布局基礎(chǔ)　205 14.1.1 柵格布局理念　205 14.1.2 上手案例　207 14.1.3 理解屏幕分辨率的概念　213 14.2 基本用法　215 14.2.1 響應(yīng)式斷點(diǎn)　215 14.2.2 常規(guī)用法　216 14.2.3 設(shè)置行間距與列間距　218 14.3 高級(jí)用法　221 14.3.1 柵格嵌套　221 14.3.2 流式布局　222 14.3.3 設(shè)定列寬　223 14.3.4 列的偏移與對(duì)齊　225 本章小結(jié)　228 習(xí)題14　228 第 15章　Bootstrap的表單樣式 15.1 表單控件樣式　229 15.1.1 文本框　229 15.1.2 選擇框　233 15.1.3 單選框與復(fù)選框　234 15.1.4 滑動(dòng)條輸入　235 15.1.5 輸入組　236 15.2 表單布局　237 15.3 表單驗(yàn)證　239 15.3.1 客戶端校驗(yàn)　239 15.3.2 服務(wù)器端校驗(yàn)　240 15.4 動(dòng)手練習(xí)：創(chuàng)建一個(gè)結(jié)賬頁面　242 本章小結(jié)　242 習(xí)題15　243 第 16章　Bootstrap的常用組件 16.1 按鈕　244 16.2 反饋和提示類組件　246 16.2.1 警告框　246 16.2.2 加載中　246 16.2.3 輕量提示　247 16.2.4 模態(tài)框　250 16.3 響應(yīng)式導(dǎo)航欄　252 16.4 卡片組件　256 16.4.1 實(shí)例：卡片　256 16.4.2 實(shí)例：瀑布流布局的相冊(cè)　258 16.5 輪播圖組件　261 本章小結(jié)　262 習(xí)題16　262 【第三篇】 綜合實(shí)戰(zhàn) 第 17章　綜合案例：產(chǎn)品著陸頁 17.1 頁面結(jié)構(gòu)分析　266 17.2 制作頁頭和頁腳　267 17.3 制作第 一屏　268 17.4 制作圖文介紹　269 17.5 制作課程特色　271 17.6 適配平板端　272 17.6.1 適配頁頭　273 17.6.2 適配第 一屏　273 17.6.3 適配圖文介紹　274 17.6.4 適配課程特色　275 17.7 適配PC端　276 本章小結(jié)　279 第 18章　綜合案例：“豪華版”待辦事項(xiàng) 18.1 功能描述　281 18.2 用到的知識(shí)點(diǎn)　281 18.3 使用Vue CLI搭建項(xiàng)目　282 18.4 頁面結(jié)構(gòu)和樣式　284 18.4.1 安裝并引入Bootstrap　284 18.4.2 添加待辦事項(xiàng)　284 18.4.3 篩選項(xiàng)　285 18.4.4 任務(wù)列表　286 18.4.5 編輯任務(wù)彈窗　287 18.5 組件化　288 18.5.1 抽離單個(gè)任務(wù)項(xiàng)　289 18.5.2 抽離彈窗　289 18.6 實(shí)現(xiàn)核心功能　290 18.6.1 定義Todo類　290 18.6.2 使用Vuex管理任務(wù)列表　291 18.7 實(shí)現(xiàn)各項(xiàng)功能　292 18.7.1 添加待辦事項(xiàng)　292 18.7.2 顯示任務(wù)列表　293 18.7.3 動(dòng)態(tài)化篩選項(xiàng)　294 18.7.4 修改任務(wù)狀態(tài)　295 18.7.5 編輯任務(wù)　296 18.7.6 刪除任務(wù)　300 18.7.7 調(diào)整任務(wù)順序　300 18.7.8 持久化任務(wù)　302 本章小結(jié)　303