前端可视化框架应用开发
定价：￥55.00
作者： 苏叶健
出版时间：2024-07
出版社：电子工业出版社
- 电子工业出版社
- 9787121486579
- 1-1
- 540593
- 68260259-4
- 平塑
- 16开
- 2024-07
- 442
- 276
- 电子与信息大类
- 网络
- 高职
内容简介
本书以项目需求为导向，全面介绍了前端可视化框架应用开发的相关知识及其应用，并详细阐述了使用前端可视化知识解决实际问题的方法。全书共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 非父子组件之间通信 17
【教学目标】 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 非父子组件之间通信 17
