內容簡介
本書通過套用示例和綜合案例的講解與演練,使讀者快速掌握Vue.js 3.x編程知識,提高使用Vue.js開發網站和移動App的實戰能力。本書配套示例源碼、PPT課件、同步教學視頻、教學大綱與執行進度表、習題與答案、其他超值教學資源。
本書共18章,內容包括快速進入Vue.js的世界、搭建開發與調試環境、熟悉ECMAScript 6的語法、熟悉Vue.js的語法、指令、計算屬性、精通監聽器、事件處理、class與style綁定、表單輸入綁定、組件和組合API、過渡和動畫效果、精通Vue CLI和Vite、使用Vue Router開發單頁面套用、數據請求庫——Axios、狀態管理——Vuex、網上購物商城開發實戰和電影購票App開發實戰等。
本書內容豐富、理論結合實踐,可以作為工具書和參考手冊,適合Web前端開發初學者、網站與移動App設計和開發人員,也適合作為高等院校、
圖書目錄
第1章 快速進入Vue.js的世界 1
1.1 前端開發技術的發展 1
1.2 MV*模式 2
1.2.1 MVC模式 2
1.2.2 MVVM模式 2
1.3 Vue.js概述 3
1.4 Vue.js的發展歷程 4
1.5 Vue.js 3.x的新變化 5
1.6 疑難解惑 6
第2章 搭建開發與調試環境 8
2.1 安裝Vue.js 8
2.1.1 使用CDN方式 8
2.1.2 NPM 9
2.1.3 命令行工具(CLI) 9
2.1.4 使用Vite方式 10
2.2 安裝WebStorm 10
2.3 安裝vue-devtools 14
2.4 第一個Vue.js程式 16
2.5 疑難解惑 19
第3章 熟悉ECMAScript 6的語法 20
3.1 ECMAScript 6介紹 20
3.1.1 ES 6的前世今生 20
3.1.2 為什麼要使用ES 6 21
3.2 塊作用域構造let和const 21
3.3 模板字面量 23
3.3.1 多行字元串 23
3.3.2 字元串占位符 24
3.4 默認參數和rest參數 24
3.5 解構賦值 25
3.6 展開運算符 27
3.7 增強的對象文本 28
3.8 箭頭函式 30
3.9 Promise實現 31
3.10 Classes(類) 32
3.11 Modules(模組) 33
3.12 疑難解惑 33
第4章 熟悉Vue.js的語法 35
4.1 創建應用程式實例 35
4.2 插值 36
4.3 方法選項 39
4.3.1 使用方法 39
4.3.2 傳遞參數 41
4.3.3 方法之間的調用 42
4.4 指令 43
4.5 縮寫 45
4.6 Vue.js 3.x的新變化——取消構造函式 46
4.7 綜合案例——通過插值語法實現姓名組合 46
4.8 疑難解惑 47
第5章 指令 48
5.1 內置指令 48
5.1.1 v-show 48
5.1.2 v-if/v-else-if/v-else 49
5.1.3 v-for 51
5.1.4 v-bind 63
5.1.5 v-model 64
5.1.6 v-on 65
5.1.7 v-text 66
5.1.8 v-html 67
5.1.9 v-once 68
5.1.10 v-pre 69
5.1.11 v-cloak 69
5.2 自定義指令 70
5.2.1 註冊自定義指令 70
5.2.2 鉤子函式 71
5.2.3 動態指令參數 73
5.3 綜合案例——通過指令實現下拉選單效果 74
5.4 疑難解惑 76
第6章 計算屬性 77
6.1 使用計算屬性 77
6.2 計算屬性的getter和setter方法 78
6.3 計算屬性的快取 80
6.4 使用計算屬性代替v-for和v-if 82
6.5 綜合案例——使用計算屬性設計購物車效果 84
6.6 疑難解惑 87
第7章 精通監聽器 88
7.1 使用監聽器 88
7.2 監聽方法 89
7.3 監聽對象 90
7.4 綜合案例——使用監聽器設計購物車效果 93
7.5 疑難解惑 95
第8章 事件處理 96
8.1 監聽事件 96
8.2 事件處理方法 97
8.3 事件修飾符 100
8.3.1 stop 100
8.3.2 capture 102
8.3.3 self 104
8.3.4 once 106
8.3.5 prevent 106
8.3.6 passive 107
8.4 按鍵修飾符 108
8.5 系統修飾鍵 110
8.6 綜合案例——處理用戶註冊信息 111
8.7 疑難解惑 113
第9章 class與style綁定 114
9.1 綁定HTML樣式(class) 114
9.1.1 數組語法 114
9.1.2 對象語法 116
9.1.3 在組件上使用class屬性 120
9.2 綁定內聯樣式(style) 120
9.2.1 對象語法 120
9.2.2 數組語法 123
9.3 綜合案例——設計隔行變色的商品表 124
9.4 疑難解惑 126
第10章 表單輸入綁定 127
10.1 實現雙向數據綁定 127
10.2 單行文本輸入框 127
10.3 多行文本輸入框 128
10.4 複選框 129
10.5 單選按鈕 131
10.6 選擇框 132
10.7 值綁定 134
10.7.1 複選框 135
10.7.2 單選框 135
10.7.3 選擇框的選項 136
10.8 修飾符 137
10.8.1 lazy 137
10.8.2 number 138
10.8.3 trim 139
10.9 綜合案例——設計用戶註冊頁面 139
10.10 疑難解惑 141
第11章 組件和組合API 143
11.1 組件是什麼 143
11.2 組件的註冊 143
11.2.1 全局註冊 144
11.2.2 局部註冊 145
11.3 使用prop向子組件傳遞數據 145
11.3.1 prop的基本用法 146
11.3.2 單向數據流 149
11.3.3 prop驗證 150
11.3.4 非prop的屬性 151
11.4 子組件向父組件傳遞數據 153
11.4.1 監聽子組件事件 153
11.4.2 將原生事件綁定到組件 155
11.4.3 .sync修飾符 156
11.5 插槽 158
11.5.1 插槽的基本用法 158
11.5.2 編譯作用域 158
11.5.3 默認內容 159
11.5.4 命名插槽 160
11.5.5 作用域插槽 162
11.5.6 解構插槽prop 164
11.6 Vue.js 3.x的新變化1——組合API 165
11.7 setup()函式 166
11.8 回響式API 167
11.8.1 reactive()方法和watchEffect()方法 167
11.8.2 ref()方法 168
11.8.3 readonly()方法 169
11.8.4 computed()方法 170
11.8.5 watch()方法 170
11.9 Vue.js 3.x的新變化2——訪問組件的方式 171
11.10 綜合案例——使用組件創建樹狀項目分類 172
11.11 疑難解惑 173
第12章 過渡和動畫效果 174
12.1 單元素/組件的過渡 174
12.1.1 CSS過渡 174
12.1.2 過渡的類名 176
12.1.3 CSS動畫 179
12.1.4 自定義過渡的類名 180
12.1.5 動畫的JavaScript鉤子函式 181
12.2 初始渲染的過渡 184
12.3 多個元素的過渡 186
12.4 列表過渡 187
12.4.1 列表的進入/離開過渡 187
12.4.2 列表的排序過渡 188
12.4.3 列表的交錯過渡 190
12.5 綜合案例1——商品編號增加器 191
12.6 綜合案例2——設計下拉選單的過渡動畫 193
12.7 疑難解惑 195
第13章 精通Vue CLI和Vite 196
13.1 腳手架的組件 196
13.2 腳手架環境搭建 197
13.3 安裝腳手架 199
13.4 創建項目 200
13.4.1 使用命令 200
13.4.2 使用圖形化界面 202
13.5 分析項目結構 205
13.6 配置Scss、Less和Stylus 207
13.7 配置檔案package.json 209
13.8 Vue.js 3.x新增的開發構建工具——Vite 210
13.9 疑難解惑 212
第14章 使用Vue Router開發單頁面套用 213
14.1 使用Vue Router 213
14.1.1 在HTML頁面使用路由 213
14.1.2 在項目中使用路由 218
14.2 命名路由 219
14.3 命名視圖 221
14.4 路由傳參 225
14.5 編程式導航 229
14.6 組件與Vue Router間解耦 233
14.6.1 布爾模式 233
14.6.2 對象模式 236
14.6.3 函式模式 239
14.7 疑難解惑 242
第15章 數據請求庫—Axios 243
15.1 什麼是Axios 243
15.2 安裝Axios 244
15.3 基本用法 244
15.3.1 Axios的get請求和post請求 244
15.3.2 請求同域下的JSON數據 246
15.3.3 跨域請求數據 248
15.3.4 並發請求 250
15.4 Axios API 250
15.5 請求配置 251
15.6 創建實例 253
15.7 配置默認選項 253
15.8 攔截器 254
15.9 Vue.js 3.x的新變化——替代Vue.prototype 254
15.10 綜合案例——顯示近7天的天氣情況 255
15.11 疑難解惑 257
第16章 狀態管理—Vuex 258
16.1 什麼是Vuex 258
16.2 安裝Vuex 259
16.3 在項目中使用Vuex 260
16.3.1 搭建一個項目 260
16.3.2 state對象 261
16.3.3 getter對象 262
16.3.4 mutation對象 264
16.3.5 action對象 265
16.4 綜合案例——使用Vuex開發商城購物車功能 268
16.5 疑難解惑 274
第17章 網上購物商城開發實戰 275
17.1 系統功能結構 275
17.2 系統結構分析 276
17.3 系統運行效果 276
17.4 系統功能模組設計與實現 277
17.4.1 首頁模組 277
17.4.2 首頁信息展示模組 278
17.4.3 用戶登錄模組 281
17.4.4 商品模組 283
17.4.5 購買模組 288
17.4.6 支付模組 289
第18章 電影購票App開發實戰 292
18.1 腳手架項目的搭建 292
18.2 系統結構 292
18.3 系統運行效果 293
18.4 設計項目組件 294
18.4.1 設計頭部和底部導航組件 294
18.4.2 設計電影頁面組件 295
18.4.3 設計影院頁面組件 302
18.4.4 設計我的頁面組件 304
18.5 設計項目頁面組件及路由配置 305
18.5.1 電影頁面組件及路由 305
18.5.2 影院頁面組件及路由 307
18.5.3 我的頁面組件及路由 307
作者簡介
李小威,軟體開發項目經理,在軟體開發領域有十多年的開發經驗,擅長Web前端、Java、PHP、資料庫、大數據分析等技術。