清華大學出版社出版，作者孫衛琴，杜聚賓，詳細闡述用Vue框架的各種技術； 深刻揭示前端開發的回響式編程核心思想； 介紹與其他流行技術的整合； 典型範例幫助讀者迅速獲得實戰經驗。
基本介紹
- 中文名：精通Vue.js：Web前端開發技術詳解（微課視頻版）義項名：
- 作者：孫衛琴 、杜聚賓
- 出版時間：2022年5月1日
- 出版社：清華大學出版社
- 頁數：476 頁
- ISBN：9787302602903
- 定價：119 元
- 開本：16 開
內容簡介,圖書目錄,作者簡介,
內容簡介
本書循序漸進地介紹了Vue框架的用法，主要內容包括前後端分離的基本原理、MVVM設計模式、Vue的基本用法、內置指令、自定義指令、計算屬性與數據監聽、綁定表單、綁定CSS樣式、CSS過渡和動畫、Vue組件的開發、路由器、Vue CLI腳手架工具、組合API、Axios和狀態管理等。 本書內容通俗易懂、案例豐富，理論緊密結合實踐。本書的範例都採用Vue 3版本。本書最後一章還提供了一個整合前端與後端的綜合案例，幫助讀者迅速掌握開發實用Web套用的技巧。 |
本課程配套視頻以及相關資源下載 |
圖書目錄
目錄
第1章 Vue簡介 10
1.1 MVVM設計模式 12
1.2 Vue框架的特點 13
1.3 第一個Vue範例 14
1.3.1 把模型數據綁定到視圖 16
1.3.2 把視圖上的輸入數據與模型綁定 17
1.3.3 改變模型數據對視圖的影響 18
1.4 Vue組件的選項 19
1.4.1 data選項 20
1.4.2 template選項 20
1.4.3 methods選項 22
1.5 Vue組件實例的生命周期 24
1.6 Vue的編譯模板和渲染DOM的基本原理 29
1.6.1 編譯模板 29
1.6.2 渲染DOM 29
1.7 異步渲染DOM 30
1.8 防抖動函式debounce( ) 32
1.9 Vue的開發和調試工具 35
1.9.1 NPM軟體包管理工具 35
1.9.2 vue-devtools調試工具 36
1.10 小結 38
1.11 思考題 38
第2章 Vue指令 41
2.1節 內置Vue指令 41
2.1.1 v-bind指令 41
2.1.2 v-model指令 43
2.1.3 v-show指令 45
2.1.4 v-if/v-else-if/v-else指令 46
2.1.5 v-for指令 49
2.1.6 v-on指令 52
2.1.7 v-on指令的事件修飾符 54
2.1.8 v-text指令 57
2.1.9 v-html指令 58
2.1.10 v-pre指令 59
2.1.11 v-once指令 59
2.1.12 v-cloak指令 60
2.2 自定義Vue指令 61
2.2.1 註冊自定義指令 61
2.2.2 自定義指令的鉤子函式 62
2.2.3 自定義指令的動態參數和動態值 65
2.2.4 把對象字面量賦值給自定義指令 66
2.2.5 鉤子函式簡寫 67
2.2.6 自定義指令範例：v-img指令 67
2.2.7 自定義指令範例：v-drag指令 68
2.2.8 自定義指令範例：v-clickoutside指令 70
2.3 小結 73
2.4 思考題 74
第3章 計算屬性和數據監聽 76
3.1 計算屬性 76
3.1.1 讀寫計算屬性 77
3.1.2 比較計算屬性和方法 79
3.1.3 用計算屬性過濾數組 81
3.1.4 計算屬性實用範例：實現購物車 82
3.2 數據監聽 85
3.2.1 用Web Worker執行數據監聽中的異步操作 87
3.2.2 在watch選項中調用方法 90
3.2.3 比較同步操作和異步操作 91
3.2.4 深度監聽 92
3.2.5 立即監聽 93
3.2.6 比較計算屬性和數據監聽watch選項 93
3.3 Vue的回響式系統的基本原理 95
3.4 小結 97
3.5 思考題 98
第4章 綁定表單 101
4.1 綁定文本域 101
4.2 綁定單選按鈕 102
4.3 綁定複選框 103
4.4 下拉列表 106
4.5 把對象與表單綁定 108
4.6 小結 110
4.7 思考題 111
第5章 綁定CSS樣式 112
5.1 綁定class屬性 112
5.1.1 綁定對象類型的變數 114
5.1.2 綁定計算屬性 115
5.1.3 綁定數組 116
5.1.4 為Vue組件綁定CSS樣式 117
5.2 綁定style屬性 117
5.2.1 綁定對象類型的變數 118
5.2.2 綁定數組 119
5.2.3 與瀏覽器兼容 119
5.3 範例：變換表格奇偶行的樣式 121
5.4 小結 123
5.5 思考題 124
第6章 CSS過渡和動畫 126
6.1 CSS過渡 127
6.1.1 為<transition>組件設定名字 129
6.1.2 為<transition>組件顯式指定過渡樣式類型 131
6.1.3 使用鉤子函式和Velocity函式館 132
6.1.4 設定初始過渡效果 135
6.1.5 切換過渡的DOM元素 136
6.1.6 過渡模式 138
6.1.7 切換過渡的組件 140
6.2 CSS動畫 141
6.2.1 使用第三方的CSS動畫樣式類型 144
6.2.2 使用鉤子函式和Velocity函式館 144
6.3 過渡組合組件<transition-group> 146
6.4 動態控制過渡和動畫 149
6.5 小結 152
6.6 思考題 153
第7章 Vue組件開發基礎 155
7.1 註冊全局組件和局部組件 155
7.1.1 註冊全局組件 155
7.1.2 註冊局部組件 157
7.2 組件的命名規則 159
7.3 向組件傳遞屬性 161
7.3.1 傳遞動態值 161
7.3.2 對象類型的屬性 162
7.3.3 數組類型的屬性 163
7.3.4 綁定靜態數據 163
7.3.5 傳遞對象 165
7.3.6 屬性的不可改變性 166
7.3.7 單向數據流 168
7.3.8 屬性驗證 170
7.4 non-prop屬性 173
7.4.1 單節點模板中根節點對non-prop屬性的繼承 174
7.4.2 在單節點模板中禁止non-prop屬性的繼承 175
7.4.3 多節點模板中節點與non-prop屬性的綁定 176
7.5 組件樹 176
7.6 監聽子組件的事件 180
7.6.1 驗證事件 181
7.6.2 通過v-model指令綁定屬性 183
7.6.3 通過v-model指令綁定多個屬性 184
7.6.4 v-model指令的自定義修飾符 185
7.6.5 處理子組件中DOM元素的原生事件 188
7.7 綜合範例：自定義組件<combobox> 189
7.8 小結 191
7.9 思考題 191
第8章 Vue組件開發高級技術 193
8.1 插槽<slot> 193
8.1.1 <slot>組件的渲染作用域 195
8.1.2 <slot>組件的默認內容 195
8.1.3 為<slot>組件命名 196
8.1.4 <slot>組件的動態名字 198
8.1.5 <slot>組件的自定義屬性 198
8.2 動態組件<component> 201
8.3 異步組件 203
8.3.1 異步組件的選項 204
8.3.2 局部異步組件 206
8.4 組件的生命周期 206
8.5 組件的混入塊 208
8.5.1 合併規則 209
8.5.2 全局混入塊 212
8.5.3 自定義合併策略 212
8.5.4 使用混入塊的注意事項 213
8.6 組件之間的互相訪問 214
8.6.1 訪問根組件 214
8.6.2 訪問父組件 215
8.6.3 訪問子組件 215
8.6.4 依賴注入 217
8.7 組件的遞歸 220
8.8 定義組件模板的其他方式 222
8.9 <teleport>組件與DOM元素的通信 222
8.9.1 在<teleport>組件中包裹子組件 224
8.9.2 多個<teleport>組件與同一個DOM元素通信 225
8.10 小結 226
8.11 思考題 227
第9章 虛擬DOM和render( )函式 229
9.1 render( )函式 229
9.2 真實DOM 231
9.3 虛擬DOM 232
9.4 h( )函式的用法 233
9.4.1 虛擬DOM中虛擬節點的唯一性 234
9.4.2 h( )函式的完整範例 235
9.4.3 創建組件的虛擬節點 237
9.5 用render( )函式實現模板的一些功能 238
9.5.1 實現v-if和v-for指令的流程控制功能 238
9.5.2 實現v-model指令的數據綁定功能 239
9.5.3 實現v-on指令的監聽事件功能 240
9.5.4 實現事件修飾符和按鍵修飾符的功能 241
9.5.5 實現插槽功能 242
9.5.6 生成動態組件的節點 245
9.5.7 自定義指令 246
9.6 在render( )函式中使用JSX語法 247
9.7 綜合範例：部落格貼子列表 249
9.8 小結 251
9.9 思考題 251
第10章 Vue CLI腳手架工具 253
10.1 Vue CLI簡介以及安裝 253
10.2 創建Vue項目 254
10.2.1 vue create命令的用法 254
10.2.2 刪除預配置 258
10.2.3 vue ui命令的用法 259
10.3 Vue項目的結構 259
10.3.1 單檔案組件 260
10.3.2 程式入口main.js檔案 262
10.3.3 項目的index.html檔案和SPA單頁套用 262
10.3.4 運行項目 263
10.4 安裝和配置Visual Studio Code 263
10.4.1 安裝Vetur和ESLint外掛程式 265
10.4.2 在VSCode中打開helloworld項目 266
10.4.3 在VSCode中運行helloworld項目 267
10.5 創建單檔案組件<Hello> 268
10.5.1 創建Hello.vue檔案 268
10.5.2 修改App.vue檔案 268
10.5.3 運行修改後的helloworld項目 269
10.6 創建正式產品 269
10.7 在Tomcat中發布正式產品 270
10.7.1 安裝Tomcat 271
10.7.2 把helloworld正式產品發布到Tomcat中 271
10.8 小結 271
10.9 思考題 272
第11章 Vue Router路由管理器 273
11.1 簡單的路由管理 273
11.2 路由管理器的基本用法 275
11.3 在Vue項目中使用路由管理器 277
11.3.1 創建Home.vue和About.vue組件檔案 278
11.3.2 在組件中加入圖片 279
11.3.3 在index.js中創建路由管理器實例 279
11.3.4 在main.js中使用路由管理器 280
11.3.5 在App.vue中加入<router-link>和<router-view>組件 280
11.3.6 運行helloworld項目 280
11.4 路由模式 281
11.5 動態連結 283
11.5.1 連結中包含路徑參數 283
11.5.2 連結中包含查詢參數 285
11.5.3 連結與通配符匹配 286
11.6 嵌套的路由 287
11.6.1 創建Items父組件的檔案Items.vue 288
11.6.2 創建Item子組件的檔案Item.vue 289
11.6.3 在index.js中設定父組件和子組件的路由 291
11.6.4 在根組件的模板中加入Items父組件的導航連結 292
11.7 命名路由 292
11.7.1 重定向 293
11.7.2 使用別名 294
11.8 命名視圖 294
11.9 向路由的組件傳遞屬性 297
11.9.1 向命名視圖的組件傳遞屬性 298
11.9.2 通過函式傳遞屬性 298
11.10 編程式導航 299
11.11 導航守衛函式 302
11.11.1 全局導航守衛函式 305
11.11.2 驗證用戶是否登錄 306
11.11.3 設定受保護資源 309
11.11.4 在單頁面套用中設定目標路由的頁面標題 310
11.11.5 特定路由的導航守衛函式 311
11.11.6 組件內的導航守衛函式 311
11.12 數據抓取 313
11.12.1 導航後抓取 313
11.12.2 導航前抓取 315
11.13 設定頁面的滾動行為 317
11.13.1 scrollBehavior( )函式的返回值 317
11.13.2 延遲滾動 318
11.14 延遲載入路由 318
11.14.1 把多個組件打包到同一個檔案中 320
11.14.2 在路由的組件中嵌套異步組件 320
11.15 動態路由 321
11.16 小結 323
11.17 思考題 324
第12章 組合（Composition）API 326
12.1 setup( )函式的用法 326
12.1.1 props參數 331
12.1.2 context參數 331
12.1.3 ref( )函式 331
12.1.4 reactive( )函式 332
12.1.5 toRefs( )函式 333
12.1.6 readonly( )函式 333
12.1.7 定義計算屬性 334
12.1.8 註冊組件的生命周期鉤子函式 334
12.1.9 通過watch( )函式監聽數據 336
12.1.10 通過watchEffect( )函式監聽數據 337
12.1.11 獲取模板中DOM元素的引用 338
12.1.12 依賴注入（provide/inject） 339
12.2 分割setup( )函式 341
12.2.1 把setup( )函式分割到多個函式中 341
12.2.2 把setup( )函式分割到多個檔案中 344
12.3 小結 345
12.4 思考題 345
第13章 通過Axios訪問伺服器 348
13.1 Axios的基本用法 348
13.1.1 同域訪問和跨域訪問 349
13.1.2 獲取回響結果 351
13.1.3 處理錯誤 352
13.2 在Vue項目中使用Axios 353
13.2.1 異步請求 354
13.2.2 POST請求方式 356
13.2.3 對象和查詢字元串的轉換 358
13.2.4 下載圖片 359
13.2.5 上傳檔案 361
13.2.6 設定反向代理伺服器 362
13.3 Axios API的用法 363
13.4 請求配置 364
13.4.1 創建axios實例 367
13.4.2 設定默認的請求配置 368
13.4.3 請求配置的優先順序 368
13.4.4 取消請求的令牌 369
13.5 並發請求 371
13.6 請求攔截器和回響攔截器 372
13.7 前端與後端的會話 375
13.7.1 通過Cookie跟蹤會話 376
13.7.2 通過token令牌跟蹤會話 376
13.8 前端與後端代碼的整合 380
13.9 小結 382
13.10 思考題 382
第14章 通過Vuex進行狀態管理 384
14.1 Vuex的基本工作原理 384
14.2 Vuex的基本用法 386
14.3 在Vue項目中使用Vuex 388
14.3.1 strict嚴格模式 389
14.3.2 通過計算屬性訪問狀態 390
14.3.3 狀態映射函式：mapState( ) 390
14.3.4 更新荷載（payload） 392
14.3.5 更新映射函式：mapMutations( ) 393
14.3.6 把更新函式的名字設為常量 395
14.3.7 更新函式只能包含同步操作 396
14.4 倉庫的getters選項 396
14.4.1 getters映射函式：mapGetters( ) 398
14.4.2 為getters選項的屬性設定參數 398
14.5 倉庫的actions選項 399
14.5.1 傳入更新荷載（payload） 401
14.5.2 動作映射函式：mapActions( ) 402
14.6 異步動作 402
14.6.1 異步動作範例 403
14.6.2 使用async/await的範例 405
14.7 表單處理 407
14.7.1 在處理input事件的方法中提交更新函式 408
14.7.2 可讀寫的計算屬性 409
14.8 倉庫的模組化 409
14.8.1 模組的局部狀態 411
14.8.2 訪問根狀態 412
14.8.3 命名空間 412
14.9 通過Composition API訪問倉庫 419
14.10 狀態的持久化 420
14.11 小結 421
14.12 思考題 422
第15章 創建綜合購物網站套用 424
15.1 前端組件的結構 424
15.2 前端開發技巧 427
15.2.1 狀態管理 427
15.2.2 狀態同步 430
15.2.3 運用Composition API提高代碼可重用性 432
15.2.4 在組件中顯示圖片 433
15.2.5 路由管理 433
15.2.6 每個組件的頁面標題 435
15.2.7 用戶登錄流程 435
15.2.8 受保護的資源 437
15.2.9 異步處理Axios的請求 438
15.2.10 單獨運行前端項目 440
15.3 後端架構 441
15.3.1 實現業務數據 442
15.3.2 實現業務邏輯服務層 446
15.3.3 實現DAO層 449
15.3.4 實現控制器層 450
15.3.5 前端與後端的數據交換 453
15.4 發布和運行netstore套用 457
15.4.1 安裝SAMPLEDB資料庫 457
15.4.2 發布後端netstore項目 458
15.4.3 調試和運行前端netstore項目 458
15.4.4 創建並發布前端項目的正式產品 458
15.4.5 運行netstore套用 459
15.5 小結 463
附錄A 思考題答案 464
