本书通过对HTML5+Vue.js 3.x实例的介绍与演练，使读者快速掌握HTML5+Vue.js 3.x框架的用法，提高Web前端实战开发的能力。本书配套案例源码、PPT课件、教学教案、同步教学视频、上机习题及答案，以及其他教学资源与答疑服务。

本书共分21章。内容包括HTML5快速入门，文本、图像和超链接，创建表格和表单，HTML5绘制图形，HTML5中的音频和视频，地理定位、离线Web应用和Web存储，认识Vue.js 3.x，Vue.js模板语法，精通指令，计算属性，绑定v-bind与class或style，表单与v-model双向绑定，精通监听器，事件处理，过渡和动画效果，组件和组合API，精通Vue CLI和Vite，使用Vue Router开发单页面应用，使用axios与服务器通信，使用Vuex管理组件状态；最后通过开发一个网上商城项目，帮助读者进一步巩固和积累使用HTML5+Vue.js 3.x进行项目开发的知识和经验。

本书内容丰富、注重实践，对HTML5+Vue.js框架的初学者来说，是一本简明易懂的入门书和工具书；对从事Web前端开发的读者来说，也是一本难得的参考手册。同时本书也适合作为高等院校和培训机构计算机相关专业的教材。

前    言

随着用户页面体验要求的提高，Web前端技术日趋重要，HTML5技术的成熟，使其在前端技术中优势尽显。Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。Vue.js的核心库只关注视图层，并且其学习比较容易，与其他库或已有项目进行整合也非常方便，所以Vue.js能够在很大程度上降低Web前端开发的难度，因此深受广大Web前端开发人员的喜爱，在国内外都有比较广泛的应用。

本书内容

本书共分21章，内容包括HTML5快速入门，文本、图像和超链接，创建表格和表单，HTML5绘制图形，HTML5中的音频和视频，地理定位、离线Web应用和Web存储，认识Vue.js 3.x，Vue.js模板语法，精通指令，计算属性，绑定v-bind与class或style，表单与v-model双向绑定，精通监听器，事件处理，过渡和动画效果，组件和组合API，精通Vue CLI和Vite，使用Vue Router开发单页面应用，使用axios与服务器通信，使用Vuex管理组件状态。最后通过开发一个网上商城项目，帮助读者进一步巩固和积累使用HTML5+Vue.js进行项目开发的知识和经验。

本书特色

知识全面：涵盖了所有HTML5+Vue.js 3.x的知识点，讲解由浅入深，便于读者循序渐进地掌握Web前端的开发技术。

图文并茂：注重操作，图文并茂，在介绍示例的过程中，每一个操作均有对应的插图。这种图文结合的方式，使读者在学习过程中能够直观、清晰地看到操作的过程以及效果，便于快速理解和掌握。

易学易用：颠覆传统“看”书的观念，变成一本能“操作”的图书。

案例丰富：把知识点融汇于示例当中，并且结合综合实战案例进行拓展，让读者达到“知其然，并知其所以然”的效果。

贴心周到：本书对读者在学习过程中可能会遇到的疑难问题，以“提示”和“注意”的形式进行说明，避免读者在学习过程中走弯路。

代码支持：本书提供示例和综合实战案例的源代码，使读者在实战应用中掌握网站前端开发的每一项技能，并使本书真正体现出“自学无忧”，成为一本物超所值的好书。

超值资源：本书配套示例源代码、PPT课件、同步教学视频、教学教案、上机习题及答案、Vue.js 3.x常见错误及解决方法、就业面试题及解答、Vue.js 3.x开发经验及技巧汇总等丰富的学习和教学资源，方便初学者自学和高校老师的教学活动。

读者对象

本书是一本完整介绍HTML5+Vue.js 3.x前端技术开发的教程，内容丰富，条理清晰，实用性强，适合以下读者学习使用：

? 没有任何HTML5+Vue.js 3.x网站前端开发基础的初学者

? 希望快速、全面掌握HTML5+Vue.js 3.x框架的前端开发人员

? 高等院校及培训学校的老师和学生

超值配套资源下载与答疑服务

要获取本书的配套资源使用微信扫描下面二维码，按扫描后的页面提示填写你的邮箱，把链接转发到自己的邮箱中进行下载。如果发现问题或者疑问，请用电子邮件联系booksaga@163.com，邮件主题写“HTML5+Vue.js 3.x从入门到精通（视频教学版）”。

 

