HTML5移动Web+Vue.js应用开发实战"
本书综合运用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项目开发提高读者的实战技能。
本书内容丰富，注重实战，特别适合正在学习移动Web开发或前端开发的人员使用，对于有一年左右从业经验的前端工程师和想要了解企业级移动Web项目开发的前端工程师也能从本书中获得收益。
前 言
随着移动互联网的高速发展，移动端开发技术已经成为现阶段软件工程师不可不学的一门技术，而HTML5移动Web开发技术作为移动端的一个重要领域，以其特有的跨平台、易上手等特性，成为前端工程师必备的技能，结合当下非常流行的Vue.js前端框架，能够开发出各种各样的企业级业务产品。市面上有不少关于HTML5以及Vue.js相关技术的书籍，但是大多都是讲解单一的技术，本书的特点是综合运用了当前流行的前端开发技术，不限于HTML5和Vue.js，而且还讲解了CSS3以及PWA等技术，并讲解了如何综合运用这些技术开发企业级的移动Web项目。读者通过阅读本书能够在掌握理论、技术的同时，深入了解一个真正的移动Web实战项目是如何开发的，并且搭配本书提供的项目视频教程，还可以大大提升学习效率。
本书主要内容
本书从逻辑上可以分为5大部分，共19章，各部分内容概述如下：
第1部分（第1章到第6章）主要介绍HTML5和CSS3基础理论知识相关的内容，其中包括的知识点如下：
? HTML5新增标签的介绍和使用。
? HTML5的Canvas绘图基础。
? HTML5网页存储。
? CSS3新增选择器和样式的介绍与使用。
? CSS3转换、过渡和动画效果。
第2部分（第9章到第11章）主要介绍移动Web开发相关的内容，其中包括的知识点如下：
? 移动Web的调试技巧和方案选择。
? 移动Web的屏幕适配、响应式页面和Flex布局。
? 移动Web的touch事件系统。
第3部分（第12章到第15章）主要介绍Vue.js全家桶相关的内容，其中包括的知识点如下：
? Vue.js的基础知识，包括组件、指令和模板语法等。
? Vue.js的高级进阶知识，包括组件通信、动画和插槽等。
? Vuex与Vue.js结合实现项目状态管理。
? Vue Router与Vue.js结合实现项目路由管理。
第4部分（第16章和第17章）主要介绍PWA技术和ECMAScipt 6相关技术栈的内容，其中包括的知识点如下：
? PWA技术概述。
? Service Worker全方位技术。
? Web Push和Web Notification相关技术。
? ECMAScript 6的新特性。
第5部分（第18章和第19章）主要介绍两个Web项目的开发，从易到难结合书中的理论知识点，并在真正的实战项目中进行应用，便于读者更好地掌握本书的知识点。
本书的适合人群
（1）正在学习前端开发技术的爱好者或即将毕业的学生。
（2）有一年左右工作经验的前端工程师。
（3）想要了解企业级移动Web项目开发的前端工程师。
阅读本书之后，能学到什么？
学习本书，读者需要具备基本的HTML和CSS以及JavaScript编程基础，通过阅读本书你能取得以下收获：
? 掌握HTML5和CSS3相关基础理论知识和实践应用。
? 掌握移动Web开发独有的调试技术、屏幕适配和touch事件系统。
? 掌握Vue.js完整的基础知识和进阶技能。
? 掌握Vuex，Vue Router集合Vue.js的理论和实践。
? 了解PWA技术与移动Web App的深度结合。
? 学会待办事项系统和企业级实战项目新浪微博Web App从0到1完整的开发流程。
本书源代码和视频教学
本书提供了完整的实例代码，读者可以扫描下述二维码获取：
另外，本书还提供了微博项目案例的教学视频，读者可以直接扫描相应章节的二维码观看。
如果无法下载，请发邮件至bootsaga@126.com寻求帮助，邮件标题为：HTML5移动Web+Vue.js应用开发实战。
“书犹药也，善读之可以医愚”，每本书都是一剂良药，帮你解决困惑，带来转机。同样，每门技术的掌握都需要从理论到实战，才能真正理解，并为自己所用。对于每一名前端工程师来说，技术的变化和更新必然会带来持久不断地学习，掌握其中的要领便能从容应对，愿各位读者学习本书之后都能有所收获，搭上移动互联网这座大船！
感谢本书在编写时，我的妻子对我的理解和帮助，以及我刚出生一个月的女儿！
编 者
2020.1
目 录
第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
本书综合运用HTML5、CSS3、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新特性等内容，并借助待办事项管理
系统和新浪微博We App项目开发提高读者的实践技能。
本书适合正在学习移动Web开发或前端开发的人员使用，对于有一年左右从业经验想要了解企业级移动Web项目开发的前端工程师也能从本书中获得收益。
吕鸣（网名，吕小鸣），从业7年，先后供职于深圳腾讯内容平台部、宇通客车智能网联研究院，担任Web前端高级工程师和前端架构师，对Web开发、iOS开发、PHP开发及前端相关领域都有涉猎，目前专注于移动Web开发，对相关实际项目调优拥有丰富的经验。
