上篇 JavaScript应用程序设计

模块1 JavaScript知识入门及应用 2
学习领会 2
1.1　JavaScript简介 2
1.2　初识ECMAScript 6.0 3
1.3　JavaScript常用的开发工具 3
1.4　ECMAScript的基本语法规则 4
1.5　JavaScript的注释 7
1.6　在HTML文档中嵌入
JavaScript代码的方法 7
1.7　JavaScript的功能展示 10
1.8　JavaScript的输出 11
1.9　JavaScript的消息框 12
1.10　JavaScript库 13
应用实践 14
【任务1-1】 使用JavaScript实现具有手风琴效果的横向焦点图片轮换 14
在线测试 16

模块2 JavaScript编程基础及
应用 17
学习领会 17
2.1　ECMAScript的关键字与保留字 17
2.2　JavaScript的常量 18
2.3　JavaScript的变量 21
2.4　JavaScript的数据类型 23
2.5　typeof运算符与数据类型的
检测 25
2.6　JavaScript数据类型的转换 26
2.7　字符串的基本操作 28
2.8　JavaScript的运算符与表达式 29
2.9　JSON及其使用 33
应用实践 35
【任务2-1】 实现动态加载网页内容 35
在线测试 36

模块3 JavaScript流程控制及应用 37
学习领会 37
3.1　JavaScript的条件语句 37
3.2　JavaScript的循环语句 41
应用实践 46
【任务3-1】 在不同的节日显示对应的问候语 46
【任务3-2】 在不同时间段显示不同的问候语 46
【任务3-3】 一周内每天显示不同的图片 47
【任务3-4】 实现鼠标指针滑过时动态改变显示内容及其外观效果 48
在线测试 50

模块4 JavaScript函数编程及应用 51
学习领会 51
4.1　JavaScript的函数 51
4.2　JavaScript的计时方法 58
应用实践 61
【任务4-1】 实现动态改变样式 61
【任务4-2】 实现动态改变网页字体大小及关闭网页窗口 62
在线测试 63

模块5 JavaScript对象编程及应用 64
学习领会 64
5.1　JavaScript的字符串对象及方法 64
5.2　JavaScript的数值对象及方法 68
5.3　JavaScript的日期对象及方法 71
5.4　JavaScript的数组对象及方法 74
5.5　JavaScript的自定义对象 79
5.6　ES6使用class构造对象 83
5.7　JavaScript的this指针 85
5.8　JavaScript的正则表达式与应用 86
5.9　JavaScript的RegExp对象及其方法 88
5.10　支持正则表达式的String对象的方法 91
应用实践 94
【任务5-1】 在特定日期范围内显示打折促销信息 94
【任务5-2】 实现在线考试倒计时 95
【任务5-3】 显示常规格式的当前日期与时间 96
在线测试 97

模块6
JavaScript对象模型及应用 98
学习领会 98
6.1　JavaScript的文档对象及操作 98
6.2　JavaScript的浏览器对象及操作 103
6.3　JavaScript的位置与尺寸及其设置方法 107
6.3.1　网页元素的宽度和高度 107
6.3.2　网页元素的位置 109
6.3.3　通过网页元素的样式属性style获取或设置元素的尺寸和位置 111
应用实践 111
【任务6-1】 实现邮箱自动导航 111
【任务6-2】 实现网页内容折叠与展开 112
在线测试 114

模块7 JavaScript事件处理及应用 115
学习领会 115
7.1　认知JavaScript的事件 115
7.2　JavaScript的鼠标事件和键盘事件 116
7.3　页面事件 116
7.4　表单及表单控件事件 116
7.5　编辑事件 117
7.6　event对象 117
7.7　JavaScript的事件方法 117
7.8　JavaScript的异常处理 118
7.9　JavaScript代码的调试 120
应用实践 120
【任务7-1】 实现网页中的横向导航菜单 120
【任务7-2】 实现网页中图片连续向上滚动 122
在线测试 123

