隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展,JavaScript語(yǔ)言及其相關(guān)技術(shù)越來(lái)越受到人們的關(guān)注,各種各樣的JavaScript框架層出不窮。Vue.js作為新一代JavaScript框架的優(yōu)秀代表,為廣大前端開發(fā)人員提供了許多便利,在Web前端開發(fā)領(lǐng)域占據(jù)著重要位置。本書以Vue.js 3為藍(lán)本,詳細(xì)地講述了Vue.js框架的相關(guān)技術(shù)。本書分為10章,內(nèi)容包括:Vue.js使用基礎(chǔ),創(chuàng)建Vue應(yīng)用,Vue模板應(yīng)用,Vue事件處理,Vue表單綁定,Vue組件應(yīng)用,Vue組合式API,Vue路由管理,Vue網(wǎng)絡(luò)請(qǐng)求,Vue狀態(tài)管理。本書堅(jiān)持就業(yè)與升學(xué)并重、以能力為本位的原則,突出實(shí)用性、適用性和先進(jìn)性,結(jié)構(gòu)合理、論述準(zhǔn)確、內(nèi)容翔實(shí),注意知識(shí)的層次性和技能培養(yǎng)的漸進(jìn)性,遵循難點(diǎn)分散的原則合理安排各章的內(nèi)容,降低學(xué)生的學(xué)習(xí)難度,通過(guò)豐富的實(shí)戰(zhàn)演練來(lái)引導(dǎo)學(xué)習(xí)者學(xué)習(xí),旨在培養(yǎng)他們的實(shí)踐動(dòng)手能力和創(chuàng)新精神。每個(gè)項(xiàng)目后面均配項(xiàng)目思考和項(xiàng)目實(shí)訓(xùn)。
個(gè)人簡(jiǎn)介:趙增敏,教授,為河南省教育廳學(xué)科帶頭人,河南省教育廳學(xué)術(shù)帶頭人,長(zhǎng)期從事數(shù)據(jù)庫(kù)應(yīng)用開發(fā)(Access/SQL Server/MySQL)、可視化編程(VB/VB.NET/C#)、網(wǎng)頁(yè)設(shè)計(jì)、移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站開發(fā)(ASP/PHP/JSP/ASP.NET)、Web前端開發(fā)((jQuery/Bootstrap/AngularJS/Vue.js))等方面的教學(xué)與研究,有豐富的計(jì)算機(jī)教學(xué)經(jīng)驗(yàn)和教材開發(fā)編寫經(jīng)驗(yàn),迄今為止撰寫了數(shù)十種計(jì)算機(jī)專著及教材,其中有多本國(guó)家級(jí)規(guī)劃教材,還有版權(quán)輸出到臺(tái)灣出版繁體中文版,被電子工業(yè)出版社授予優(yōu)秀作者稱號(hào)。
目錄
第1章 Vue.js使用基礎(chǔ) 1
1.1 Vue簡(jiǎn)介 1
1.1.1 前端技術(shù)的發(fā)展 1
1.1.2 什么是Vue 2
1.1.3 Vue的優(yōu)勢(shì) 3
1.1.4 Vue 3的新特性 4
1.2 配置Vue開發(fā)環(huán)境 4
1.2.1 常用集成開發(fā)環(huán)境 4
1.2.2 Node.js環(huán)境 6
1.2.3 npm包管理工具 7
1.2.4 Vue Devtools擴(kuò)展 9
1.3 Vue的簡(jiǎn)單使用 10
1.3.1 通過(guò)CDN使用Vue 10
1.3.2 構(gòu)建Vue項(xiàng)目 16
1.3.3 兩種API風(fēng)格 18
習(xí)題1 22
第2章 Vue應(yīng)用創(chuàng)建 24
2.1 應(yīng)用的創(chuàng)建和配置 24
2.1.1 創(chuàng)建應(yīng)用實(shí)例 24
2.1.2 掛載應(yīng)用 29
2.1.3 應(yīng)用配置 31
2.1.4 多個(gè)應(yīng)用實(shí)例 33
2.2 響應(yīng)式基礎(chǔ) 35
2.2.1 數(shù)據(jù)屬性 35
2.2.2 組件方法 37
2.2.3 計(jì)算屬性 39
2.2.4 監(jiān)聽器 43
2.3 生命周期 52
2.3.1 生命周期概述 52
2.3.2 組件實(shí)例創(chuàng)建 54
2.3.3 組件實(shí)例掛載 55
2.3.4 狀態(tài)更新 57
2.3.5 組件實(shí)例卸載 59
習(xí)題2 61
第3章 Vue模板應(yīng)用 63
3.1 模板基礎(chǔ) 63
3.1.1 文本插值 63
3.1.2 插入HTML代碼 65
3.1.3 綁定HTML屬性 67
3.1.4 使用JavaScript表達(dá)式 69
3.1.5 使用Vue指令 72
3.2 綁定類與樣式 74
3.2.1 綁定樣式類 75
3.2.2 綁定內(nèi)聯(lián)樣式 80
3.3 條件渲染 83
3.3.1 使用v-if指令實(shí)現(xiàn)條件渲染 83
3.3.2 在template元素上使用v-if指令 85
3.3.3 使用v-show指令實(shí)現(xiàn)條件渲染 87
3.4 列表渲染 89
3.4.1 使用v-for指令遍歷數(shù)組 89
3.4.2 使用v-for指令遍歷對(duì)象 91
3.4.3 在v-for指令中使用范圍值 93
3.4.4 在template元素上使用v-for指令 95
3.4.5 通過(guò)key屬性管理狀態(tài) 97
3.4.6 數(shù)組更新偵測(cè) 99
習(xí)題3 102
第4章 Vue事件處理 104
4.1 標(biāo)準(zhǔn)DOM事件模型 104
4.1.1 DOM事件模型 104
4.1.2 事件對(duì)象 107
4.2 監(jiān)聽事件 109
4.2.1 內(nèi)聯(lián)事件處理器 109
4.2.2 方法事件處理器 112
4.2.3 在內(nèi)聯(lián)事件處理器中調(diào)用方法 114
4.3 v-on指令修飾符 116
4.3.1 事件修飾符 116
4.3.2 按鍵修飾符 122
4.3.3 鼠標(biāo)修飾符 125
習(xí)題4 125
第5章 Vue表單綁定 127
5.1 v-model指令的基本用法 127
5.1.1 綁定文本框 127
5.1.2 綁定多行文本域 129
5.1.3 綁定單選按鈕 131
5.1.4 綁定復(fù)選框 133
5.1.5 綁定列表框 135
5.2 綁定動(dòng)態(tài)值 138
5.2.1 單選按鈕綁定動(dòng)態(tài)值 138
5.2.2 復(fù)選框綁定動(dòng)態(tài)值 140
5.2.3 列表框綁定動(dòng)態(tài)值 141
5.3 使用修飾符 143
5.3.1 .lazy修飾符 143
5.3.2 .number修飾符 145
5.3.3 .trim修飾符 146
習(xí)題5 148
第6章 Vue組件應(yīng)用 149
6.1 創(chuàng)建和使用組件 149
6.1.1 定義組件 149
6.1.2 注冊(cè)組件 150
6.1.3 引用組件 152
6.2 向組件傳遞數(shù)據(jù) 156
6.2.1 聲明props選項(xiàng) 156
6.2.2 傳遞prop的細(xì)節(jié) 160
6.2.3 單向數(shù)據(jù)流 164
6.2.4 props校驗(yàn) 166
6.2.5 布爾類型轉(zhuǎn)換 170
6.3 處理組件事件 171
6.3.1 觸發(fā)與監(jiān)聽事件 171
6.3.2 處理事件參數(shù) 174
6.3.3 聲明事件 176
6.3.4 校驗(yàn)事件 177
6.4 組件雙向綁定 178
6.4.1 在組件上使用v-model指令 178
6.4.2 設(shè)置v-model指令的參數(shù) 182
6.4.3 多個(gè)v-model指令綁定 184
6.4.4 創(chuàng)建v-model指令修飾符 186
6.5 透?jìng)鲗傩?188
6.5.1 單根節(jié)點(diǎn)屬性繼承 188
6.5.2 多根節(jié)點(diǎn)屬性繼承 189
6.5.3 禁用屬性繼承 189
6.6 內(nèi)容分發(fā) 190
6.6.1 單個(gè)插槽 190
6.6.2 具名插槽 192
6.6.3 作用域插槽 195
6.7 依賴注入 200
6.7.1 提供數(shù)據(jù) 200
6.7.2 注入數(shù)據(jù) 201
6.7.3 響應(yīng)性鏈接 205
6.8 單文件組件 207
6.8.1 語(yǔ)法定義 207
6.8.2 單文件組件的優(yōu)點(diǎn) 209
6.8.3 工具鏈 209
習(xí)題6 210
第7章 組合式API 212
7.1 setup鉤子 212
7.1.1 基本用法 212
7.1.2 訪問(wèn)props選項(xiàng) 214
7.1.3 setup上下文對(duì)象 216
7.1.4 返回渲染函數(shù) 219
7.1.5 <script setup>語(yǔ)法糖 222
7.2 響應(yīng)式API 224
7.2.1 響應(yīng)式狀態(tài) 224
7.2.2 計(jì)算屬性 226
7.2.3 監(jiān)聽器 227
7.2.4 處理事件 232
7.2.5 使用組件 234
7.2.6 組件通信 236
7.2.7 暴露組件屬性 239
7.3 生命周期鉤子 241
7.3.1 生命周期鉤子概述 242
7.3.2 組件實(shí)例掛載 242
7.3.3 狀態(tài)更新 244
7.4 依賴注入 245
7.4.1 提供數(shù)據(jù) 246
7.4.2 注入數(shù)據(jù) 246
習(xí)題7 249
第8章 Vue路由管理 251
8.1 初識(shí)Vue Router 251
8.1.1 在HTML頁(yè)面中使用Vue Router 251
8.1.2 在模塊化開發(fā)中使用Vue Router 254
8.2 通過(guò)路由傳遞數(shù)據(jù) 257
8.2.1 路由對(duì)象 257
8.2.2 params傳參 260
8.2.3 query傳參 261
8.2.4 props傳參 263
8.2.5 響應(yīng)參數(shù)變化 265
8.3 路由匹配語(yǔ)法 268
8.3.1 使用正則表達(dá)式 268
8.3.2 設(shè)置可重復(fù)參數(shù) 269
8.3.3 設(shè)置可選參數(shù) 269
8.4 嵌套路由與命名路由 269
8.4.1 嵌套路由 270
8.4.2 命名路由 273
8.5 編程式導(dǎo)航 275
8.5.1 push()方法 275
8.5.2 replace()方法 276
8.5.3 go()方法 276
8.6 命名視圖 279
8.6.1 基本用法 279
8.6.2 嵌套的命名視圖 281
8.7 重定向和別名 283
8.7.1 路由重定向 284
8.7.2 設(shè)置路由別名 284
8.8 路由的歷史模式 285
8.8.1 hash模式 285
8.8.2 HTML5模式 286
8.9 導(dǎo)航守衛(wèi) 286
8.9.1 全局守衛(wèi) 286
8.9.2 路由守衛(wèi) 292
8.9.3 組件守衛(wèi) 293
習(xí)題8 296
第9章 Vue網(wǎng)絡(luò)請(qǐng)求 298
9.1 Axios基本用法 298
9.1.1 Axios簡(jiǎn)介 298
9.1.2 Axios開發(fā)環(huán)境搭建 300
9.1.3 GET請(qǐng)求 301
9.1.4 POST請(qǐng)求 304
9.1.5 并發(fā)請(qǐng)求 307
9.2 Axios API 309
9.2.1 Axios的使用方式 309
9.2.2 請(qǐng)求配置 313
9.2.3 響應(yīng)結(jié)構(gòu) 316
9.2.4 錯(cuò)誤處理 318
9.2.5 默認(rèn)配置 320
9.2.6 設(shè)置攔截器 321
習(xí)題9 324
第10章 Vue狀態(tài)管理 326
10.1 Pinia使用基礎(chǔ) 326
10.1.1 安裝Pinia 326
10.1.2 基本用法 327
10.2 創(chuàng)建store 329
10.2.1 定義store 329
10.2.2 兩種語(yǔ)法風(fēng)格 330
10.2.3 使用store 331
10.3 管理state 333
10.3.1 定義state 333
10.3.2 更改state 335
10.3.3 訂閱state 338
10.4 管理getter 341
10.4.1 定義getter 341
10.4.2 訪問(wèn)getter 343
10.4.3 向getter傳遞參數(shù) 345
10.5 管理action 347
10.5.1 定義action 347
10.5.2 訂閱action 350
10.6 Pinia持久化存儲(chǔ) 352
10.6.1 安裝持久化插件 352
10.6.2 實(shí)現(xiàn)持久化存儲(chǔ) 352
10.6.3 配置持久化存儲(chǔ) 353
習(xí)題10 357