Vue.js基础与应用开发实战（微课版）

图书标准信息

• 作者 陈承欢
• 出版社 人民邮电出版社
• 出版时间 2022-11
• 版次 1
• ISBN 9787115596178
• 定价 69.80元
• 装帧 其他
• 开本 其他
• 纸张 胶版纸
• 页数 316页
• 字数 584千字

【内容简介】

Vue.js是一套用于构建用户界面的渐进式框架，采用“模型—视图—视图模型”的模式，支持数据驱动和组件化开发。
  本书在模块化、层次化、活页式、在线式等方面做了大量的探索与实践，构建了独特的模块化结构，合理选取并有序组织内容，兼顾知识学习的灵活性与教材使用的实用性。本书构建了Vue.js应用开发的理论知识学习与编程技能训练的层次化结构，由易到难、由浅入深，分为10个单元（包括9个教学单元和1个综合应用实战单元）和6个附录进行讲解。除单元10外，每个教学单元又划分为4个学习阶段：学习领会、拓展提升、应用实战、在线测试。其中，理论知识学习分为3个层次，即入门知识、必修知识、拓展知识；编程技能训练也分为3个层次，即验证程序编写、实例程序编写、综合应用实战。本书将纸质固定方式与电子活页方式相结合，构建了模块化的新形态教材的活页式结构，充分发挥网络资源优势，构建了网络资源共享新模式。
  本书可以作为普通高等院校、高等或中等职业院校和高等专科院校相关专业的Vue.js程序设计课程的教材，也可以作为Vue.js程序设计的培训教材及自学参考书。

【作者简介】

陈承欢，湖南铁道职业技术学院教授，高级工程师，软件设计师，湖南省省级专业带头人，湖南省青年骨干教师，武汉大学软件工程专业。2008年，曾赴澳大利亚坎培门理工学院培训交流，2015年，曾赴加拿大圣力嘉学院培训交流，2019年，曾赴英国、德国学习交流。主持开发职业教育特色教材50多本，其中国家级“十一五”规划教材4本，国家级“十二五”规划教材10本，国家级“十三五”规划教材7本。国家精品课程与国家精品共享课程配套教材1本，国家职业教育资源库配套教材3本。主持《网页设计与制作》国家精品课程，主持《网页设计与制作》国家精品共享课程，主持《计算机维护与维修》、《实用工具软件应用》、《网页样式设计》3门国家资源库课程。国家级教学成果奖二等奖1项，湖南省职业教育教学成果奖特等奖1项、三等奖1项，湖南省教育教学改革发展优秀成果奖参等奖1项。

【目录】

单元1

Vue.js起步1

学习领会1

1.1 Vue概述1

【实例1-1】借助JavaScript访问HTML元素4

1.2 下载、安装与引入Vue5

1.2.1 下载与安装Vue5

1.2.2 引入Vue6

1.3 Vue应用入门6

【实例1-2】在网页中输出Vue变量的值6

1.3.1 模板插值8

1.3.2 创建Vue实例8

1.3.3 浏览网页0102.html与查看数据9

1.4 v2.x的API9

1.4.1 Vue的全局配置9

【实例1-3】使用Vue的全局配置项9

1.4.2 Vue的全局API方法10

【实例1-4】应用Vue组件构造器Vue.extend10

1.4.3 Vue实例对象的数据选项14

【实例1-5】通过vm.$data访问Vue实例的数据对象15

【实例1-6】应用Vue的计算属性computed18

【实例1-7】比较computed与methods的用法19

【实例1-8】应用Vue的watch()方法20

1.4.4 Vue的DOM选项21

1.4.5 Vue的实例属性22

1.4.6 Vue的实例方法23

【实例1-9】应用Vue的$watch()方法23

1.4.7 Vue的实例事件25

【实例1-10】应用Vue的实例事件改变数量26

拓展提升26

1.5 Vue实例的生命周期26

1.5.1 图解Vue实例的生命周期26

1.5.2 认知Vue实例生命周期与钩子函数26

【实例1-11】应用Vue实例的钩子函数29

1.6 认知MVVM模式30

1.6.1 什么是MVVM30

1.6.2 为什么要使用MVVM30

1.6.3 MVVM的组成部分30

