|
|
|
隨著互聯網技術的不斷發展，JavaScript語言及其相關技術越來越受到人們的關注，各種JavaScript框架層出不窮。Vue.js作為新一代JavaScript框架的代表，為廣大開發者提供了諸多便利，佔據著Web開發技術中的重要位置。本書詳細講解了Vue.js框架的相關技術，如數據綁定、偵聽、事件、樣式控制、結構渲染等核心基礎知識；並在此基礎上，講解了元件化開發的完整邏輯；講解了AJAX、過渡動畫、路由、狀態管理等內容。
本書內容翔實、結構框架清晰、講解循序漸進，注重各章以及實例之間的呼應與對照。此外，編者在本書中還編排了豐富的案例（包括綜合案例），並對Web前端的工程化進行了必要的講解，這能夠幫助讀者鞏固所學理論知識，提高程式設計實戰技能。本書既可以作為高等院校相關專業的網頁設計與製作、前端開發等課程的教材，也可以作為Vue.js初學者的入門用書。
溫謙
全棧工程師，前沿科技創始人，現從事企業大型軟件系統的分析與開發工作，擁有超20年的軟件開發經驗，主持並成功開發了多個複雜系統，專案實戰經驗豐富。
常銷書作者，畢業于華中科技大學計算機專業，主編網頁設計與軟體發展相關領域圖書共12本，圖書編寫經驗頗豐，其中《HTML+CSS網頁設計與佈局從入門到精通》《網頁設計與佈局專案化教程（HTML+CSS+DIV）》等圖書常銷10餘年，被百餘所高校選作教材。
【第一篇】 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）基礎知識
