本书在教材模块化、一体化、层次化、活页式等方面做了大量的探索与实践，合理选取并有序组织了教材内容，兼顾了知识讲解的灵活性与教材的实用性。本书分为上、下两篇，将JavaScript+Vue.js前端开发的理论知识讲解与编程技能训练按由易到难、由浅入深的规律划分为了15个模块，分别是JavaScript知识入门及应用、JavaScript编程基础及应用、JavaScript流程控制及应用、JavaScript函数编程及应用、JavaScript对象编程及应用、JavaScript对象模型及应用、JavaScript事件处理及应用、Vue.js基础知识及应用、Vue.js网页模板制作、Vue.js数据绑定与样式绑定、Vue.js项目创建与运行、Vue.js组件构建与应用、Vue.js过渡与动画实现、Vue.js路由配置与应用，以及Vuex状态管理。

本书可以作为普通高等院校、高职高专或中等职业院校各专业相关课程的教材，也可以作为前端开发爱好者的自学参考书。

1. 模块化构建，凸显职教特性：以工作流程为基准，采用模块化架构，将前端开发知识体系拆解为实操性强的任务模块，契合职教实践导向。

2. 任务递进拆解，强化知行合一：秉持由浅入深、从基础到进阶的思路，教材将各模块细化为多项任务，理论与实践紧密结合，助力学生综合能力提升。

3. 思政元素无痕融入，落实育人目标：在任务执行中着重培养团队协作与责任意识，案例剖析时融入创新与工匠精神，项目开发中引导学生关注技术的社会价值与伦理准则，实现立德树人。

仇善梁，男，1983年12月17日出生，硕士，副教授，江苏旅游职业学院教务处处长，长期从事web开发技术教学研究，曾获全国职业院校信息化教学大赛教学软件组一等奖，江苏省职业院校技能大赛二等奖，指导学生获第十四届蓝桥杯全国软件和信息技术专业人才大赛web应用开发项目江苏省一等奖，全国三等奖，取得软著2项，主持开发技术服务类横向项目3项，任江苏省高等学校教育信息化研究会教学技术委员会委员，南京市人社局职业技术培训（HarmonyOS应用开发）讲师。

上篇 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】 使用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】 实现动态加载网页内容　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的设置方法　106

6.3.1　网页元素的宽度和高度　106

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.js概述　125

8.2　下载、安装与引入Vue.js　128

8.2.1　下载与安装Vue.js　128

8.2.2　引入Vue.js　129

8.3　Vue.js应用入门　129

8.3.1　页面模板插值　131

8.3.2　创建Vue.js实例　131

8.3.3　浏览网页demo0802.html与查看数据　132

8.4　Vue.js实例的数据选项　132

8.5　Vue.js的DOM选项　138

8.6　Vue.js的实例属性　139

8.7　Vue.js的实例方法　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.js网页模板制作　148

学习领会　148

9.1　Vue.js的指令　148

9.1.1　指令概述　148

9.1.2　常用的Vue.js指令　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.js数组更新　165

9.4.1　使用Vue.js的变异方法更新数组　165

9.4.2　使用Vue.js的非变异方法更新数组　165

9.4.3　数组的过滤或排序　166

9.5　Vue.js事件处理　166

9.5.1　事件监听　166

9.5.2　巧用事件修饰符　170

9.6　网页模板制作　171

9.7　鼠标修饰符与键值修饰符　173

9.7.1　鼠标修饰符　173

9.7.2　键值修饰符　173

9.7.3　其他修饰符　174

应用实践　175

【任务9-1】 使用带有v-for指令的