1.6.4 MVVM模式的实现者31

应用实战32

【任务1-1】编写程序代码计算金额32

【任务1-2】反向输出字符串33

【任务1-3】编写程序代码实现图片轮播34

在线测试35

单元2

Vue网页模板制作36

学习领会36

2.1 Vue的指令36

2.1.1 指令概述36

2.1.2 常用的Vue指令37

2.1.3 自定义指令43

【实例2-1】注册一个使元素自动获取焦点的自定义指令44

2.1.4 自定义指令的钩子函数44

2.2 模板内容渲染46

2.2.1 模板动态插值46

【实例2-2】使用两对大括号进行模板动态插值46

2.2.2 使用v-html指令输出HTML代码47

【实例2-3】使用v-html指令输出指定内容47

2.2.3 表达式插值47

【实例2-4】使用两对大括号进行表达式插值48

2.2.4 使用v-text指令实现模板插值的类似效果48

【实例2-5】使用v-text指令实现模板插值的类似效果49

2.2.5 静态插值49

【实例2-6】使用v-once指令实现静态插值49

2.2.6 使用v-bind指令动态绑定一个或多个特性50

【实例2-7】使用v-bind指令动态绑定多个特性50

2.3 模板逻辑控制51

2.3.1 模板条件渲染51

【实例2-8】使用v-if指令控制元素的显示或隐藏51

【实例2-9】使用v-if指令结合元素控制多个元素的显示或隐藏52

【实例2-10】使用v-if和v-else指令实现条件渲染53

【实例2-11】使用v-if、v-else-if和v-else指令实现条件渲染53

【实例2-12】在不同的登录方式间切换时复用已有的输入框54

【实例2-13】使用key属性声明“两个完全独立且不要复用的元素”54

【实例2-14】使用v-if和v-show指令分别实现元素的显示或隐藏55

2.3.2 循环渲染56

【实例2-15】使用v-for指令根据数组的选项列表进行渲染56

【实例2-16】使用带有v-for指令的标签渲染多个元素块57

【实例2-17】使用v-for指令通过对象属性实现迭代57

【实例2-18】使用v-for指令实现整数迭代58

【实例2-19】使用v-for指令结合v-if指令输出部分列表项58

【实例2-20】使用v-if指令实现有条件地跳过循环的执行59

2.4 Vue数组更新及过滤排序59

2.4.1 Vue的变异方法59

【实例2-21】使用Vue的变异方法更新数组60

2.4.2 Vue的非变异方法60

【实例2-22】使用Vue的非变异方法更新数组60

2.4.3 数组的过滤排序61

2.5 Vue事件处理61

2.5.1 事件监听61

【实例2-23】通过v-on指令绑定事件监听器62

【实例2-24】使用v-on指令调用自定义方法弹出提示信息对话框62

【实例2-25】使用v-on指令调用自定义方法动态输出单击次数63

【实例2-26】分别使用v-on指令及其缩写形式“@”调用自定义方法63

【实例2-27】使用v-on指令调用内联JavaScript语句63

【实例2-28】使用特殊变量event把原生DOM事件传入方法64

2.5.2 事件修饰符65

【实例2-29】使用.stop事件修饰符实现阻止冒泡65

【实例2-30】使用.prevent事件修饰符实现取消默认事件66

【实例2-31】使用.once事件修饰符实现只触发一次事件66

2.6 template模板制作67

【实例2-32】在构造器的template模板中编写代码制作网页模板67

【实例2-33】使用template标签编写代码制作网页模板67

【实例2-34】使用script标签编写代码制作网页模板68

拓展提升68

2.7 鼠标修饰符与键值修饰符68

2.7.1 鼠标修饰符68

【实例2-35】使用鼠标修饰符实现按钮名称随单击的键发生变化69

2.7.2 键值修饰符69

2.7.3 其他修饰符69

应用实战70

【任务2-1】使用带有v-for指令的template标签渲染多个元素块70

【任务2-2】使用v-for和v-if指令循环显示嵌套的对象70

在线测试71

单元3

Vue数据绑定与样式绑定72

学习领会72

3.1 Vue表单控件的数据绑定72

3.1.1 输入框的数据绑定72

