本书以培养前端工程师为目标，基于工作任务模式进行编写，全面讲解了Vue.js开发的知识。 本书共10个?？?。?？?～3介绍Vue框架的基础知识，包括开发环境、Vue构造器基本选项、Vue指令，学习Vue的基础知识。?？?介绍Vue过渡，包括基于CSS过渡与动画的过渡，以及Vue与一些主流动画库的结合应用，初步了解Vue的通用性与先进性。?？?介绍Vue复用，为Vue组件与复杂应用开发奠定基础。?？?介绍Vue自定义组件，组件是Vue的核心，自此开始Vue重点与难点知识的学习。?？?介绍Vue路由，路由是单页面应用的基石，也是Vue的核心插件，插件在Vue中占有非常重要的地位。?？?介绍Vue CLI，包括搭建CLI脚手架项目，并对?？?中的路由工作任务进行了重构，巩固路由的学习，并引入了企业开发技术。?？?介绍Vuex与Axios，介绍Vue开发的实用技术。?？?0介绍Vue与element-ui的结合应用，拓展Vue的应用与介绍，完整实践企业Vue项目开发，全面训练岗位技能，培养职业素养。 本书可作为应用型本科与高职高专院校Vue前端开发技术或跨平台开发课程的教材；也可作为前端开发技术人员的技术参考资料、培训用书或自学参考书。

刘培林，无锡职业技术学院软件技术专业带头人，骨干教师。有12年的企业软件项目开发经验，主持和参与过多项重大软件技术项目研发，包括“蛟龙号”载人潜水器操纵模拟系统教控软件子系统的研发，有13年的软件技术专业教学经验，多次主持软件技术专业人才培养方案制定。在国内外公开出版的学术刊物、国际学术会议上发表论文20多篇，主编《C#可视化程序设计案例教程》教材2013年被评为江苏省十二五重点教材。

