Vue.js Web 開發案例教程

前沿科技 溫謙

  • 出版商: 人民郵電
  • 出版日期: 2022-05-01
  • 售價: $419
  • 貴賓價: 9.5$398
  • 語言: 簡體中文
  • 頁數: 304
  • ISBN: 7115577552
  • ISBN-13: 9787115577559
  • 相關分類: Vue.js
  • 立即出貨 (庫存=1)

  • Vue.js Web 開發案例教程-preview-1
  • Vue.js Web 開發案例教程-preview-2
Vue.js Web 開發案例教程-preview-1

買這商品的人也買了...

商品描述

隨著互聯網技術的不斷發展,JavaScript語言及其相關技術越來越受到人們的關註,各種JavaScript框架層出不窮。Vue.js作為新一代JavaScript框架的優秀代表,為廣大開發者提供了諸多便利,占據著Web開發技術中的重要位置。

本書詳細講解了Vue.js框架的相關技術,如數據綁定、偵聽、事件、樣式控制、結構渲染等核心基礎知識;並在此基礎上,講解了組件化開發的完整邏輯;最後講解了AJAX、過渡動畫、路由、狀態管理等高級內容。本書內容翔實、結構框架清晰、講解循序漸進,註重各章以及實例之間的呼應與對照。此外,編者在本書中還編排了豐富的案例(包括綜合案例),並對Web前端的工程化進行了必要的講解,這能夠幫助讀者鞏固所學理論知識,提高編程實戰技能。

本書既可以作為高等院校相關專業的網頁設計與製作、前端開發等課程的教材,也可以作為Vue.js初學者的入門用書。

作者簡介

温谦:

## 全栈工程师,前沿科技创始人,现从事企业大型软件系统的分析与开发工作,拥有20年的软件开发经验,主持并成功开发了多个复杂系统,项目实战经验丰富。

## 常销书作者,毕业于华中科技大学计算机专业,主编网页设计与软件开发相关领域图书共12本,图书编写经验颇丰,其中《HTML+CSS网页设计与布局从入门到精通》《网页设计与布局项目化教程(HTML+CSS+DIV)》等图书常销10余年,被百余所高校选作教材。

目錄大綱

## 章名目錄

 

【第 一篇】 Vue.js基礎篇

第 1章 Web前端開發概述

第 2章 Vue.js開發基礎

第3章 計算屬性與偵聽器

第4章 控制頁面的CSS樣式

第5章 事件處理

第6章 表單綁定

第7章 結構渲染

第8章 階段案例——網頁匯率計算器和番茄鐘

 

【第二篇】 Vue.js進階篇

第9章 組件基礎

第 10章 單文件組件

第 11章 AJAX與Axios

第 12章 過渡動畫

第 13章 路由Vue Router

第 14章 狀態管理

 

【第三篇】 綜合案例篇

第 15章 綜合案例——“豪華版”待辦事項

第 16章 綜合案例——網頁圖片剪裁器

第 17章 綜合案例——電子商務網站

 

附錄 ECMAScript 2015(ES6)基礎知識

 

 

## 詳細目錄

 

【第 一篇】 Vue.js基礎篇

 

第 1章 Web前端開發概述

1.1 Web開發簡史 2

1.2 基於前後端分離模式的Web開發 3

1.2.1 從提供內容到提供服務的轉變 3

1.2.2 從“單一網站”到“多終端應用” 4

1.3 Vue.js與MVVM模式 4

1.4 Vue.js開發中常用的工具 7

1.4.1 Chrome瀏覽器 7

1.4.2 VS Code文本編輯器 8

1.4.3 命令行控制台 9

1.5 安裝Vue.js 11

1.6 上手實踐:第 一個Vue.js程序 12

本章小結 14

習題1 14

 

第 2章 Vue.js開發基礎

2.1 Vue根實例 15

2.1.1 文本插值 15

2.1.2 方法屬性 19

2.1.3 屬性綁定 22

2.1.4 插入HTML片段 23

2.2 Vue實例的生命周期 24

本章小結 26

習題2 26

 

第3章 計算屬性與偵聽器

3.1 計算屬性 27

3.1.1 定義計算屬性 27

3.1.2 計算屬性的緩存特性 29

3.2 偵聽器 32

3.2.1 偵聽器的應用場景 32

3.2.2 偵聽器的基本用法 33

3.2.3 深度偵聽 34

3.2.4 偵聽對象時獲取對象原值 35

