Vue.js基础与应用开发实战(微课版)

单元1
Vue．js起步 1
学习领会 1
1．1 Vue概述 1
【实例1-1】借助JavaScript访问HTML元素 4
1．2 下载、安装与引入Vue 5
1．2．1 下载与安装Vue 5
1．2．2 引入Vue 6
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的API 9
1．4．1 Vue的全局配置 9
【实例1-3】使用Vue的全局配置项 9
1．4．2 Vue的全局API方法 10
【实例1-4】应用Vue组件构造器Vue．extend 10
1．4．3 Vue实例对象的数据选项 14
【实例1-5】通过vm．$data访问Vue实例的数据对象 15
【实例1-6】应用Vue的计算属性computed 18
【实例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 什么是MVVM 30
1．6．2 为什么要使用MVVM 30
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 绑定value 77
3．2．1 复选框绑定value 77
【实例3-7】使用v-model实现复选框绑定value 77
3．2．2 单选按钮绑定value 78
【实例3-8】使用v-model实现单选按钮绑定value 78
3．2．3 选择列表绑定value 79
【实例3-9】使用v-model实现选择列表绑定value 79
3．3 修饰符 79
3．3．1 ．lazy修饰符 79
【实例3-10】在v-model指令中使用修饰符．lazy 80
3．3．2 ．number修饰符 80
3．3．3 ．trim修饰符 80
3．4 class绑定 81
3．4．1 对象绑定class 81
【实例3-11】使用v-bind指令实现简单class绑定 81
【实例3-12】使用v-bind：class指令与普通class属性共同设置样式 82
【实例3-13】为v-bind：class绑定返回对象的计算属性 82
3．4．2 数组绑定class 83
3．4．3 组件绑定class 84
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-
project 92
4．1．2 使用vue create命令创建vue 2．x项目 95
【实例4-2】使用vue create命令创建vue 2．x项目02-vue-project 95
4．1．3 使用vue create命令创建vue 3．x项目 97
【实例4-3】使用vue create命令创建vue 3．x项目03-vue-project 97
4．1．4 利用可视化界面创建Vue项目 98
【实例4-4】使用可视化操作界面创建vue项目04-vue-project 98
4．1．5 使用Vite搭建Vue 3．x项目 100
【实例4-5】使用Vite搭建Vue 3．x项目05-vue-project 100
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组件选项props 133
5．4．1 父子组件 133
5．4．2 静态props 134
5．4．3 组件命名约定 134
5．4．4 动态props 135
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-router 178
7．1．2 使用vue-router 178
【实例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的API 194
7．11．1 router-link 194
7．11．2 router-view 195
应用实战 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 state 212
【实例8-3】通过单一状态树实现简单的计数功能 212
【实例8-4】实现在Vue组件中获得Vuex状态 213
【实例8-5】使用mapState()辅助函数帮助生成计算属性 213
8．3．2 getters 214
8．3．3 mutations 216
8．3．4 actions 217
8．3．5 modules 220
拓展提升 221
8．4 Vuex的API 221
应用实战 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实例渲染为HTML 234
【实例9-1】在vue-ssr项目中编写代码将Vue实例渲染为HTML 234
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 初识ES6 284

附录C
Vue应用开发工具简介 287
Ｃ．1 认知与使用Node．js的包
管理器——NPM 287
C．1．1 NPM概述 287
C．1．2 安装NPM 287
C．1．3 安装与卸载包 287
C．1．4 使用NPM常用的命令 287
C．1．5 使用package．json 288
C．1．6 区分包和模块 288
C．1．7 解决国内使用NPM慢的问题 288
C．2 认知与使用包管理工具——Yarn 288
C．3 认知与使用脚手架工具——vue-cli 288
C．4 认知模块打包工具——webpack 289
C．4．1 webpack概述 289
C．4．2 创建一个新的项目 289
C．5 认知前端构建工具——Vite 289
C．5．1 Vite概述 289
C．5．2 Vite的使用方式 289
C．5．3 Vite解决了webpack哪些问题 289
C．5．4 Vite启动链路 289
C．6 认知ES转码器——Babel 290
C．6．1 Babel概述 290
C．6．2 使用Babel 290
C．7 认知CSS预处理器——SASS 290
C．7．1 SASS概述 290
C．7．2 使用SASS 290
C．7．3 SASS的基本用法 290
C．8 认知代码检查工具——ESLint 291
C．8．1 ESLint概述 291
C．8．2 使用ESLint 291

附录D
Vue应用开发平台与框架简介 292
D．1 认知JavaScript应用开发平台——Node．js 292
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应用框架——Express 292
D．2．1 Express概述 293
D．2．2 创建简单的Express应用程序 293
D．2．3 使用应用程序生成器工具快速创建应用程序 293
D．2．4 Express的基本路由简介 293
D．3 认知Web开发框架——Koa与Koa2 293
D．3．1 Koa快速入门 293
D．3．2 Koa2快速入门 293
D．4 认知状态管理框架——Vuex 293
D．4．1 Vuex概述 293
D．4．2 Vuex的几个术语 294
D．5 认知前端开发框架——Nuxt．js 294
D．5．1 Nuxt．js概述 294
D．5．2 认知Nuxt．js项目的文件夹结构 294

附录E
Vue应用开发的库与插件简介 295
E．1 认知HTTP库——Axios 295
E．1．1 概述 295
E．1．2 Axios的常用方法与API 295
E．1．3 使用Axios的实例 295
E．2 认知UI组件库——Element-UI 295
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 UI 296
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 认知插件Postman 297
E．4．1 Postman概述 297
E．4．2 发送HTTP请求 297
E．5 认知模拟后端接口插件——Mock．js 297
E．5．1 Mock．js概述 297
E．5．2 使用Mock．js 297

附录F
精简版Vue编程风格指南 298

参考文献 300