【实例3-1】使用v-model指令实现input和textarea控件的双向数据绑定72

3.1.2 复选框的数据绑定74

【实例3-2】使用v-model指令实现复选框的双向数据绑定74

3.1.3 单选按钮的数据绑定74

【实例3-3】使用v-model指令实现单选按钮的双向数据绑定74

3.1.4 选择列表的数据绑定75

【实例3-4】使用v-model指令实现单选列表的双向数据绑定75

【实例3-5】使用v-model指令实现多选列表的双向数据绑定76

【实例3-6】使用v-model结合v-for指令选择用户等级77

3.2 绑定value77

3.2.1 复选框绑定value77

【实例3-7】使用v-model实现复选框绑定value77

3.2.2 单选按钮绑定value78

【实例3-8】使用v-model实现单选按钮绑定value78

3.2.3 选择列表绑定value79

【实例3-9】使用v-model实现选择列表绑定value79

3.3 修饰符79

3.3.1 .lazy修饰符79

【实例3-10】在v-model指令中使用修饰符.lazy80

3.3.2 .number修饰符80

3.3.3 .trim修饰符80

3.4 class绑定81

3.4.1 对象绑定class81

【实例3-11】使用v-bind指令实现简单class绑定81

【实例3-12】使用v-bind:class指令与普通class属性共同设置样式82

【实例3-13】为v-bind:class绑定返回对象的计算属性82

3.4.2 数组绑定class83

3.4.3 组件绑定class84

3.5 style绑定85

3.5.1 使用v-bind:style直接设置样式85

【实例3-14】使用v-bind:style直接设置文本内容的样式85

3.5.2 使用v-bind:style绑定样式对象85

3.5.3 使用v-bind:style绑定样式数组86

拓展提升86

3.6 定义与使用过滤器86

3.6.1 过滤器的两种注册形式86

【实例3-15】使用capitalize过滤器函数将英文句子的首字母转换为大写87

3.6.2 串联使用的过滤器87

3.6.3 使用带参数的JavaScript函数作为过滤器88

3.6.4 在v-bind:class表达式中使用过滤器88

应用实战88

【任务3-1】编写程序代码实现英寸与毫米之间的单位换算88

【任务3-2】编写程序代码实现图片自动播放与单击播放功能89

【任务3-3】编写程序代码实现图片自动缩放与图片播放功能90

在线测试91

单元4

Vue项目创建与运行92

学习领会92

4.1 熟悉创建Vue项目的多种方法92

4.1.1 创建基于webpack模板的Vue项目92

【实例4-1】创建基于webpack模板的Vue项目01-vue-

project92

4.1.2 使用vue create命令创建vue 2.x项目95

【实例4-2】使用vue create命令创建vue 2.x项目02-vue-project95

4.1.3 使用vue create命令创建vue 3.x项目97

【实例4-3】使用vue create命令创建vue 3.x项目03-vue-project97

4.1.4 利用可视化界面创建Vue项目98

【实例4-4】使用可视化操作界面创建vue项目04-vue-project98

4.1.5 使用Vite搭建Vue 3.x项目100

【实例4-5】使用Vite搭建Vue 3.x项目05-vue-project100

4.2 认知Vue项目的组成结构与自定义配置103

4.2.1 认知基于vue-cli 2.x的项目组成结构103

4.2.2 认知基于vue-cli 2.x的package.json文件104

4.2.3 基于vue-cli项目的自定义配置104

4.2.4 认知基于vue-cli 3.x的项目组成结构105

拓展提升107

4.3 认知Vue项目的运行流程107

应用实战111

【任务4-1】基于“Node.js Vue.js MySQL”实现前后端分离的登录与注册功能111

【任务4-2】创建Vite项目实现多种方式浏览与操作图片115

在线测试119

单元5

Vue组件构建与应用120

学习领会120

5.1 组件基础120

5.1.1 初识组件定义120

【实例5-1】定义与使用一个名称为button-counter的组件120

5.1.2 组件的组织123

5.1.3 嵌套限制123

5.1.4 根元素124

5.1.5 原生事件124

5.2 组件注册与使用125

5.2.1 组件命名125

5.2.2 全局注册126

5.2.3 局部注册127

5.2.4 使用组件128