3.2.5 使用immediate參數 36

3.2.6 對數組進行偵聽 37

本章小結 40

習題3 40

 

第4章 控制頁面的CSS樣式

4.1 綁定class屬性 41

4.1.1 以對象方式綁定class屬性 41

4.1.2 將class屬性與對象變量綁定 43

4.1.3 以數組方式綁定class屬性 44

4.1.4 動態改變class屬性值 45

4.1.5 在數組中使用對象 45

4.2 綁定style屬性 46

4.2.1 以對象方式綁定style屬性 46

4.2.2 將style屬性與對象變量綁定 47

4.2.3 以數組方式綁定style屬性 48

4.2.4 動態改變style屬性值 48

本章小結 49

習題4 49

 

第5章 事件處理

5.1 標準DOM中的事件 50

5.1.1 事件與事件流 50

5.1.2 事件對象 51

5.2 使用Vue.js處理事件 53

5.2.1 以內聯方式響應事件 53

5.2.2 事件處理方法 54

5.2.3 在Vue.js中使用事件對象 55

5.3 動手練習:監視鼠標移動 56

5.4 事件修飾符 58

5.4.1 準備基礎頁面 58

5.4.2 .stop 59

5.4.3 .self 59

5.4.4 .capture 59

5.4.5 .once 60

5.4.6 .prevent 60

5.4.7 事件修飾符使用說明 61

5.4.8 按鍵修飾符 61

本章小結 63

習題5 63

 

第6章 表單綁定

6.1 輸入文本的綁定 65

6.1.1 文本框 65

6.1.2 多行文本框 66

6.2 選擇類表單元素的綁定 67

6.2.1 單選按鈕 67

6.2.2 復選框 68

6.2.3 下拉框 69

6.2.4 多選列表框 69

6.2.5 鍵值對綁定 70

6.3 修飾符 71

6.3.1 .lazy 71

6.3.2 .number 71

6.3.3 .trim 72

本章小結 72

習題6 72

 

第7章 結構渲染

7.1 條件渲染指令v-if 73

7.1.1 v-if和v-else 73

7.1.2 v-else-if 74

7.1.3 用key屬性管理可復用的元素 75

7.1.4 v-if與v-show 76

7.2 列表渲染指令v-for 77

7.2.1 基本列表 77

7.2.2 迭代對象數組 78

7.2.3 對象屬性列表 79

7.2.4 數值範圍 80

7.2.5 數組更新檢測 80

7.2.6 v-for中的key屬性有何作用 82

7.2.7 將v-for與v-if一同使用時的註意事項 84

本章小結 85

習題7 85

 

第8章 階段案例——網頁匯率計算器和番茄鐘

8.1 網頁匯率計算器 86

8.1.1 頁面結構和樣式 87

8.1.2 數據模型 87

8.2 番茄鐘 90

8.2.1 功能描述 90

8.2.2 用到的知識點 91

8.2.3 頁面結構和樣式 91

8.2.4 實現核心邏輯 92

8.2.5 使用Vue.js處理交互 96

本章小結 100

 

【第二篇】 Vue.js進階篇

 

第9章 組件基礎

9.1 自定義組件與HTML標記 102

9.1.1 組件的名稱 103

9.1.2 組件的屬性 104

9.1.3 組件的內容 105

9.1.4 在組件中處理事件 106

9.2 全局組件與局部組件 109

本章小結 110

習題9 110

 

第 10章 單文件組件

10.1 安裝Vue CLI腳手架工具 112

10.2 動手練習:投票頁面 117

10.2.1 製作greeting組件 117

10.2.2 製作app組件 118

10.2.3 在父子組件之間傳遞數據 121

10.2.4 構建用於生產環境的文件 125

10.3 單頁應用和多頁應用 126

10.3.1 單頁應用和多頁應用的區別 126

10.3.2 多頁應用開發 127

10.3.3 單頁應用開發 128

本章小結 134

習題10 134

 

第 11章 AJAX與Axios

11.1 認識AJAX與Axios 135

11.1.1 AJAX的基本概念 135

11.1.2 AJAX的組成部分 137

11.1.3 用原生方法獲取異步數據 138

11.1.4 認識Axios 141

11.2 Axios的基礎用法 141

11.2.1 基本用法 141

11.2.2 GET與POST 143

11.2.3 嵌套請求與並發請求 147

11.3 Axios的進階用法 151

