Vue.js + Bootstrap Web 開發案例教程

隨著互聯網技術的不斷發展，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開發基礎

第　2章 計算屬性與偵聽器

第3章　控制頁面的CSS樣式

第4章　事件處理

第5章　表單綁定

第6章　結構渲染

第7章　組件基礎

第8章　單文件組件

第9章　AJAX與axios

第　10章 過渡和動畫

第　11章 Vue.js插件

 

【第二篇】　Bootstrap程序開發

第　12章 Bootstrap基礎

第　13章 CSS原子化與工具類

第　14章 Bootstrap的柵格佈局

第　15章 Bootstrap的表單樣式

第　16章 Bootstrap的常用組件

 

【第三篇】　綜合實戰

第　17章 綜合案例：產品著陸頁

第　18章 綜合案例：“豪華版”待辦事項

 

 

##　詳細目錄

 

【第　一篇】 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