目录
目 录
第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