鸣  谢

本书由张工厂编著，参加编写的还有王英英、刘增杰、胡同夫、刘玉萍、刘玉红。虽然本书倾注了编者的心血，但由于水平有限、时间仓促，书中难免有疏漏之处，欢迎广大读者批评指正。如果遇到问题或有好的建议，敬请与我们联系，我们将全力提供帮助。

编  者

2022年6月

目    录

第1章  HTML5快速入门 1

1.1  HTML5概述 1

1.2  HTML5的文档结构 2

1.2.1  文档类型说明 2

1.2.2  HTML标签 2

1.2.3  头标签<head> 2

1.2.4  网页的主体标签<body> 5

1.2.5  页面注释标签<!-- --> 5

1.3  HTML5文件的编写方法 5

1.3.1  使用记事本手工编写HTML文件 6

1.3.2  安装和使用编辑器 HBuilder 6

1.4  HTML5语法的新变化 8

第2章  文本、图像和超链接 9

2.1  添加文本 9

2.2  文本排版 11

2.2.1  换行标签<br/>与段落标签<p> 11

2.2.2  标题标签<h1>～<h6> 12

2.3  文字列表 13

2.3.1  无序列表<ul> 13

2.3.2  有序列表<ol> 14

2.4  网页中的图片 14

2.4.1  使用路径 14

2.4.2  在网页中插入图像标签<img> 16

2.5  URL的概念 17

2.5.1  URL的格式 17

2.5.2  URL的类型 18

2.6  超链接标签<a> 19

2.6.1  设置文本和图片的超链接 19

2.6.2  超链接指向的目标类型 19

第3章  创建表格和表单 21

3.1  表格基本结构及操作 21

3.1.1  表格基本结构 21

3.1.2  合并单元格 22

3.2  设计产品报价单 25

3.3  表单基本元素的使用 27

3.4  表单高级元素的使用 31

3.4.1  url和email属性 31

3.4.2  日期和时间类型属性 31

3.4.3  number属性 32

3.4.4  range属性 33

3.4.5  required属性 33

第4章  HTML5绘制图形 35

4.1  canvas概述 35

4.1.1  添加canvas元素 35

4.1.2  绘制矩形 36

4.2  绘制基本形状 37

4.2.1  绘制圆形 37

4.2.2  绘制直线 38

4.2.3  绘制贝塞尔曲线 40

4.3  绘制渐变图形 41

4.3.1  绘制线性渐变 41

4.3.2  绘制径向渐变 43

4.4  绘制变形图形 44

4.4.1  变换原点坐标 44

4.4.2  图形缩放 45

4.4.3  图形旋转 46

4.5  图形组合 47

4.6  绘制带阴影的图形 49

4.7  使用图像 50

4.7.1  绘制图像 50

4.7.2  平铺图像 51

4.7.3  裁剪图像 53

4.8  绘制文字 54

4.9  图形的保存与恢复 56

4.9.1  保存与恢复状态 56

4.9.2  保存到URL数据中 57

4.10  项目实战—绘制商标 58

第5章  HTML5中的音频和视频 60

5.1  <audio>标签 60

5.1.1  <audio>标签概述 60

5.1.2  <audio>标签的属性 61

5.1.3  音频解码器 61

5.1.4  <audio>标签浏览器的支持情况 61

5.2  <video>标签 62

5.2.1  <video>标签概述 62

5.2.2  <video>标签的属性 63

5.2.3  视频解码器 63

5.2.4  <video>标签浏览器的支持情况 64

5.3  音频和视频中的方法 64

5.3.1  canPlayType()方法 64

5.3.2  load()方法 65

5.3.3  play()方法和pause()方法 66

5.4  音频和视频中的属性 67

5.4.1  autoplay属性 67

5.4.2  buffered属性 68

5.4.3  controls属性 69

5.4.4  currentSrc属性 71

第6章  地理定位、离线Web应用和Web存储 72

6.1  获取地理位置 72

6.1.1  地理定位的原理 72

6.1.2  地理定位的函数 72

6.1.3  指定纬度和经度坐标 73

6.2  HTML5离线Web应用 74

6.2.1  新增的本地缓存 74

6.2.2  本地缓存的管理者—缓存的管理者L5文件 74