下篇 Vue.js应用程序设计
模块8 Vue.js基础知识及应用 125
学习领会 125
8.1　Vue概述 125
8.2　下载、安装与引入Vue.js 128
8.2.1　下载与安装Vue.js 128
8.2.2　引入Vue.js 129
8.3　Vue应用入门 129
8.3.1　页面模板插值 131
8.3.2　创建Vue实例 131
8.3.3　浏览网页demo0802.html与查看数据 132
8.4　Vue实例的数据选项 132
8.5　Vue的DOM选项 138
8.6　Vue的实例属性 139
8.7　Vue的实例方法 139
8.8　认知MVVM模式 141
8.8.1　什么是MVVM？ 141
8.8.2　为什么要使用MVVM？ 142
8.8.3　MVVM的组成部分 142
8.8.4　MVVM模式的实现者 143
应用实践 143
【任务8-1】 编写程序代码计算金额 143
【任务8-2】 反向输出字符串 145
【任务8-3】 编写程序代码实现图片轮播 146
在线测试 147

模块9 Vue网页模板制作 148
学习领会 148
9.1　Vue的指令 148
9.1.1　指令概述 148
9.1.2　常用的Vue指令 149
9.2　模板内容渲染 153
9.2.1　模板动态插值 153
9.2.2　使用v-html指令输出HTML代码 153
9.2.3　表达式插值 154
9.2.4　使用v-text指令实现模板插值的类似效果 155
9.2.5　静态插值 155
9.2.6　使用v-bind指令动态地绑定一个或多个特性 156
9.3　模板逻辑控制 157
9.3.1　模板条件渲染 157
9.3.2　循环渲染 160
9.4　Vue数组更新 165
9.4.1　使用Vue的变异方法更新数组 165
9.4.2　使用Vue的非变异方法更新数组 165
9.4.3　数组的过滤或排序 166
9.5　Vue事件处理 166
9.5.1　事件监听 166
9.5.2　巧用事件修饰符 170
9.6　template模板制作 171
9.7　鼠标修饰符与键值修饰符 173
9.7.1　鼠标修饰符 173
9.7.2　键值修饰符 173
9.7.3　其他修饰符 174
应用实践 175
【任务9-1】 使用带有v-for指令的<template>标签来渲染多个元素 175
【任务9-2】 使用v-for循环显示嵌套的对象 175
在线测试 176

模块10 Vue数据绑定与样式绑定 177
学习领会 177
10.1　Vue表单控件的数据绑定 177
10.1.1　输入框的数据绑定 177
10.1.2　复选框的数据绑定 179
10.1.3　单选按钮的数据绑定 179
10.1.4　选择列表的数据绑定 180
10.2　绑定value 182
10.2.1　复选框绑定value 182
10.2.2　单选按钮绑定value 183
10.2.3　选择列表绑定value 183
10.3　v-model指令中巧用修饰符 184
10.3.1　巧用.lazy修饰符 184
10.3.2　巧用.number修饰符 185
10.3.3　巧用.trim修饰符 185
10.4　绑定class属性 185
10.4.1　以对象方式绑定class属性 186
10.4.2　以数组方式绑定class属性 188
10.4.3　以三元表达式方式绑定class属性 189
10.4.4　以组件方式绑定class属性 189
10.5　绑定style 190
10.5.1　使用v-bind:style直接设置样式 190
10.5.2　使用v-bind:style绑定样式对象 191
10.5.3　使用v-bind:style绑定样式数组 191
10.5.4　使用三元表达式动态绑定style 191
10.5.5　使用v-bind:style绑定多重值 192
10.5.6　Vue.js对浏览器前缀的处理 192
10.6　定义与使用过滤器 192
10.6.1　过滤器的基本用法 192
10.6.2　串联使用的过滤器 192
10.6.3　使用带参数的JavaScript函数做过滤器 193
10.6.4　在v-bind表达式中使用过滤器 193
应用实践 193
【任务10-1】 编写程序实现英寸与毫米之间的单位换算 193
【任务10-2】 编写程序代码实现图片自动播放与单击播放功能 194
【任务10-3】 编写程序代码实现图片自动缩放与图片播放功能 195
在线测试 196

