本书共8个模块，模块1介绍了Vue前端框架、Element UI前端框架、ECharts可视化库和Visual Studio Code编辑器，并搭建了前端可视化项目开发环境；模块2介绍了Element UI前端框架的相关应用；模块3-7介绍了Vue指令、Vue数据绑定、Vue事件、Vue组件和Vue路由的相关内容；模块8介绍了ECharts的应用。

模块1　搭建前端可视化开发环境 1
【教学目标】 1
任务1.1　安装Node.js和Vue 1
【任务描述】 1
【任务要求】 2
【相关知识】 2
1.1.1　初识Vue 2
1.1.2　Vue的优势与应用 3
【任务实施】 3
任务1.2　引入Element UI 7
【任务描述】 7
【任务要求】 7
【相关知识】 8
1.2.1　初识Element UI 8
1.2.2　Element UI的优势与应用 8
【任务实施】 9
任务1.3　引入ECharts 10
【任务描述】 10
【任务要求】 11
【相关知识】 11
1.3.1　初识ECharts 11
1.3.2　ECharts的优势与应用 11
【任务实施】 12
任务1.4　安装Visual Studio Code编辑器 14
【任务描述】 14
【任务要求】 14
【相关知识】 14
【任务实施】 15
模块小结 20
课后作业 20
模块2　设计新零售智能销售平台的基础
页面——Element UI的应用 21
【教学目标】 21
任务2.1　平台基础页面布局 21
【任务描述】 21
【任务要求】 22
【相关知识】 22
2.1.1　Layout栅格化布局 22
2.1.2　Container容器布局 25
【任务实施】 26
任务2.2　创建平台导航菜单 29
【任务描述】 29
【任务要求】 29
【相关知识】 29
2.2.1　基本概念 29
2.2.2　实现NavMenu导航菜单 30
【任务实施】 31
任务2.3　创建订单数据表格 33
【任务描述】 33
【任务要求】 34
【相关知识】 34
2.3.1　表格 34
2.3.2　标签 36
2.3.3　树形控件 37
【任务实施】 39
任务2.4　设计订单数据表格的分页显示 41
【任务描述】 41
【任务要求】 42
【相关知识】 42
2.4.1　基本概念 42
2.4.2　实现Pagination分页 43
【任务实施】 43
任务2.5　添加订单数据对话框 46
【任务描述】 46
【任务要求】 46
【相关知识】 47
2.5.1　基本概念 47
2.5.2　实现Dialog对话框 47
【任务实施】 48
任务2.6　构建订单数据表单并添加表格
操作列 51
【任务描述】 51
【任务要求】 52
【相关知识】 52
2.6.1　按钮 52
2.6.2　输入框 53
2.6.3　单选框 55
2.6.4　复选框 57
2.6.5　选择器 59
2.6.6　时间日期组件 61
2.6.7　表单 66
【任务实施】 69
模块小结 76
课后作业 77
模块3　开发新零售智能销售平台的基本
功能——Vue指令的应用 79
【教学目标】 79
任务3.1　设计库存量警告标记 80
【任务描述】 80
【任务要求】 80
【相关知识】 80
3.1.1　了解指令 80
3.1.2　v-if、v-else和v-else-if指令 81
3.1.3　v-for指令 84
3.1.4　v-on指令 86
3.1.5　v-show指令 87
【任务实施】 88
任务3.2　绑定订单表单验证规则 90
【任务描述】 90
【任务要求】 90
【相关知识】 90
3.2.1　v-bind指令 90
3.2.2　v-model指令 93
【任务实施】 98
模块小结 101
课后作业 101
模块4　设计新零售智能销售平台的数据
绑定——Vue数据绑定 103
【教学目标】 103
任务4.1　使用文本插值方式显示当前日期、
时间和问候语 104
【任务描述】 104
【任务要求】 104
【相关知识】 104
4.1.1　文本插值 104
4.1.2　HTML插值 105
4.1.3　JavaScript表达式插值 106
【任务实施】 107
任务4.2　渲染订单数据列表 108
【任务描述】 108
【任务要求】 109
【相关知识】 109
4.2.1　条件渲染 109
4.2.2　列表渲染 110
【任务实施】 115
任务4.3　统计商品总价 117
【任务描述】 117
【任务要求】 118
【相关知识】 118
4.3.1　计算属性 118
4.3.2　方法 119
4.3.3　侦听属性 120
【任务实施】 122
任务4.4　动态显示当前日期和时间 125
【任务描述】 125
【任务要求】 125
【相关知识】 125
4.4.1　钩子函数 125
4.4.2　实例创建 126
4.4.3　数据更新 130
4.4.4　实例销毁 133
【任务实施】 134
模块小结 135
课后作业 135
模块5　开发新零售智能销售平台的人机
交互功能——Vue事件的
应用 137
【教学目标】 137
任务5.1　添加改变购买数量的按钮 138
【任务描述】 138
【任务要求】 138
【相关知识】 138
5.1.1　基本概念 138
5.1.2　实现监听事件 139
【任务实施】 140
任务5.2　实现数据的添加 141
【任务描述】 141
【任务要求】 142
【相关知识】 142
【任务实施】 143
任务5.3　实现数据的批量删除 145
【任务描述】 145
【任务要求】 146
【相关知识】 146
【任务实施】 148
任务5.4　添加once修饰符实现每种商品只能
被收藏一次的功能 150
【任务描述】 150
【任务要求】 151
【相关知识】 151
5.4.1　基本概念 151
5.4.2　事件修饰符的用法 151
【任务实施】 157
任务5.5　添加Enter按键修饰符实现数据提交
功能 160
【任务描述】 160
【任务要求】 161
【相关知识】 161
5.5.1　键盘事件的概念和按键修饰符的
种类 161
5.5.2　按键修饰符的用法 162
【任务实施】 164
模块小结 166
课后作业 166
模块6　封装新零售智能销售平台商品
列表页面的可重用功能——Vue
组件的开发 168
【教学目标】 168
任务6.1　将“购买数量”栏中的所有内容封装
成组件 169
【任务描述】 169
【任务要求】 169
【相关知识】 169
6.1.1　了解组件 169
6.1.2　全局注册 170
6.1.3　局部注册 172
【任务实施】 173
任务6.2　通过组件通信展示商品信息 174
【任务描述】 174
【任务要求】 175
【相关知识】 175
6.2.1　父组件向子组件通信 175
6.2.2　子组件向父组件通信 176
6.2.3　非父子组件之间通信 178
【任务实施】 180
任务6.3　动态展示各类商品 184
【任务描述】 184
【任务要求】 185
【相关知识】 185
【任务实施】 187
模块小结 190
课后作业 190
模块7　设计新零售智能销售平台的访问
路径——Vue路由的应用 192
【教学目标】 192
任务7.1　使用路由实现单页面内容的
跳转 193
【任务描述】 193
【任务要求】 194
【相关知识】 194
7.1.1　初识路由 194
7.1.2　vue-router插件的工作原理 195
7.1.3　vue-router插件的对象属性 196
7.1.4　vue-router插件的基础使用 196
【任务实施】 203
任务7.2　设计基于嵌套路由的页面 205
【任务描述】 205
【任务要求】 206
【相关知识】 206
【任务实施】 208
模块小结 211
课后作业 211
模块8　设计新零售智能销售平台的统计
图表——ECharts的应用 213
【教学目标】 213
任务8.1　初创一张ECharts图表 214
【任务描述】 214
【任务要求】 214
【相关知识】 215
【任务实施】 217
任务8.2　使用配置手册 218
【任务描述】 218
【任务要求】 219
【相关知识】 219
8.2.1　ECharts基础架构及常用术语 219
8.2.2　直角坐标系下的网格及坐标轴 222
8.2.3　图例组件 227
8.2.4　提示框组件 230
8.2.5　标记点和标记线 232

【任务实施】 234
任务8.3　使用柱状图分析订单支付状态和出货
状态的分布情况 237
【任务描述】 237
【任务要求】 238
【相关知识】 238
8.3.1　绘制标准柱状图 238
8.3.2　绘制堆积柱状图 240
8.3.3　绘制标准条形图 242
【任务实施】 244
任务8.4　使用折线图和堆积面积图分析4—9
月份商品存货周转天数、库存量及
进货量 246
【任务描述】 246
【任务要求】 247
【相关知识】 247
8.4.1　绘制标准折线图 247
8.4.2　绘制堆积面积图和堆积
折线图 248
【任务实施】 251
任务8.5　使用饼图分析用户下单时间段占比和下单用户所在城市占比 253
【任务描述】 253
【任务要求】 254
【相关知识】 255
8.5.1　绘制标准饼图 255
8.5.2　绘制圆环图 256
【任务实施】 257
任务8.6　使用折线柱状混合图分析商品销售量和总金额 259
【任务描述】 259
【任务要求】 259
【相关知识】 260
【任务实施】 261
模块小结 262
课后作业 263
附录A　Vue的API及其说明 264
参考文献 268