Vue.js+Bootstrap Web開(kāi)發(fā)案例教程
定 價(jià):69.8 元
- 作者:前沿科技 溫謙
- 出版時(shí)間:2022/4/1
- ISBN:9787115577528
- 出 版 社:人民郵電出版社
- 中圖法分類:TP392.092.2
- 頁(yè)碼:0
- 紙張:
- 版次:01
- 開(kāi)本:16開(kāi)
隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展,HTML5、CSS3、JavaScript語(yǔ)言及其相關(guān)技術(shù)越來(lái)越受人們的關(guān)注,各種前端框架層出不窮。Vue.js和Bootstrap作為前端框架中的優(yōu)秀代表,為廣大開(kāi)發(fā)者提供了諸多便利,在Web開(kāi)發(fā)技術(shù)中占據(jù)著重要地位。
本書(shū)內(nèi)容翔實(shí)、結(jié)構(gòu)清晰,通過(guò)豐富的案例詳細(xì)講解了Vue.js和Bootstrap框架的相關(guān)技術(shù)。在Vue.js部分,講解了計(jì)算屬性、偵聽(tīng)器、樣式控制、事件處理、表單綁定、結(jié)構(gòu)渲染、組件等核心基礎(chǔ)知識(shí);在此基礎(chǔ)上,講解組件化開(kāi)發(fā)的完整邏輯;最后拓展講解了AJAX、路由、狀態(tài)管理等高級(jí)內(nèi)容。在Bootstrap部分,主要講解了工具類、柵格布局、表單樣式和常用組件等內(nèi)容。本書(shū)使用了大量案例幫助讀者理解這兩個(gè)框架的使用方法,同時(shí)演示了綜合使用這兩個(gè)框架進(jìn)行Web開(kāi)發(fā)的方法。
本書(shū)既可作為高等院校相關(guān)專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)與制作、前端開(kāi)發(fā)等課程的教材,也可作為Vue.js和Bootstrap初學(xué)者的入門用書(shū)。
叢書(shū)特色:
(1)編排豐富實(shí)戰(zhàn)案例,可掃前言二維碼進(jìn)行快速預(yù)覽。
(2)提供在線實(shí)訓(xùn)平臺(tái)(http://code.artech.cn),支撐隨時(shí)開(kāi)展全書(shū)案例實(shí)戰(zhàn)演練。
(3)開(kāi)源分階實(shí)戰(zhàn)項(xiàng)目(http://www.geekfun.website),助力不同層次讀者(學(xué)生)獲取企業(yè)實(shí)戰(zhàn)項(xiàng)目開(kāi)發(fā)能力。
(4)配套多類教輔資源,包含文本類、視頻類(微課視頻)、案例類、平臺(tái)類等。
(5)建立教師服務(wù)與交流群(QQ群號(hào):368845661),立體化服務(wù)院校教師教學(xué)。
特別說(shuō)明:
為了使本書(shū)中的案例作用最大化,我們專門為其提供了“在線實(shí)訓(xùn)平臺(tái)”(http://code.artech.cn)。該平臺(tái)的具體功能介紹如下。
【在線實(shí)訓(xùn)平臺(tái)】功能:
(1)教師可以利用該平臺(tái),在上課過(guò)程中直接演練(展示)書(shū)中的所有案例,并可通過(guò)實(shí)時(shí)的運(yùn)行結(jié)果同步講解相關(guān)知識(shí)點(diǎn)和技能。
(2)師生可以通過(guò)該平臺(tái)觀看全書(shū)導(dǎo)學(xué)、原理講解、案例講解等視頻,配合實(shí)操演練,隨時(shí)隨地進(jìn)行學(xué)習(xí),支持開(kāi)展線上線下混合式教學(xué)。
(3)學(xué)生可以在課前或課后通過(guò)該平臺(tái),實(shí)操練習(xí)書(shū)中的所有案例,實(shí)時(shí)查看代碼運(yùn)行結(jié)果,而且所有案例代碼均支持復(fù)制與還原。
(4)學(xué)生還可以通過(guò)該平臺(tái)實(shí)操練習(xí)各章課后的實(shí)操題,并可通過(guò)微信分享功能,將實(shí)操的結(jié)果分享給其他人,如分享給老師進(jìn)行審閱。
說(shuō)明:掃描“從書(shū)序中的二維碼”可以了解該平臺(tái)的具體使用方法,教師也可通過(guò)“教師用書(shū)指導(dǎo)手冊(cè)”了解該平臺(tái)的具體操作步驟。
溫謙:
## 全棧工程師,前沿科技創(chuàng)始人,現(xiàn)從事企業(yè)大型軟件系統(tǒng)的分析與開(kāi)發(fā)工作,擁有超20年的軟件開(kāi)發(fā)經(jīng)驗(yàn),主持并成功開(kāi)發(fā)了多個(gè)復(fù)雜系統(tǒng),項(xiàng)目實(shí)戰(zhàn)經(jīng)驗(yàn)豐富。
## 常銷書(shū)作者,畢業(yè)于華中科技大學(xué)計(jì)算機(jī)專業(yè),主編網(wǎng)頁(yè)設(shè)計(jì)與軟件開(kāi)發(fā)相關(guān)領(lǐng)域圖書(shū)共12本,圖書(shū)編寫經(jīng)驗(yàn)頗豐,其中《HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與布局從入門到精通》《網(wǎng)頁(yè)設(shè)計(jì)與布局項(xiàng)目化教程(HTML+CSS+DIV)》等圖書(shū)常銷10余年,被百余所高校選作教材。
## 章名目錄
【第 一篇】 Vue.js程序開(kāi)發(fā)
第 1章 Vue.js開(kāi)發(fā)基礎(chǔ)
第 2章 計(jì)算屬性與偵聽(tīng)器
第3章 控制頁(yè)面的CSS樣式
第4章 事件處理
第5章 表單綁定
第6章 結(jié)構(gòu)渲染
第7章 組件基礎(chǔ)
第8章 單文件組件
第9章 AJAX與axios
第 10章 過(guò)渡和動(dòng)畫
第 11章 Vue.js插件
【第二篇】 Bootstrap程序開(kāi)發(fā)
第 12章 Bootstrap基礎(chǔ)
第 13章 CSS原子化與工具類
第 14章 Bootstrap的柵格布局
第 15章 Bootstrap的表單樣式
第 16章 Bootstrap的常用組件
【第三篇】 綜合實(shí)戰(zhàn)
第 17章 綜合案例:產(chǎn)品著陸頁(yè)
第 18章 綜合案例:“豪華版”待辦事項(xiàng)
## 詳細(xì)目錄
【第 一篇】 Vue.js程序開(kāi)發(fā)
第 1章 Vue.js開(kāi)發(fā)基礎(chǔ)
1.1 Web前端開(kāi)發(fā)概述 2
1.1.1 Web開(kāi)發(fā)簡(jiǎn)史 2
1.1.2 基于前后端分離模式的Web開(kāi)發(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開(kāi)發(fā)入門 10
1.2.1 Vue根實(shí)例 10
1.2.2 Vue實(shí)例的生命周期 19
本章小結(jié) 21
習(xí)題1 21
第 2章 計(jì)算屬性與偵聽(tīng)器
2.1 計(jì)算屬性 22
2.1.1 定義計(jì)算屬性 22
2.1.2 計(jì)算屬性的緩存特性 24
2.2 偵聽(tīng)器 27
2.2.1 偵聽(tīng)器的應(yīng)用場(chǎng)景 27
2.2.2 偵聽(tīng)器的基本用法 28
2.2.3 深度偵聽(tīng) 29
2.2.4 偵聽(tīng)對(duì)象時(shí)獲取對(duì)象原值 30
2.2.5 使用immediate參數(shù) 31
2.2.6 對(duì)數(shù)組的偵聽(tīng) 32
本章小結(jié) 35
習(xí)題2 35
第3章 控制頁(yè)面的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ǔ)頁(yè)面 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 事件修飾符的使用說(shuō)明 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 頁(yè)面結(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í)踐:投票頁(yè)面 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è)應(yīng)用和多頁(yè)應(yīng)用 106
8.4.1 單頁(yè)應(yīng)用和多頁(yè)應(yīng)用的區(qū)別 106
8.4.2 多頁(yè)應(yīng)用的開(kāi)發(fā) 107
8.4.3 單頁(yè)應(yīng)用的開(kāi)發(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章 過(guò)渡和動(dòng)畫
10.1 CSS過(guò)渡 131
10.2 單元素過(guò)渡 132
10.2.1 transition組件 132
10.2.2 過(guò)渡的類名 133
10.3 動(dòng)手實(shí)踐:可折疊的多級(jí)菜單 134
10.3.1 搭建頁(yè)面結(jié)構(gòu) 134
10.3.2 展開(kāi)和收起菜單 135
10.3.3 添加過(guò)渡效果 136
10.3.4 實(shí)現(xiàn)多級(jí)菜單 137
10.4 列表過(guò)渡 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程序開(kāi)發(fā)
第 12章 Bootstrap基礎(chǔ)
12.1 Bootstrap簡(jiǎn)介 173
12.2 下載并使用Bootstrap 174
12.3 常用樣式 176
12.3.1 文本樣式 176
12.3.2 圖片樣式 180
12.3.3 表格樣式 181
12.4 圖標(biāo)庫(kù) 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é)賬頁(yè)面 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)品著陸頁(yè)
17.1 頁(yè)面結(jié)構(gòu)分析 266
17.2 制作頁(yè)頭和頁(yè)腳 267
17.3 制作第 一屏 268
17.4 制作圖文介紹 269
17.5 制作課程特色 271
17.6 適配平板端 272
17.6.1 適配頁(yè)頭 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 頁(yè)面結(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