|
|
|
隨著互聯網技術的不斷發展，HTML5、CSS3、JavaScript語言及其相關技術越來越受人們的關注，各種前端框架層出不窮。Vue.js和Bootstrap作為前端框架中的 代表，為廣大開發者提供了諸多便利，在Web開發技術中佔據著重要地位。 本書內容翔實、結構清晰，通過豐富的案例詳細講解了Vue.js和Bootstrap框架的相關技術。
在Vue.js部分，講解了計算屬性、偵聽器、樣式控制、事件處理、表單綁定、結構渲染、元件等核心基礎知識；在此基礎上，講解元件化開發的完整邏輯； 拓展講解了AJAX、路由、狀態管理等 內容。在Bootstrap部分，主要講解了工具類、柵格佈局、表單樣式和常用元件等內容。本書使用了大量案例幫助讀者理解這兩個框架的使用方法，同時演示了綜合使用這兩個框架進行Web開發的方法。 本書既可作為高等院校相關專業的網頁設計與製作、前端開發等課程的教材，也可作為Vue.js和Bootstrap初學者的入門用書。
溫謙
全棧工程師，前沿科技創始人，現從事企業大型軟體系統的分析與開發工作，擁有超20年的軟體發展經驗，主持並成功開發了多個複雜系統，專案實戰經驗豐富。
常銷書作者，畢業于華中科技大學電腦專業，主編網頁設計與軟體發展相關領域圖書共12本，圖書編寫經驗頗豐，其中《HTML+CSS網頁設計與佈局從入門到精通》《網頁設計與佈局專案化教程（HTML+CSS+DIV）》等圖書常銷10餘年，被百餘所高校選作教材。
【第 一篇】 Vue.js程式開發
第 1章 Vue.js開發基礎
1.1 Web前端開發概述 2
1.1.1 Web開發簡史 2
1.1.2 基於前後端分離模式的Web開發 3
1.1.3 Vue.js與MVVM模式 4
1.1.4 安裝Vue.js 7
1.1.5 上手實踐：第 一個Vue.js程式 8
1.2 Vue.js開發入門 10
1.2.1 Vue根實例 10
1.2.2 Vue實例的生命週期 19
本章小結 21
習題1 21
第 2章 計算屬性與偵聽器
2.1 計算屬性 22
2.1.1 定義計算屬性 22
2.1.2 計算屬性的緩存特性 24
2.2 偵聽器 27
2.2.1 偵聽器的應用場景 27
2.2.2 偵聽器的基本用法 28
2.2.3 深度偵聽 29
2.2.4 偵聽物件時獲取物件原值 30
2.2.5 使用immediate參數 31
2.2.6 對陣列的偵聽 32
本章小結 35
習題2 35
第3章 控制頁面的CSS樣式
3.1 綁定class屬性 36
3.1.1 以物件方式綁定 class屬性 36
3.1.2 將class屬性與物件變數綁定 38
3.1.3 以陣列方式綁定class屬性 39
3.1.4 動態改變class屬性值 40
3.1.5 在陣列中使用物件 40
3.2 綁定style屬性 41
3.2.1 以物件方式綁定style屬性 41
3.2.2 將style屬性與物件變數綁定 42
3.2.3 以陣列方式綁定style屬性 43
3.2.4 動態改變style屬性值 43
本章小結 44
習題3 44
第4章 事件處理
4.1 標準DOM中的事件 45
4.1.1 事件與事件流 45
4.1.2 事件物件 46
4.2 使用Vue.js處理事件 47
4.2.1 內聯方式回應事件 48
4.2.2 事件處理方法 48
4.2.3 在Vue.js中使用事件物件 50
4.3 動手練習：監視滑鼠移動 51
4.4 事件修飾符 52
4.4.1 準備基礎頁面 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
本章小結 58
習題4 58
第5章 表單綁定
5.1 輸入文本的綁定 59
5.1.1 文字方塊 59
5.1.2 多行文字方塊 60
5.2 選擇類表單元素的綁定 61
5.2.1 選項按鈕 61
5.2.2 核取方塊 62
5.2.3 下拉清單 63
5.2.4 多選清單方塊 63
5.2.5 鍵值對綁定 64
5.3 修飾符 65
5.3.1 .lazy修飾符 65
5.3.2 .number修飾符 65
5.3.3 .trim修飾符 66
本章小結 66
習題5 66
第6章 結構渲染
6.1 條件渲染指令v-if 67
6.1.1 v-if和v-else 67
6.1.2 v-else-if 68
6.1.3 用key管理可複用的元素 69
6.1.4 v-if與v-show 69
6.2 清單渲染指令v-for 70
6.2.1 基本列表 71
6.2.2 反覆運算物件陣列 71
6.2.3 物件屬性清單 73
6.2.4 數值範圍 73
6.2.5 陣列 新檢測 74
6.2.6 v-for中key的作用 76
6.2.7 v-for與v-if一同使用時的注意事項 78
6.3 案例——匯率計算器 79
6.3.1 頁面結構和樣式 79
6.3.2 資料模型 80
本章小結 82
習題6 82
第7章 組件基礎
7.1 自訂群組件與HTML標記 83
7.1.1 組件的名稱 84
7.1.2 元件的屬性 85
7.1.3 元件的內容 86
7.1.4 在組件中處理事件 86
7.2 通用群組件與局部元件 89
本章小結 91
習題7 91
第8章 單檔組件
8.1 基礎知識 92
8.2 安裝Vue CLI腳手架工具 93
8.2.1 安裝基礎環境 94
8.2.2 安裝Vue CLI 95
8.3 動手實踐：投票頁面 97
8.3.1 製作greeting組件 98
8.3.2 製作app組件 99
8.3.3 父子元件之間傳遞資料 101
8.3.4 構建用於生產環境的檔 105
8.4 單頁應用和多頁應用 106
8.4.1 單頁應用和多頁應用的區別 106
8.4.2 多頁應用的開發 107
8.4.3 單頁應用的開發 108
本章小結 114
習題8 114
第9章 AJAX與axios
9.1 認識axios 115
9.2 axios的基礎用法 116
9.2.1 基礎用法 116
9.2.2 GET與POST方法 118
9.2.3 嵌套請求與併發請求 121
9.3 axios的進階用法 124
9.3.1 創建實例 124
9.3.2 實例的相關配置 124
9.3.3 錯誤處理 125
9.3.4 攔截器 126
本章小結 130
習題9 130
第 10章 過渡和動畫
10.1 CSS過渡 131
10.2 單元素過渡 132
10.2.1 transition組件 132
10.2.2 過渡的類名 133
10.3 動手實踐：可折疊的多級菜單 134
10.3.1 搭建頁面結構 134
10.3.2 展開和收起菜單 135
10.3.3 添加過渡效果 136
10.3.4 實現多級功能表 137
10.4 列表過渡 140
本章小結 142
習題10 142
第 11章 Vue.js外掛程式
11.1 Vue Router 143
11.1.1 基本用法 143
11.1.2 命名路由 147
11.1.3 路由動態匹配 148
11.1.4 程式設計式導航 153
11.1.5 重定向和別名 154
11.1.6 進階用法 155
11.1.7 history模式 157
11.2 狀態管理 158
11.2.1 Vuex的基本用法 158
11.2.2 深入掌握Vuex 161
本章小結 169
習題11 169
【第二篇】 Bootstrap程式開發
第 12章 Bootstrap基礎
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 圖示庫 183
本章小結 185
習題12 185
第 13章 CSS原子化與工具類
13.1 CSS原子化的理念 186
13.2 Bootstrap的工具類規則 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 實例：製作導航菜單 196
13.5.4 float 199
13.6 其他工具類 199
13.7 動手練習：創建嵌套的留言組件 201
13.7.1 搭建框架 202
13.7.2 用工具類佈局 202
13.7.3 頭像放右側 202
13.7.4 實現佈局的嵌套 203
本章小結 204
習題13 204
第 14章 Bootstrap的柵格佈局
14.1 柵格佈局基礎 205
14.1.1 柵格佈局理念 205
14.1.2 上手案例 207
14.1.3 理解螢幕解析度的概念 213
14.2 基本用法 215
14.2.1 回應式中斷點 215
14.2.2 常規用法 216
14.2.3 設置行間距與列間距 218
14.3 用法 221
14.3.1 柵格嵌套 221
14.3.2 流式佈局 222
14.3.3 設定列寬 223
14.3.4 列的偏移與對齊 225
本章小結 228
習題14 228
第 15章 Bootstrap的表單樣式
15.1 表單控制項樣式 229
15.1.1 文字方塊 229
15.1.2 選擇框 233
15.1.3 單選框與核取方塊 234
15.1.4 滑動條輸入 235
15.1.5 輸入組 236
15.2 表單佈局 237
15.3 表單驗證 239
15.3.1 用戶端校驗 239
15.3.2 伺服器端校驗 240
15.4 動手練習：創建一個結帳頁面 242
本章小結 242
習題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 模態框 250
16.3 回應式巡覽列 252
16.4 卡片元件 256
16.4.1 實例：卡片 256
16.4.2 實例：瀑布流佈局的相冊 258
16.5 輪播圖組件 261
本章小結 262
習題16 262
【第三篇】 綜合實戰
第 17章 綜合案例：產品著陸頁
17.1 頁面結構分析 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
本章小結 279
第 18章 綜合案例：“豪華版”待辦事項
18.1 功能描述 281
18.2 用到的知識點 281
18.3 使用Vue CLI搭建專案 282
18.4 頁面結構和樣式 284
18.4.1 安裝並引入Bootstrap 284
18.4.2 添加待辦事項 284
18.4.3 篩選項 285
18.4.4 任務列表 286
18.4.5 編輯任務彈窗 287
18.5 組件化 288
18.5.1 抽離單個任務項 289
18.5.2 抽離彈窗 289
18.6 實現核心功能 290
18.6.1 定義Todo類 290
18.6.2 使用Vuex管理任務列表 291
18.7 實現各項功能 292
18.7.1 添加待辦事項 292
18.7.2 顯示任務清單 293
18.7.3 動態化篩選項 294
18.7.4 修改任務狀態 295
18.7.5 編輯任務 296
18.7.6 刪除任務 300
18.7.7 調整任務順序 300
18.7.8 持久化任務 302
本章小結 303