6.2.3  浏览器网页缓存与本地缓存的区别 76

6.3  Web存储 76

6.3.1  本地存储和Cookie的区别 76

6.3.2  在客户端存储数据 76

6.3.3  sessionStorage函数 77

6.3.4  localStorage函数 78

第7章  认识Vue.js 3.x 79

7.1  Vue.js概述 79

7.1.1  Vue.js是什么 79

7.1.2  Vue.js的发展历程 81

7.2  MV*模式 81

7.2.1  MVC模式 81

7.2.2  MVVM模式 82

7.3  在项目中引入Vue.js 82

7.3.1  使用CDN的方式 82

7.3.2  使用NPM的方式 83

7.3.3  使用命令行工具的方式 83

7.3.4  使用Vite的方式 84

7.4  项目实训—第一个Vue.js程序 84

第8章  Vue.js模板语法 86

8.1  创建应用程序实例 86

8.2  插值 87

8.3  方法选项 89

8.3.1  方法的使用方式 89

8.3.2  传递参数 91

8.3.3  方法之间的调用 92

8.4  指令 93

第9章  精通指令 96

9.1  常见内置指令 96

9.1.1  v-show 96

9.1.2  v-bind 97

9.1.3  v-model 98

9.1.4  v-on 100

9.1.5  v-text 101

9.1.6  v-html 102

9.1.7  v-once 103

9.1.8  v-pre 104

9.1.9  v-cloak 105

9.2  条件指令 106

9.2.1  v-if 106

9.2.2  v-else-if和v-else 107

9.2.3  v-for 108

9.3  指令缩写 120

9.4  自定义指令 120

9.4.1  注册自定义指令 120

9.4.2  钩子函数 121

9.4.3  动态指令参数 123

9.5  项目实战—通过指令实现随机背景色效果 124

第10章  计算属性 126

10.1  计算属性的定义 126

10.2  计算属性的getter和setter方法 127

10.3  计算属性的缓存 129

10.4  计算属性代替v-for和v-if 132

10.5  项目实战—使用计算属性设计计算器 133

第11章  绑定v-bind与class或style 135

11.1  绑定HTML样式class 135

11.1.1  数组语法 135

11.1.2  对象语法 137

11.1.3  在组件上使用 141

11.2  绑定内联样式style 141

11.2.1  对象语法 141

11.2.2  数组语法 144

11.3  项目实战—设计隔行变色的水果信息表 145

第12章  表单与v-model双向绑定 148

12.1  实现双向数据绑定 148

12.2  单行文本输入框 148

12.3  多行文本输入框 149

12.4  复选框 150

12.5  单选按钮 152

12.6  选择框 153

12.7  值绑定 156

12.7.1  复选框的选项 156

12.7.2  单选框的选项 156

12.7.3  选择框的选项 157

12.8  修饰符 158

12.8.1  lazy 158

12.8.2  number 159

12.8.3  trim 160

12.9  项目实战—设计用户注册页面 161

第13章  精通监听器 163

13.1  使用监听器 163

13.2  监听方法和对象 164

13.2.1  监听方法 164

13.2.2  监听对象 165

13.3  实例方法$watch 168

13.4  项目实战—使用监听器设计购物车效果 169

第14章  事件处理 174

14.1  监听事件 174

14.2  事件处理方法 175

14.3  事件修饰符 178

14.3.1  stop 179

14.3.2  capture 180

14.3.3  self 182

14.3.4  once 184

14.3.5  prevent 185

14.3.6  passive 186

14.4  按键修饰符 186

14.5  系统修饰键 188

14.6  项目实战—处理用户注册信息 189

第15章  过渡和动画效果 192

15.1  单元素/组件的过渡和动画 192

15.1.1  CSS过渡 192

15.1.2  过渡的类名 194

15.1.3  CSS动画 196

15.1.4  自定义过渡的类名 197

15.1.5  动画的JavaScript钩子函数 198

15.2  初始渲染的过渡 202

15.3  多个元素的过渡 203

15.4  列表过渡 204

15.4.1  列表的进入/离开过渡 205

15.4.2  列表的排序过渡 206

15.4.3  列表的交错过渡 207

15.5  项目实战—设计折叠菜单的过渡动画 209

第16章  组件和组合API 212

16.1  组件是什么 212

16.2  组件的注册 213

