《Vue 3移動Web開發與性能調優實戰》是2023年6月1日清華大學出版社出版的圖書，作者：呂鳴。
基本介紹
- 中文名：Vue 3移動Web開發與性能調優實戰
- 作者：呂鳴
- 出版時間：2023年6月1日
- 出版社：清華大學出版社
- ISBN：9787302635802
- 定價：99 元
- 印次：1-1
- 印刷日期：2023.06.07
內容簡介,圖書目錄,
內容簡介
《Vue3移動Web開發與性能調優實戰》旨在向讀者介紹如何使用Vue 3和其他現代Web技術創建高性能的移動Web應用程式。《Vue3移動Web開發與性能調優實戰》不僅詳細介紹有關移動Web和Vue 3的技術知識，包括HTML5、CSS3、Vue全家桶、構建工具Vite、移動Web螢幕適配等，並講解如何使用這些技術來創建快速、可靠和可擴展的應用程式，還深入探討各種性能最佳化技術，並向讀者展示如何使用這些技術來提升Web應用程式的性能、可靠性和用戶體驗。最後通過一個企業級實戰項目——仿微信朋友圈系統來全方位講解移動Web和Vue 3在企業級項目中的套用實踐。
《Vue3移動Web開發與性能調優實戰》既適合有一定前端開發基礎的學生、前端開發的從業者以及自由項目開發者，也適合對Vue 3感興趣的、擅於做各種Vue 3套用探索、想要深入了解Vue 3底層實現的開發者，還可作為高校相關專業的教學用書。
圖書目錄
目 錄
第1章 移動Web開發概述 1
1.1 移動網際網路Web開發技術介紹 1
1.1.1 移動Web是什麼 1
1.1.2 Web網頁和原生App的區別 1
1.1.3 移動Web開發的特點 2
1.1.4 移動Web App是如何工作的 3
1.2 移動Web與HTML 5、CSS 3和Vue.js的關係 4
1.2.1 移動Web與HTML 5和CSS 3的關係 4
1.2.2 移動Web與Vue.js的關係 5
1.3 瀏覽器安裝和代碼環境的準備 5
1.3.1 安裝Chrome 5
1.3.2 安裝Node.js和http-server 5
1.3.3 選擇合適的代碼編輯器 7
1.4 小結 8
1.5 練習 8
第2章 HTML 5語義化標籤和屬性 9
2.1 DOCTYPE聲明 9
2.2 <header>標籤 10
2.3 <footer>標籤 11
2.4 <section>標籤 12
2.5 <nav>標籤 12
2.6 <aside>標籤 13
2.7 語義化標籤總結 14
2.8 HTML 5其他新增的標籤 15
2.8.1 <progress>標籤 15
2.8.2 <picture>標籤 16
2.8.3 <dialog>標籤 16
2.9 HTML 5新增的標籤屬性 18
2.9.1 <input>的type屬性 18
2.9.2 <input>檔案上傳功能 19
2.9.3 <input>其他新增屬性 21
2.9.4 <script>的async和
defer屬性 22
2.10 小結 24
2.11 練習 24
第3章 HTML 5音頻和視頻 25
3.1 <audio>標籤與音頻 25
3.1.1 <audio>標籤的使用 25
3.1.2 使用JavaScript操作audio對象 26
3.1.3 audio對象的事件 27
3.2 <video>標籤與視頻 29
3.2.1 <video>標籤的使用 29
3.2.2 使用JavaScript操作
video對象 31
3.2.3 video對象的事件 31
3.2.4 videojs視頻播放器的使用 33
3.3 小結 36
3.4 練習 36
第4章 HTML 5網頁存儲 37
4.1 初識Web Storage 37
4.1.1 Web Storage的概念 37
4.1.2 同源策略 38
4.1.3 Web Storage的瀏覽器兼容性 38
4.2 LocalStorage和SessionStorage 38
4.2.1 LocalStorage的增刪改查 39
4.2.2 LocalStorage容量的限制 40
4.3 瀏覽器存儲的其他方案 41
4.3.1 IndexedDB 41
4.3.2 Service Worker 42
4.4 小結 42
4.5 練習 42
第5章 CSS 3選擇器 43
5.1 CSS 3屬性選擇器 43
5.2 CSS 3偽類選擇器 44
5.2.1 偽類和偽元素 45
5.2.2 子元素偽類選擇器 46
5.2.3 類型子元素偽類選擇器 47
5.2.4 條件偽類選擇器 48
5.2.5 元素狀態偽類選擇器 49
5.3 小結 50
5.4 練習 51
第6章 CSS 3轉換、過渡與動畫 52
6.1 CSS 3轉換 52
6.1.1 translate 52
6.1.2 scale 53
6.1.3 rotate 54
6.1.4 skew 55
6.1.5 matrix 56
6.1.6 transform-origin 57
6.1.7 3D轉換 59
6.1.8 瀏覽器前綴 63
6.2 CSS 3過渡 63
6.2.1 transition-property屬性 64
6.2.2 transition-duration屬性 65
6.2.3 transition-timing-function
屬性 65
6.2.4 transition-timing-delay屬性 67
6.2.5 過渡效果的特點和局限性 67
6.3 CSS 3動畫 67
6.3.1 keyframes 68
6.3.2 animation（動畫）屬性 69
6.3.3 will-change屬性 72
6.4 案例：CSS 3實現旋轉3D立方體 73
6.4.1 實現3D立方體 73
6.4.2 旋轉3D立方體 75
6.5 小結 77
6.6 練習 77
第7章 移動Web開發和調試 78
7.1 Chrome模擬器調試 78
7.1.1 啟用Device Mode功能 78
7.1.2 移動設備視區模式 79
7.1.3 模擬網路狀態 80
7.2 spy-debugger調試 82
7.3 小結 85
7.4 練習 85
第8章 移動Web螢幕適配 86
8.1 視區簡介 86
8.1.1 物理像素和CSS像素 86
8.1.2 視區 88
8.1.3 設定視區 88
8.2 回響式布局 90
8.2.1 媒體查詢 90
8.2.2 案例——回響式頁面 94
8.3 Flex布局 98
8.3.1 Flex新舊版本的兼容性 98
8.3.2 Flex容器屬性 99
8.3.3 Flex子元素屬性 108
8.4 rem適配 114
8.4.1 動態設定根元素的font-size 114
8.4.2 計算rem數值 115
8.5 vw適配 117
8.6 rem適配和vw適配兼容性 118
8.7 小結 119
8.8 練習 120
第9章 移動Web單擊事件 121
9.1 touch事件 121
9.1.1 touch事件分類 121
9.1.2 touch事件對象 122
9.2 移動Web端單擊事件 124
9.2.1 iOS單擊延遲 125
9.2.2 “單擊穿透”問題 126
9.3 小結 127
9.4 練習 127
第10章 Vue.js基礎 128
10.1 Vue.js實例和組件 128
10.1.1 創建Vue.js實例 128
10.1.2 用component()方法創建組件 129
10.1.3 Vue組件、根組件、實例的區別 130
10.1.4 全局組件和局部組件 131
10.1.5 組件方法和事件的互動操作 132
10.1.6 單檔案組件 133
10.2 Vue.js模板語法 136
10.2.1 插值表達式 136
10.2.2 指令 138
10.3 Vue.js的data屬性、方法、計算屬性和監聽器 147
10.3.1 data屬性 147
10.3.2 方法 148
10.3.3 計算屬性 149
10.3.4 計算屬性和方法 150
10.3.5 監聽器 153
10.3.6 監聽器和計算屬性 155
10.4 案例：Vue 3留言板 157
10.4.1 功能描述 157
10.4.2 案例完整代碼 157
10.5 小結 157
10.6 練習 157
第11章 Vue.js組件 158
11.1 組件生命周期 158
11.1.1 beforeCreate和created方法 160
11.1.2 beforeMount和mounted方法 161
11.1.3 beforeUpdate和updated方法 162
11.1.4 beforeUnmount和unmounted方法 164
11.1.5 errorCaptured 166
11.1.6 activated和deactivated 166
11.1.7 renderTracked和renderTriggered 167
11.2 組件通信 167
11.2.1 組件通信概述 167
11.2.2 父組件向子組件通信 169
11.2.3 子組件向父組件通信 172
11.2.4 父子組件的雙向數據綁定與自定義v-model 174
11.2.5 非父子關係組件的通信 176
11.2.6 provide/inject 179
11.3 組件插槽 181
11.3.1 默認插槽 181
11.3.2 具名插槽 182
11.3.3 動態插槽名 183
11.3.4 插槽後備 184
11.3.5 作用域插槽 185
11.3.6 解構插槽props 186
11.4 動態組件 187
11.5 異步組件和<suspense> 189
11.6 <teleport>組件 191
11.7 Mixin對象 192
11.7.1 Mixin合併 193
11.7.2 全局Mixin 195
11.7.3 Mixin的取捨 196
11.8 案例：Vue 3待辦事項 196
11.8.1 功能描述 196
11.8.2 案例完整代碼 197
11.9 小結 200
11.10 練習 200
第12章 Vue.js組合式API 201
12.1 組合式API基礎 201
12.2 setup方法 202
12.2.1 setup方法的參數 203
12.2.2 setup方法結合模板使用 204
12.2.3 setup方法的執行時機和getCurrentInstance方法 205
12.3 回響式類方法 205
12.3.1 ref和reactive 205
12.3.2 toRef和toRefs 207
12.3.3 其他回響式類方法 209
12.4 監聽類方法 211
12.4.1 computed方法 211
12.4.2 watchEffect方法 212
12.4.3 watch方法 213
12.5 生命周期類方法 215
12.6 methods方法 216
12.7 provide/inject 217
12.8 單檔案組件<script setup> 219
12.9 案例：組合式API待辦事項 222
12.9.1 功能描述 222
12.9.2 案例完整代碼 222
12.10 小結 224
12.11 練習 224
第13章 Vue.js動畫 225
13.1 從一個簡單的動畫開始 225
13.2 <transition>組件實現過渡效果 227
13.3 <transition>組件實現動畫效果 229
13.4 <transition>組件同時實現過渡和動畫 230
13.5 <transition>組件的鉤子函式 232
13.6 多個元素或組件的過渡/動畫效果 233
13.7 列表數據的過渡效果 235
13.8 案例：魔幻的事項列表 237
13.8.1 功能描述 237
13.8.2 案例完整代碼 237
13.9 小結 238
13.10 練習 239
第14章 Vuex狀態管理 240
14.1 什麼是狀態管理模式 240
14.2 Vuex概述 241
14.2.1 Vuex的組成 241
14.2.2 安裝Vuex 242
14.2.3 一個簡單的store 243
14.3 state 244
14.4 getters 245
14.5 mutation 247
14.6 action 249
14.7 module 251
14.8 Vuex外掛程式 255
14.9 在組合式API中使用Vuex 256
14.10 Vuex適用的場合 258
14.11 另一種狀態及管理方案——Pinia 258
14.12 案例：事項列表的數據通信 259
14.12.1 功能描述 259
14.12.2 案例完整代碼 259
14.13 小結 261
14.14 練習 261
第15章 Vue Router路由管理 262
15.1 什麼是單頁套用 262
15.2 Vue Router概述 263
15.2.1 安裝Vue Router 263
15.2.2 一個簡單的組件路由 263
15.3 動態路由 265
15.3.1 動態路由匹配 265
15.3.2 回響路由變化 266
15.4 導航守衛 267
15.4.1 全局前置守衛 267
15.4.2 全局解析守衛 268
15.4.3 全局後置鉤子 269
15.4.4 組件內的守衛 269
15.4.5 路由配置守衛 270
15.5 嵌套路由 271
15.6 命名視圖 273
15.7 命名路由 275
15.8 編程式導航 275
15.9 路由組件傳參 278
15.10 路由重定向、別名及元數據 279
15.10.1 路由重定向 279
15.10.2 路由別名 280
15.10.3 路由元數據 281
15.11 Vue Router的路由模式 282
15.12 滾動行為 283
15.13 keep-alive 284
15.13.1 keep-alive快取狀態 284
15.13.2 利用元數據meta控制keep-alive 285
15.14 路由懶載入 288
15.15 在組合式API中使用Vue Router 288
15.16 案例：Vue Router路由待辦事項 290
15.16.1 功能描述 290
15.16.2 案例完整代碼 290
15.17 小結 291
15.18 練習 291
第16章 新一代開發構建工具Vite 292
16.1 Vite概述 292
16.1.1 開發環境和生產環境 292
16.1.2 Rollup 294
16.2 Vite的安裝和使用 294
16.2.1 初始化項目 294
16.2.2 啟動項目 295
16.2.3 熱更新 296
16.3 Vite自定義配置 296
16.3.1 靜態資源處理 297
16.3.2 外掛程式配置 298
16.3.3 服務端渲染配置 299
16.4 小結 299
16.5 練習 299
第17章 移動Web性能最佳化 300
17.1 資源合併與壓縮最佳化 300
17.1.1 HTML檔案壓縮 300
17.1.2 JavaScript和CSS檔案壓縮 301
17.1.3 圖片檔案壓縮 301
17.1.4 資源合併 302
17.1.5 Gzip壓縮 302
17.1.6 升級HTTP 2.0 302
17.1.7 圖片base64和Icon Font 304
17.2 瀏覽器載入原理最佳化 305
17.3 快取最佳化 305
17.3.1 強快取：Expires&Cache-Control 306
17.3.2 協商快取：
Last-Modified&Etag 307
17.3.3 妙用LocalStorage 307
17.3.4 離線包機制 308
17.3.5 服務端渲染 309
17.4 懶載入與預載入 310
17.4.1 首屏資源載入最佳化 310
17.4.2 預載入 311
17.5 渲染最佳化 312
17.5.1 16ms最佳化 312
17.5.2 重繪和重排 313
17.5.3 requestAnimationFrame和requestIdleCallback 313
17.5.4 長列表滾動最佳化 314
17.5.5 合理使用GPU 314
17.6 小結 315
17.7 練習 315
第18章 實戰項目：微信朋友圈系統的開發 316
18.1 開發環境準備 316
18.1.1 安裝代碼編輯器
Sublime Text 3 316
18.1.2 安裝CNPM 317
18.1.3 Vite項目初始化 317
18.2 項目功能邏輯 319
18.3 登錄頁面的開發 319
18.3.1 引入WeUI 320
18.3.2 登錄頁面的組件 320
18.3.3 用戶信息設定在Vuex中 322
18.3.4 設定用戶token 323
18.4 發表頁面的開發 324
18.5 首頁的開發 326
18.5.1 導航欄 327
18.5.2 頂部模組 328
18.5.3 列表組件 328
18.5.4 單條內容組件 330
18.5.5 圖片查看器組件 335
18.6 個人頁面的開發 335
18.6.1 “我的”頁面 335
18.6.2 用戶詳情頁面 337
18.7 路由配置 338
18.8 頁面轉場動畫 339
18.8.1 轉場動畫概述 339
18.8.2 監聽router 339
18.8.3 使用<transition>和Animate.css實現頁面切換動畫 340
18.9 項目小結 342