5.3 组件构建129

5.3.1 使用extend()方法构建组件129

5.3.2 使用template标签构建组件129

5.3.3 使用script标签构建组件130

【实例5-2】演练实现组件树的效果131

5.3.4 构建父子组件131

5.4 Vue组件选项props133

5.4.1 父子组件133

5.4.2 静态props134

5.4.3 组件命名约定134

5.4.4 动态props135

5.4.5 传递数字135

5.4.6 props验证136

【实例5-3】验证传入子组件的数据是否为数字137

【实例5-4】使用自定义函数验证传入子组件的数据是否符合指定条件138

5.4.7 单向数据流138

【实例5-5】验证props的单向绑定特性138

5.4.8 修改props数据139

5.4.9 在自定义组件中使用v-for指令140

【实例5-6】在自定义组件中使用v-for指令输出列表140

5.5 组件之间的通信141

【实例5-7】使用props选项实现父组件向子组件传递数据141

5.5.1 父组件向子组件传递数据141

5.5.2 子组件向父组件传递数据142

5.5.3 兄弟组件之间的通信144

5.6 Vue自定义事件144

5.6.1 事件绑定144

5.6.2 自定义事件的命名约定144

5.6.3 子组件向父组件传递数据145

【实例5-8】使用$emit触发事件实现子组件向父组件的数据传递145

5.6.4 .sync修饰符145

【实例5-9】使用.sync修饰符实现子组件向父组件传递数据146

5.7 Vue组件动态切换146

5.7.1 使用v-if和v-else指令结合flag标识符进行切换146

5.7.2 使用component元素结合:is属性实现组件切换146

【实例5-10】通过计算属性直接绑定到组件对象上实现组件切换147

5.7.3 组件切换时使用缓存不活动的组件实例148

【实例5-11】使用条件判断结合限制仅有一个子元素被渲染148

5.8 Vue插槽应用149

5.8.1 插槽概述149

5.8.2 匿名插槽150

5.8.3 提供默认内容的插槽150

5.8.4 具名插槽151

【实例5-12】混用具名插槽与默认值152

【实例5-13】混用具名插槽与匿名插槽152

5.8.5 作用域插槽154

【实例5-14】应用作用域插槽实现组件定义如何渲染列表每一项155

拓展提升156

5.9 Vue混合156

5.9.1 数据合并156

5.9.2 选项合并156

5.9.3 全局混合156

应用实战157

【任务5-1】在自定义组件中利用Vue的transition属性实现图片轮换功能157

【任务5-2】在Element UI中实现Table与Pagination组件化159

在线测试161

单元6

Vue过渡与动画实现162

学习领会162

6.1 通过CSS方式实现过渡效果162

6.1.1 transition组件与transition类163

6.1.2 使用transition组件结合transition属性实现过渡效果164

【实例6-1】使用transition组件结合transition属性实现过渡效果164

6.1.3 使用transition组件结合animation属性实现过渡效果165

【实例6-2】使用transition组件结合animation属性实现过渡效果165

6.1.4 同时使用transition属性和animation属性实现过渡效果165

【实例6-3】同时使用transition属性和animation属性实现过渡效果166

6.1.5 通过transition组件的appear属性实现渲染动画166

【实例6-4】通过给transition组件设置appear属性实现渲染动画166

6.1.6 为动态组件添加过渡效果166

【实例6-5】使用is属性为动态组件添加过渡效果167

6.2 通过JavaScript方式实现Vue的过渡效果167

【实例6-6】使用JavaScript方式实现Vue的过渡效果168

拓展提升168

6.3 实现Vue多元素与多组件过渡168

6.3.1 不同标签名的多元素在切换时实现过渡效果169

【实例6-7】不同标签名的多元素在切换时实现过渡效果169

6.3.2 相同标签名的多元素在切换时实现过渡效果169

【实例6-8】相同标签名的元素在切换时通过key属性实现过渡效果170

6.3.3 实现多组件的过渡效果171

【实例6-9】使用动态组件实现多组件切换时的过渡效果171

6.4 实现Vue列表的过渡效果171

6.4.1 实现列表的普通过渡效果172

【实例6-10】添加和删除列表项时实现普通过渡效果172