16.2.1  全局注册 213

16.2.2  局部注册 214

16.3  使用prop向子组件传递数据 214

16.3.1  prop基本用法 215

16.3.2  单向数据流 218

16.3.3  prop验证 218

16.3.4  非prop的属性 220

16.4  子组件向父组件传递数据 221

16.4.1  监听子组件事件 222

16.4.2  将原生事件绑定到组件 223

16.4.3  .sync修饰符 225

16.5  插槽 226

16.5.1  插槽的基本用法 227

16.5.2  编译作用域 227

16.5.3  默认内容 227

16.5.4  命名插槽 229

16.5.5  作用域插槽 232

16.5.6  解构插槽prop 233

16.6  什么是组合API 235

16.7  setup()函数 235

16.8  响应式API 236

16.8.1  reactive()方法和watchEffect()方法 236

16.8.2  ref()方法 237

16.8.3  readonly()方法 238

16.8.4  computed()方法 239

16.8.5  watch()方法 239

16.9  项目实战—使用组件创建树状项目分类 240

第17章  精通Vue CLI和Vite 243

17.1  脚手架的组件 243

17.2  脚手架环境搭建 244

17.3  安装脚手架 245

17.4  创建项目 246

17.4.1  使用命令 246

17.4.2  使用图形化界面 249

17.5  分析项目结构 250

17.6  配置SCSS、Less和Stylus 253

17.7  配置文件package.json 256

17.8  Vue.js 3.x新增的开发构建工具—Vite 257

17.8.1  创建项目 257

17.8.2  项目结构 258

第18章  使用Vue Router开发单页面应用 260

18.1  使用Vue Router 260

18.1.1  在HTML页面中使用路由 260

18.1.2  在项目中使用路由 265

18.2  命名路由 266

18.3  命名视图 268

18.4  路由传参 272

18.5  编程式导航 277

18.6  组件与Vue Router之间解耦 281

18.6.1  布尔模式 281

18.6.2  对象模式 284

18.6.3  函数模式 287

第19章  使用axios与服务器通信 290

19.1  什么是axios 290

19.2  安装axios 291

19.3  基本用法 291

19.3.1  get请求和post请求 291

19.3.2  请求JSON数据 293

19.3.3  跨域请求数据 295

19.3.4  并发请求 297

19.4  axios API 298

19.5  请求配置 299

19.6  创建实例 301

19.7  配置默认选项 301

19.8  拦截器 302

19.9  项目实战—显示近7日的天气情况 303

第20章  使用Vuex管理组件状态 305

20.1  什么是Vuex 305

20.2  安装Vuex 306

20.3  在项目中使用Vuex 307

20.3.1  搭建一个项目 307

20.3.2  state对象 309

20.3.3  getters对象 310

20.3.4  mutation对象 312

20.3.5  action对象 313

第21章  开发网上商城项目 316

21.1  系统功能模块 316

21.2  系统结构分析 317

21.3  系统运行效果 317

21.4  系统功能模块的设计与实现 318

21.4.1  首页头部组件 318

21.4.2  首页信息模块 319

21.4.3  用户注册与登录模块 322

21.4.4  商品模块 324

21.4.5  购买模块 329

21.4.6  支付模块 331

随着用户页面体验要求的提高，Web前端技术日趋重要，HTML5技术的成熟，使其在前端技术中优势尽显。Vue.js是一套构建用户界面的渐进式框架，其核心库只关注视图层，并且其学习比较容易，与其他库或已有项目进行整合也非常方便，所以Vue.js能够在很大程度上降低Web前端开发的难度，深受广大Web前端开发人员的喜爱，在国内外的大厂都有比较广泛的应用。本书详解HTML5+Vue.js 3.x前端开发技术，帮助读者快速入门Web前端开发。

张工厂，郑州某软件公司技术总监，技术主攻方向为PHP、MySQL与Web前端技术，具有很强的实战经验。长期从事PHP、MySQL的外包服务，对动态网站架构有着较为长期的设计经验。著有图书《PHP 8从入门到精通(视频教学版)》《MySQL 5.7从入门到精通（视频教学版）（第2版）》《PHP 7+MySQL 8动态网站开发从入门到精通（视频教学版）》《HTML5+CSS3+jQuery Mobile+Bootstrap开发APP从入门到精通（视频教学版）》。