模块11 Vue项目创建与运行 197
学习领会 197
11.1　创建基于webpack模板的Vue项目 197
11.2　使用vue create命令创建Vue.js 2.x项目 200
11.3　使用vue create命令创建Vue.js 3.x项目 202
11.4　认知Vue项目的组成结构与自定义配置 203
11.4.1　认知基于Vue CLI 2.x的项目组成结构 203
11.4.2　认知基于Vue CLI 2.x的package.json文件 203
11.4.3　基于Vue CLI项目的自定义配置 204
11.4.4　认知基于Vue CLI 3.x的项目组成结构 205
应用实践 207
【任务11-1】基于Node.js+Vue.js+MySQL实现前后端分离的登录与注册功能 207
在线测试 211

模块12 Vue组件构建与应用 212
学习领会 212
12.1　组件基础 212
12.1.1　初识组件定义 212
12.1.2　组件的组织 215
12.1.3　嵌套限制 215
12.1.4　根元素 216
12.1.5　原生事件 216
12.2　组件注册与使用 217
12.2.1　组件命名 217
12.2.2　全局注册 218
12.2.3　局部注册 219
12.2.4　使用组件 220
12.3　组件构建 220
12.3.1　使用extend()方法构建组件 220
12.3.2　使用<template>标签构建组件 221
12.3.3　使用<script>标签构建组件 221
12.3.4　构建父子组件 222
12.4　Vue组件选项props 224
12.4.1　父子组件 224
12.4.2　静态props 224
12.4.3　props属性声明和模板中的组件命名约定 225
12.4.4　动态props 226
12.5　组件之间的通信 226
12.5.1　父组件向子组件传递数据 226
12.5.2　子组件向父组件传递数据 227
12.5.3　兄弟组件之间通信 229
12.6　Vue插槽应用 229
12.6.1　插槽概述 229
12.6.2　匿名插槽 230
12.6.3　提供默认内容的插槽 230
12.6.4　具名插槽 231
应用实践 232
【任务12-1】 在自定义组件中利用Vue的transition属性实现图片轮换功能 232
在线测试 234

模块13 Vue过渡与动画实现 235
13.1　通过CSS方式实现过渡效果 235
13.1.1　过渡组件与过渡类 235
13.1.2　使用transition组件结合transition属性实现过渡效果 236
13.2　通过JavaScript方式实现Vue的过渡效果 237
13.3　实现Vue列表的过渡效果 239
13.3.1　实现列表的普通过渡效果 239
13.3.2　实现列表的平滑过渡效果 239
13.3.3　实现列表的变换过渡效果 240
应用实践 241
【任务13-1】 使用data属性与JavaScript通信以实现列表的渐进过渡效果 241
【任务13-2】 使用CSS实现列表的渐进过渡效果 241
【任务13-3】 使用Vue的transition属性实现图片轮播 241
在线测试 242

模块14 Vue路由配置与应用 243
学习领会 243
14.1　vue-router的基本使用 243
14.1.1　安装vue-router 243
14.1.2　使用vue-router 243
14.1.3　vue-router的路由模式 245
14.2　重定向和使用别名 245
14.2.1　重定向 245
14.2.2　使用别名 247
14.3　设置与使用根路径 247
14.4　设置与使用嵌套路由 248
14.4.1　使用vue-router实现嵌套路由 248
14.4.2　设置默认子路由 249
14.5　设置与使用命名路由 249
14.6　设置与使用命名视图 250
14.7　设置与使用动态路由 251
14.8　实现编程式导航 252
14.8.1　使用router.push()方法实现导航 252
14.8.2　使用router.replace()方法实现导航 254
14.8.3　使用router.go()方法实现
导航 254
应用实践 254
【任务14-1】 实现用户登录与应用路由切换页面 254
在线测试 258
模块15
Vuex状态管理 259
学习领会 259
15.1　Vuex概述 259
15.1.1　Vuex是什么 259
15.1.2　什么是“状态管理框架”？ 260
15.1.3　Vuex的运行机制 261
15.1.4　Vuex的使用方式 262
15.1.5　Vue项目结构示例 262
15.2　最简单的store应用 263
应用实践 265
【任务15-1】 使用Vuex在单个HTML文件中实现计数器功能 265
【任务15-2】 使用Vuex的属性与方法实现人员列表查询功能 266
在线测试 267

附录A
Vue程序开发环境搭建 268
参考文献 270