6.4.2 实现列表的平滑过渡效果172

6.4.3 实现列表的变换过渡效果173

【实例6-11】利用move属性实现列表的变换过渡效果173

应用实战174

【任务6-1】使用data属性与JavaScript通信以实现列表的渐进过渡效果174

【任务6-2】使用CSS实现列表的渐进过渡效果174

【任务6-3】使用Vue的transition属性实现图片轮播功能174

【任务6-4】使用Vue的transition-group组件实现图片轮播功能175

在线测试177

单元7

Vue路由配置与应用178

学习领会178

7.1 vue-router的基本使用178

7.1.1 安装vue-router178

7.1.2 使用vue-router178

【实例7-1】使用vue-router实现单击超链接显示对应的页面内容178

7.1.3 vue-router的路由模式180

7.2 重定向和使用别名181

7.2.1 重定向181

【实例7-2】使用Vue的重定向功能实现单击超链接显示对应的页面内容181

7.2.2 使用别名183

7.3 设置与使用根路径183

7.4 设置与使用嵌套路由184

7.4.1 使用vue-router实现嵌套路由184

【实例7-3】使用vue-router实现嵌套路由184

7.4.2 设置默认子路由185

7.5 设置与使用命名路由185

【实例7-4】设置与使用命名路由186

7.6 设置与使用命名视图186

【实例7-5】设置与使用命名视图187

7.7 设置与使用动态路由187

7.8 实现编程式导航188

7.8.1 使用router.push(location)方法实现导航188

【实例7-6】使用query方式传递参数189

【实例7-7】使用params方式传递参数190

7.8.2 使用router.replace(location)方法实现导航190

7.8.3 使用router.go(n)方法实现导航190

拓展提升191

7.9 使用导航钩子函数191

7.9.1 全局导航钩子函数191

7.9.2 单个路由独享的导航钩子函数192

7.9.3 组件内的导航钩子函数192

7.10 使用懒加载193

7.11 vue-router的API194

7.11.1 router-link194

7.11.2 router-view195

应用实战195

【任务7-1】实现用户登录与应用路由切换页面195

【任务7-2】基于“Vue.js Axios axios-mock-adapter”实现用户登录199

在线测试203

单元8

Vuex状态管理204

学习领会204

8.1 Vuex概述204

8.1.1 Vuex是什么204

8.1.2 什么是状态管理框架205

【实例8-1】使用自定义方法实现简单的Vue计数功能205

8.1.3 Vuex的运行机制207

8.1.4 Vuex的使用方式208

8.1.5 Vue项目结构示例208

8.2 简单的store应用209

【实例8-2】使用Vuex实现简单的计数功能211

8.3 Vuex的配置选项212

8.3.1 state212

【实例8-3】通过单一状态树实现简单的计数功能212

【实例8-4】实现在Vue组件中获得Vuex状态213

【实例8-5】使用mapState()辅助函数帮助生成计算属性213

8.3.2 getters214

8.3.3 mutations216

8.3.4 actions217

8.3.5 modules220

拓展提升221

8.4 Vuex的API221

应用实战223

【任务8-1】使用Vuex在单个HTML文件中实现计数器功能223

【任务8-2】使用Vuex的属性与方法实现人员列表查询功能223

【任务8-3】使用Vuex结合vue-cli实现计数器功能224

在线测试227

单元9

服务器端渲染228

学习领会228

9.1 区分服务器端渲染和客户端渲染228

9.1.1 熟知基本概念228

9.1.2 认知vue-router（前端路由）的两种路由模式232

9.2 手动搭建项目实现简单的服务器端渲染233

9.2.1 了解vue-server-renderer的作用及基本语法233

9.2.2 直接编写代码将Vue实例渲染为HTML234

【实例9-1】在vue-ssr项目中编写代码将Vue实例渲染为HTML234

9.2.3 使用Express框架搭建服务器端渲染235

【实例9-2】在vue-ssr项目中使用Express框架搭建服务器端渲染235

9.2.4 使用Koa框架搭建服务器端渲染237

【实例9-3】在vue-ssr项目中使用Koa框架搭建服务器端渲染237

9.3 使用Nuxt.js框架实现服务器端渲染238

9.3.1 页面和路由238

