基本介紹
- 書名：HTML5移動Web+Vue.js套用開發實戰
- 作者：呂鳴
- 出版社：清華大學出版社
- 出版時間：2020年7月1日
- 定價：89 元
- ISBN：9787302554196
內容簡介,圖書目錄,
內容簡介
本書綜合運用HTML5、Vue.js全家桶等流行前端技術介紹了如何開發一款企業級移動Web套用的方法與技巧，主要內容包括：HTML5語義標籤和屬性，HTML5音視頻，HTML5 Canvas，HTML5網頁存儲，CSS3選擇器，CSS3背景，CSS3轉換、過渡和動畫，移動Web開發和調試，回響式頁面和Flex布局，移動Web的touch事件系統，Vue.js的組件、指令和模板語法，Vue.js的組件通信、動畫和插槽，Vuex與Vue.js結合實現項目狀態管理，Vue Router與Vue.js結合實現項目路由管理；PWA漸進式技術和ECMAScript 6新特性等內容，並藉助待辦事項管理系統和新浪微博Web App項目開發提高讀者的實戰技能。
圖書目錄
第1章 移動Web開發概述 1
1.1 移動網際網路Web技術發展 1
1.2 移動Web開發和PC Web開發的區別 2
1.3 移動Web和HTML5 3
1.4 瀏覽器安裝和代碼環境的準備 4
1.4.1 安裝Chrome 4
1.4.2 安裝Node.js和http-server 4
1.4.3 選擇合適的代碼編輯器 7
1.5 本章小結 7
第2章 HTML5語義化標籤和屬性 8
2.1 DOCTYPE聲明 8
2.2 <header>標籤 10
2.3 <footer>標籤 10
2.4 <section>標籤 11
2.5 <nav>標籤 12
2.6 <aside>標籤 13
2.7 語義化標籤總結 14
2.8 HTML5其他新增的標籤 15
2.8.1 <progress>標籤 15
2.8.2 <picture>標籤 16
2.8.3 <dialog>標籤 17
2.9 HTML5新增的標籤屬性 18
2.9.1 <input>的type屬性 18
2.9.2 <input>檔案上傳功能 20
2.9.3 <input>其他新增屬性 22
2.9.4 <script>的async和defer屬性 24
2.10 本章小結 25
第3章 HTML5音頻和視頻 27
3.1 <audio>標籤與音頻 27
3.1.1 <audio>標籤元素的使用 27
3.1.2 使用JavaScript操作audio對象 28
3.1.3 audio對象的事件 29
3.2 <video>標籤與視頻 31
3.2.1 <video>標籤元素的使用 32
3.2.2 使用JavaScript操作video對象 34
3.2.3 video對象的事件 34
3.2.4 videojs視頻播放器的使用 37
3.3 本章小結 40
第4章 HTML5 Canvas基礎 41
4.1 一個簡單的Canvas 42
4.2 使用Canvas繪製路徑 44
4.2.1 使用Canvas繪製直線 44
4.2.2 使用Canvas路徑填充 47
4.3 使用Canvas繪製圖形 48
4.3.1 使用Canvas繪製矩形 49
4.3.2 使用Canvas繪製圓 49
4.3.3 使用Canvas繪製圖形的鋸齒問題 52
4.4 使用Canvas繪製文本 53
4.5 使用Canvas繪製和壓縮圖片 55
4.5.1 使用Canvas繪製圖片 55
4.5.2 使用Canvas壓縮圖片 58
4.6 使用Canvas繪製貝塞爾曲線 59
4.6.1 二次貝塞爾曲線的繪製 60
4.6.2 三次貝塞爾曲線的繪製 61
4.7 Canvas轉換 62
4.7.1 平移translate 62
4.7.2 旋轉rotate 63
4.7.3 縮放scale 64
4.8 Canvas狀態的保存和恢復 65
4.9 Canvas動畫 67
4.10 案例：Canvas實現點讚送心動畫 68
4.11 本章小結 75
第5章 HTML5 網頁存儲 76
5.1 初識Web Storage 76
5.1.1 Web Storage的概念 76
5.1.2 同源策略 77
5.1.3 Web Storage的瀏覽器兼容性 77
5.2 LocalStorage和SessionStorage 78
5.2.1 LocalStorage的增刪改查 78
5.2.2 LocalStorage容量的限制 80
5.3 瀏覽器存儲的其他方案 81
5.3.1 IndexedDB 81
5.3.2 Service Worker 82
5.4 本章小結 82
第6章 CSS3選擇器 83
6.1 CSS3屬性選擇器 83
6.2 CSS3偽類選擇器 85
6.2.1 偽類和偽元素 85
6.2.2 子元素偽類選擇器 86
6.2.3 類型子元素偽類選擇器 87
6.2.4 條件偽類選擇器 88
6.2.5 元素狀態偽類選擇器 90
6.3 本章小結 92
第7章 CSS3背景 93
7.1 background-size屬性 93
7.2 background-origin屬性 97
7.3 background-clip屬性 98
7.4 背景漸變 99
7.4.1 線性漸變 100
7.4.2 徑向漸變 101
7.5 本章小結 105
第8章 CSS3轉換、過渡與動畫 106
8.1 CSS3轉換（transform） 106
8.1.1 translate（位移） 107
8.1.2 scale（縮放） 108
8.1.3 rotate（旋轉） 109
8.1.4 skew（扭曲） 110
8.1.5 matrix（矩陣） 111
8.1.6 transform-origin（轉換原點） 113
8.1.7 3D轉換 115
8.1.8 瀏覽器前綴 120
8.2 CSS3過渡（transition） 120
8.2.1 transition-property屬性 121
8.2.2 transition-duration屬性 122
8.2.3 transition-timing-function屬性 123
8.2.4 transition-timing-delay屬性 125
8.2.5 過渡效果的特點和局限性 125
8.3 CSS3動畫（animation） 125
8.3.1 keyframes（關鍵幀） 125
8.3.2 animation（動畫）屬性 127
8.3.3 animation-name屬性 128
8.3.4 animation-iteration-count屬性 128
8.3.5 animation-direction屬性 129
8.3.6 animation-fill-mode屬性 129
8.3.7 animation-fill-mode屬性 130
8.3.8 will-change屬性 130
8.4 案例：CSS3實現旋轉3D立方體 131
8.4.1 3D立方體 131
8.4.2 旋轉3D立方體 134
8.5 本章小結 137
第9章 移動Web開發和調試 138
9.1 Chrome模擬器調試 138
9.1.1 啟用Device Mode功能 138
9.1.2 移動設備視區模式 139
9.1.3 模擬網路狀態 141
9.2 spy-debugger調試 142
9.2.1 Node.js和npm 143
9.2.2 安裝和使用spy-debugger 145
9.3 本章小結 148
第10章 移動Web螢幕適配 150
10.1 Viewport視區 150
10.1.1 物理像素和CSS像素 151
10.1.2 視區（Viewport） 152
10.1.3 設定視區 153
10.2 回響式布局 155
10.2.1 媒體查詢（Media Query） 155
10.2.2 案例：回響式頁面 160
10.3 Flex布局 164
10.3.1 Flex布局—新舊版本的兼容性 165
10.3.2 Flex容器屬性 166
10.3.3 Flex子元素屬性 176
10.4 rem適配 183
10.4.1 動態設定根元素font-size 183
10.4.2 計算rem數值 184
10.5 vw適配 187
10.6 rem適配和vw適配兼容性 189
10.7 本章小結 190
第11章 移動Web單擊事件 191
11.1 touch事件 191
11.1.1 touch事件分類 191
11.1.2 touch事件對象 192
11.2 移動Web端單擊事件 195
11.2.1 iOS單擊延遲 195
11.2.2 “單擊穿透”問題 197
11.3 本章小結 198
第12章 Vue.js核心基礎 199
12.1 MVVM模式 199
12.1.1 什麼是MVC 199
12.1.2 MVVM模式 200
12.2 Vue.js背景知識 200
12.2.1 Vue.js的由來 200
12.2.2 Vue.js和Webpack 201
12.3 Vue.js的安裝和導入 202
12.3.1 通過<script>標籤導入 202
12.3.2 通過NPM導入 202
12.4 Vue.js實例 203
12.4.1 創建Vue.js實例 203
12.4.2 用Vue.component方法註冊組件 204
12.4.3 Vue組件和實例的區別 205
12.4.4 全局組件和局部組件 206
12.4.5 組件方法和事件的互動操作 207
12.4.6 單檔案組件 209
12.5 Vue.js組件的生命周期 210
12.5.1 beforeCreate和created 213
12.5.2 beforeMount和mounted 215
12.5.3 beforeUpdate和updated 216
12.5.4 beforeDestroy和destroyed 219
12.5.5 activated 和deactivated 221
12.6 Vue.js模板語法 221
12.6.1 插值表達式 222
12.6.2 指令 224
12.7 Vue.js方法、計算屬性和監聽器 233
12.7.1 方法 233
12.7.2 計算屬性 234
12.7.3 監聽器 239
12.8 Vue.js的動態組件 243
12.9 Vue.js自定義組件v-model 244
12.10 本章小結 246
第13章 Vue.js高級技能 248
13.1 組件通信 248
13.1.1 組件通信概述 248
13.1.2 父組件向子組件通信 251
13.1.3 子組件向父組件通信 256
13.1.4 父子組件的雙向數據綁定 258
13.1.5 非父子關係組件的通信 259
13.2 Vue.js 動畫 262
13.2.1 Vue.js動畫概述 262
13.2.2 從一個簡單的動畫開始 263
13.2.3 transition組件實現過渡（transition）效果 264
13.2.4 transition組件實現動畫（animation）效果 267
13.2.5 transition組件同時使用過渡和動畫 268
13.2.6 transition組件的鉤子函式 270
13.2.7 多個元素或組件的過渡效果 271
13.2.8 列表數據的過渡效果 273
13.3 Vue.js 插槽 276
13.3.1 默認插槽 276
13.3.2 具名插槽 277
13.3.3 動態插槽名 278
13.3.4 插槽後備 279
13.3.5 作用域插槽 280
13.4 本章小結 282
第14章 Vuex狀態管理 283
14.1 什麼是“狀態管理模式” 283
14.2 Vuex概述 285
14.2.1 Vuex的組成 285
14.2.2 安裝Vuex 286
14.2.3 一個簡單的Store 286
14.3 State 287
14.4 Getters 288
14.5 Mutation 290
14.6 Action 292
14.7 Modules 294
14.8 Vuex適用的場合 299
14.9 本章小結 300
第15章 Vue Router路由管理 301
15.1 什麼是單頁套用 301
15.2 Vue Router概述 302
15.2.1 安裝Vue Router 302
15.2.2 一個簡單的組件路由 302
15.3 動態路由 304
15.3.1 動態路由匹配 304
15.3.2 回響路由變化 306
15.4 導航守衛 307
15.4.1 全局前置守衛 307
15.4.2 全局解析守衛 308
15.4.3 全局後置鉤子 308
15.4.4 組件內的守衛 308
15.4.5 路由配置守衛 310
15.5 嵌套路由 312
15.6 命名視圖 314
15.7 編程式導航 315
15.8 路由組件傳參 318
15.9 路由重定向、別名及元信息 319
15.10 Vue Router的路由模式 321
15.11 滾動行為 322
15.12 keep-alive 323
15.12.1 keep-alive快取狀態 323
15.12.2 keep-alive實現原理淺析 327
15.13 路由懶載入 329
15.14 本章小結 330
第16章 PWA技術全揭秘 331
16.1 PWA技術介紹 331
16.1.1 PWA套用的特點 332
16.1.2 PWA技術結構 332
16.1.3 PWA技術兼容性 333
16.2 Service Worker 334
16.2.1 Service Worker功能和特性 335
16.2.2 Promise介紹 335
16.2.3 註冊Service Worker 337
16.2.4 檢測Service Worker是否註冊成功 338
16.2.5 安裝Service Worker 339
16.2.6 激活Service Worker 340
16.2.7 Service Worker更新 340
16.2.8 Service Worker生命周期 341
16.2.9 Service Worker攔截請求 342
16.2.10 Service Worker快取Cache API 344
16.2.11 Service Worker離線推送Push API 345
16.3 Notifications 348
16.3.1 獲取授權 348
16.3.2 顯示通知 348
16.4 Web App Manifest 350
16.4.1 導入manifest.json 350
16.4.2 manifest.json各項設定 352
16.5 本章小結 353
第17章 ECMAScript 6 語言基礎 354
17.1 變數聲明 354
17.1.1 let，var，const 354
17.1.2 箭頭函式 355
17.1.3 對象屬性和方法的簡寫 356
17.2 模組化 357
17.2.1 ES6模組化概述 357
17.2.2 import和export 358
17.3 async/await 359
17.4 本章小結 361
第18章 回響式單頁面管理系統的開發 362
18.1 創建index.html 362
18.2 創建根實例和頁面組件 363
18.3 頁面切換 365
18.4 待辦事項頁面的開發 367
18.4.1 創建事項 368
18.4.2 單條事項組件 370
18.4.3 數據持久化 373
18.5 資源回收筒頁面的開發 375
18.5.1 已刪除事項列表 376
18.5.2 單條已刪除事項組件 378
18.6 刪除事項和恢復事項聯動 379
18.7 美化頁面背景和添加清空按鈕 381
第19章 實戰項目：新浪微博Web App 383
19.1 準備開發環境 383
19.1.1 安裝代碼編輯器Sublime Text 3 383
19.1.2 安裝Node.js 384
19.2 安裝vue cli 3初始化前端項目 385
19.2.1 安裝vue cli 3 385
19.2.2 初始化項目 386
19.2.3 啟動項目 388
19.3 使用MUI 390
19.3.1 導入MUI 390
19.3.2 postcss-px-to-viewport外掛程式的安裝和配置 391
19.4 登錄頁面的開發 392
19.5 微博首頁的開發 397
19.5.1 tabbar組件的開發 397
19.5.2 headerbar組件的開發 398
19.5.3 4個頁簽（tab）頁面的開發 399
19.6 新鮮事頁面的開發 401
19.6.1 滾動載入組件的開發 401
19.6.2 單條微博組件的開發 405
19.6.3 “發表”按鈕的開發 414
19.6.4 新鮮事微博列表的開發 414
19.7 發表頁面的開發 415
19.8 訊息頁面的開發 418
19.9 我的頁面的開發 419
19.10 微博詳情頁面的開發 421
19.10.1 配置二級路由 422
19.10.2 詳情頁上半部分的開發 422
19.10.3 轉發和點讚列表的開發 425
19.10.4 評論列表的開發 426
19.11 更多回復頁面的開發 429
19.12 評論頁面的開發 432
19.13 頁面轉場動畫 434
19.13.1 監聽路由變化 435
19.13.2 使用transition動畫組件 435
19.13.3 添加轉場動畫CSS樣式 436
19.13.4 頁面快取和相同頁面組件的復用 437
19.14 改造PWA套用 438
19.14.1 配置sw.js檔案 438
19.14.2 設定manifest.json檔案 440
19.15 打包和部署 441