11.3.1 創建實例 151

11.3.2 實例的相關配置 151

11.3.3 錯誤處理 152

11.3.4 攔截器 154

11.4 動手練習:實現自動提示的文本框 157

11.4.1 基本思路與結構 158

11.4.2 樣式佈局 158

11.4.3 匹配用戶輸入並顯示提示框 159

11.5 動手練習:模擬百度的“數據加載中”效果 161

本章小結 161

習題11 161

 

第 12章 過渡動畫

12.1 CSS過渡 163

12.2 單元素過渡 164

12.2.1 transition組件 164

12.2.2 過渡的類名 165

12.3 動手練習:可折疊的多級菜單 166

12.3.1 搭建頁面結構 166

12.3.2 展開和收起菜單 168

12.3.3 添加過渡效果 170

12.3.4 實現多級菜單 170

12.4 列表過渡 173

12.4.1 transition-group組件 173

12.4.2 動手練習:待辦事項 175

本章小結 180

習題12 180

 

第 13章 路由Vue Router

13.1 基本用法 182

13.2 命名路由 186

13.3 路由動態匹配 187

13.3.1 路由參數 187

13.3.2 多路由參數與偵聽路由 189

13.3.3 查詢參數 191

13.3.4 捕獲所有路由 191

13.4 編程式導航 193

13.5 重定向和別名 193

13.6 進階用法 194

13.6.1 導航守衛 194

13.6.2 路由元信息 196

13.7 history模式 197

本章小結 197

習題13 197

 

第 14章 狀態管理

14.1 store模式 199

14.1.1 整體頁面結構 200

14.1.2 創建store對象 200

14.1.3 使用store對象 201

14.2 Vuex的基本用法 203

14.3 深入掌握Vuex 206

14.3.1 在單文件組件中使用Vuex 206

14.3.2 action與mutation 210

14.4 動手練習:改進版的“待辦事項”(TodoList) 214

本章小結 215

習題14 215

 

【第三篇】 綜合案例篇

 

第 15章 綜合案例——“豪華版”待辦事項

15.1 功能描述 219

15.2 用到的知識點 220

15.3 使用Vue CLI搭建項目 220

15.4 頁面結構和樣式 222

15.4.1 添加待辦事項 222

15.4.2 任務狀態的篩選項以及對應的任務個數 224

15.4.3 任務列表 225

15.4.4 編輯任務彈框 226

15.5 組件化 227

15.5.1 抽離單個任務 227

15.5.2 抽離編輯彈框 228

15.6 核心功能的實現 228

15.6.1 定義Todo類 228

15.6.2 使用Vuex管理任務列表 229

15.7 實現各項功能 231

15.7.1 添加任務 231

15.7.2 顯示任務列表 232

15.7.3 動態化篩選項 233

15.7.4 修改任務狀態 234

15.7.5 編輯任務 234

15.7.6 刪除任務 237

15.7.7 調整任務順序 238

15.7.8 持久化任務 239

本章小結 241

 

第 16章 綜合案例——網頁圖片剪裁器

16.1 整體分析 243

16.2 頁面結構和CSS樣式 244

16.2.1 HTML結構 244

16.2.2 選區部分的結構與樣式 245

16.3 實現核心邏輯 246

16.3.1 定義基礎類 246

16.3.2 定義Cropper類 248

16.4 使用Vue.js處理交互 252

16.4.1 初始化圖像 252

16.4.2 繪制選區 254

16.4.3 移動選區 259

16.4.4 調整選區大小 260

16.4.5 將手柄封裝為組件 264

16.4.6 最終剪裁 266

本章小結 267

 

第 17章 綜合案例——電子商務網站

17.1 案例總體介紹 268

17.1.1 案例目標 268

17.1.2 最終效果展示 270

17.2 搭建網站框架 272

17.2.1 使用Vue CLI搭建項目 272

17.2.2 準備基本頁面及路由 274

17.2.3 安裝Bootstrap 276

17.3 產品頁面 277

17.3.1 靜態產品列表頁 277

17.3.2 動態化產品列表頁 278

17.3.3 產品詳情頁 281

17.3.4 頁面裝載狀態提示 283

17.4 購物車 286

17.4.1 靜態結構 286

17.4.2 實現購物車可移動 287

17.4.3 實現購物車動態化 289

17.5 完成網站剩餘部分 292

本章小結 295

 

附錄 ECMAScript 2015(ES6)基礎知識