9.3.2 页面跳转239

【实例9-4】创建Nuxt.js项目搭建服务器端渲染241

拓展提升248

9.4 Vue-SSR的工作原理248

应用实战249

【任务9-1】创建一个简单的vue-ssr服务器端渲染项目249

【任务9-2】创建vue-cli改造而成的vue-ssr服务器端渲染项目255

【任务9-3】基于Nuxt.js创建一个服务器端渲染应用——旅游网站259

在线测试263

单元10

Vue综合应用实战264

【任务10-1】编写程序实现简单的登录注册评论功能264

【任务10-2】编写程序实现简单的购物车功能268

【任务10-3】综合应用多项技术实现前后端分离的移动版网上商城项目270

【任务10-4】综合应用多项技术实现前后端分离的网上商城项目276

在线测试281

附录A

Vue程序开发环境搭建282

附录B

JavaScript与ECMAScript 

6.0简介284

B.1 JavaScript简介284

B.2 初识ES6284

附录C

Vue应用开发工具简介287

Ｃ.1 认知与使用Node.js的包

管理器——NPM287

C.1.1 NPM概述287

C.1.2 安装NPM287

C.1.3 安装与卸载包287

C.1.4 使用NPM常用的命令287

C.1.5 使用package.json288

C.1.6 区分包和模块288

C.1.7 解决国内使用NPM慢的问题288

C.2 认知与使用包管理工具——Yarn288

C.3 认知与使用脚手架工具——vue-cli288

C.4 认知模块打包工具——webpack289

C.4.1 webpack概述289

C.4.2 创建一个新的项目289

C.5 认知前端构建工具——Vite289

C.5.1 Vite概述289

C.5.2 Vite的使用方式289

C.5.3 Vite解决了webpack哪些问题289

C.5.4 Vite启动链路289

C.6 认知ES转码器——Babel290

C.6.1 Babel概述290

C.6.2 使用Babel290

C.7 认知CSS预处理器——SASS290

C.7.1 SASS概述290

C.7.2 使用SASS290

C.7.3 SASS的基本用法290

C.8 认知代码检查工具——ESLint291

C.8.1 ESLint概述291

C.8.2 使用ESLint291

附录D

Vue应用开发平台与框架简介292

D.1 认知JavaScript应用开发平台——Node.js292

D.1.1 Node.js概述292

D.1.2 创建与执行简单的Node.js程序292

D.1.3 创建与执行在服务器端运行的Node.js应用程序292

D.1.4 使用Node.js连接MySQL数据库292

D.1.5 使用Node.js操作数据库292

D.2 认知Web应用框架——Express292

D.2.1 Express概述293

D.2.2 创建简单的Express应用程序293

D.2.3 使用应用程序生成器工具快速创建应用程序293

D.2.4 Express的基本路由简介293

D.3 认知Web开发框架——Koa与Koa2293

D.3.1 Koa快速入门293

D.3.2 Koa2快速入门293

D.4 认知状态管理框架——Vuex293

D.4.1 Vuex概述293

D.4.2 Vuex的几个术语294

D.5 认知前端开发框架——Nuxt.js294

D.5.1 Nuxt.js概述294

D.5.2 认知Nuxt.js项目的文件夹结构294

附录E

Vue应用开发的库与插件简介295

E.1 认知HTTP库——Axios295

E.1.1 概述295

E.1.2 Axios的常用方法与API295

E.1.3 使用Axios的实例295

E.2 认知UI组件库——Element-UI295

E.2.1 Element-UI概述295

E.2.2 通过CDN方式使用Element-UI组件296

E.2.3 在webpack项目中使用Element-UI组件296

E.3 认知UI组件库——iView UI与View UI296

E.3.1 iView UI概述296

E.3.2 通过CDN方式使用iView组件296

E.3.3 在webpack项目中使用iView组件296

E.3.4 View UI概述296

E.3.5 在webpack项目中使用View UI组件296

E.4 认知插件Postman297

E.4.1 Postman概述297

E.4.2 发送HTTP请求297

E.5 认知模拟后端接口插件——Mock.js297

E.5.1 Mock.js概述297

E.5.2 使用Mock.js297

附录F

精简版Vue编程风格指南298

参考文献300