前言
?？? Vue概述1
任务1.1 了解Vue基础知识1
1.1.1 前端开发概述1
1.1.2 Vue创始人介绍2
1.1.3 什么是Vue2
1.1.4 Vue的优势3
任务1.2 熟悉Vue项目开发环境5
1.2.1 编辑器概述5
1.2.2 安装HBuilderX编辑器6
1.2.3 创建与调试Vue项目6
?？樾〗?
习题19
实训19
?？? Vue实例10
任务2.1 显示诗词10
2.1.1 创建Vue实例10
2.1.2 根元素选项（el）11
2.1.3 数据选项（data）12
任务2.2 设计数据编码器16
2.2.1 过滤选项（filters）17
2.2.2 方法选项（methods）18
任务2.3 编写模拟购物车21
2.3.1 计算选项（computed）21
2.3.2 状态监听选项（watch）23
2.3.3 computed与watch选项的应用场景24
任务2.4 学习Vue生命周期27
2.4.1 生命周期概述27
2.4.2 生命周期事件27
2.4.3 Vue实例方法与属性29
?？樾〗?3
习题233
实训234
?？? Vue指令35
任务3.1 开发用户注册程序35
3.1.1 v-text指令35
3.1.2 v-html指令36
3.1.3 v-model指令37
3.1.4 v-if、v-else和v-show指令41
任务3.2 开发用户登录程序44
3.2.1 v-bind指令44
3.2.2 过滤v-bind指令绑定的属性46
3.2.3 绑定class与style属性46
任务3.3 设计电子商务购物车51
3.3.1 v-for指令51
3.3.2 v-on指令55
3.3.3 v-on指令修饰符56
?？樾〗?0
习题360
实训361
?？? Vue过渡62
任务4.1 学习过渡组件62
4.1.1 <transition>组件定义62
4.1.2 类名前缀属性66
4.1.3 自定义类名属性68
4.1.4 钩子函数70
4.1.5 初始动画属性72
任务4.2 掌握多元素过渡方法72
4.2.1 多元素过渡72
4.2.2 过渡模式75
任务4.3 掌握列表与状态过渡方法76
4.3.1 <transition-group>组件定义76
4.3.2 排序过渡属性（move）77
4.3.3 交错过渡79
4.3.4 状态过渡80
?？樾〗?2
习题482
实训483
?？? Vue复用84
任务5.1 设计管理用户权限指令84
5.1.1 自定义指令84
5.1.2 响应式属性（set）86
任务5.2 设计维护用户信息程序88
5.2.1 继承（extend）89
5.2.2 混入（mixin）93
任务5.3 掌握插件用法98
5.3.1 插件概述98
5.3.2 安装插件98
5.3.3 开发插件98
?？樾〗?00
习题5100
实训5101
?？? Vue自定义组件102
任务6.1 设计计分器组件102
6.1.1 组件定义与注册103
6.1.2 组件模板106
6.1.3 选项作用域106
6.1.4 组件的生命周期107
任务6.2 编写搜索框组件108
6.2.1 props选项109
6.2.2 插槽111
6.2.3 箭头函数113
任务6.3 开发管理用户账户组件115
6.3.1 $emit()方法116
6.3.2 动态组件118
6.3.3 动态组件过渡119
?？樾〗?22
习题6123
实训6123
?？? Vue路由124
任务7.1 设计页面路由124
7.1.1 单页面应用124
7.1.2 路由视图125
7.1.3 路由构造器125
7.1.4 路由导航128
7.1.5 路由过渡131
任务7.2 给路由传递参数134
7.2.1 路由实例134
7.2.2 路由管理器对象134
7.2.3 query方式的参数传递136
7.2.4 params方式的参数传递138
7.2.5 路由的模式139
任务7.3 设计嵌套路由140
7.3.1 嵌套路由父级设计140
7.3.2 嵌套路由子级设计143
?？樾〗?44
习题7145
实训7145
?？? Vue CLI146
任务8.1 了解CLI基础知识146
8.1.1 Vue CLI的特点146
8.1.2 CLI安装必备146
8.1.3 Git-Bash命令行工具147
任务8.2 创建CLI项目148
8.2.1 命令行创建与运行CLI项目148
8.2.2 在HBuilderX环境下创建与运行CLI项目150
任务8.3 实战CLI项目152
8.3.1 单文件组件153
8.3.2 导入与导出语句154
8.3.3 CLI项目结构分析155
任务8.4 开发用户管理CLI项目158
8.4.1 CLI插件158
8.4.2 安装插件158
?？樾〗?61
习题8161
实训8162
?？? Vuex与Axios163
任务9.1 了解Vuex基础知识163
9.1.1 Vuex概述163
9.1.2 Store构造器164
任务9.2 学习Store构造器的选项164
9.2.1 状态管理164
9.2.2 Getter166
9.2.3 Mutation167
9.2.4 Action168
任务9.3 使用?？槎ㄒ錠uex170
9.3.1 modules选项170
9.3.2 动态注册?？?71
任务9.4 掌握Axios的用法172
9.4.1 Axios概述172
9.4.2 参数传递173
任务9.5 开发天气预报CLI项目174
9.5.1 项目创建175
9.5.2 项目实施176
9.5.3 项目测试与运行179
?？樾〗?79
习题9179
实训9180
?？?0 电子商务系统181
任务10.1 掌握element-ui的用法181
10.1.1 element-ui概述181
10.1.2 使用element-ui182
任务10.2 分析电子商务系统182
10.2.1 项目概述182
10.2.2 项目分析183
10.2.3 项目创建184
10.2.4 创建准备185
任务10.3 设计系统首页185
10.3.1 设计导航信息栏185
10.3.2 设计标题搜索栏187
10.3.3 设计商品展示栏188
任务10.4 设计“我的购物车”页面192
10.4.1 设计商品信息栏192
10.4.2 设计购物结算栏194
任务10.5 设计商家后台管理?？?96
10.5.1 菜单设计196
10.5.2 首页设计199
任务10.6 设计商品管理?？?99
10.6.1 商品列表设计201
10.6.2 商品维护205
任务10.7 项目测试与总结209
10.7.1 项目测试与运行209
10.7.2 项目总结209
?？樾〗?10
习题10210
实训10210
附录 211
附录A CSS过渡211
附录B CSS动画212
参考文献 214