本书深入浅出地介绍Vue.js前端开发框架应用相关的技术,主要包括Vue.js基础、数据绑定、指令、事件处理、样式绑定、组件、路由、渲染方法等,逻辑严密,实例丰富,内容翔实,可操作性强。本书还包含两个实战项目——“待办事项”和“大学生志愿者服务”,帮助读者更深入地理解Vue.js框架在项目开发中的应用。
本书可作为职业院校计算机相关专业的教材,也可作为Web前端开发人员的参考书,还可以作为计算机相关课程的培训教材。
全面覆盖:本书全面涵盖了Vue 3.0的核心概念、语法、组件、路由、状态管理、动画等知识点,帮助读者系统地掌握Vue 3.0技术。
实战案例:本书提供了大量的实战案例,让读者在学习理论知识的同时,能够通过实际操作来巩固所学知识,提高实际开发能力。
深入浅出:本书以通俗易懂的语言讲解Vue 3.0技术,避免使用过多的专业术语,让初学者也能够轻松入门。
提供了大量的配套资源,如教学大纲、教学计划、习题库等,方便教师进行教学和学生进行自学。
董宁,男,现为武汉软件工程职业学院信息学院教师,副教授。“武汉市高校优秀青年教师”称号、武汉软件工程职业学院“优秀中青年骨干教师”称号、武汉软件工程职业学院“校级专业带头人”称号获得者。
主要研究方向为软件技术,公开发表论文(第一作者)19篇,其中核心期刊3篇;主编教材5本;主持省、市各类课题3项;获得湖北省高等学校教学成果二等奖一项,得武汉市教学成果奖三等奖一项,获武汉软件工程职业学院教学成果二等奖一项,负责申报并获武汉软件工程职业学院软件技术专业“工人先锋号”。
基础应用篇
第 1章
Vue.js基础 1
1.1 Vue.js简介 2
1.1.1 Vue.js基础 2
1.1.2 Vue.js的特点 2
1.2 Vue.js的获取与使用 3
1.2.1 Vue.js开发环境 3
1.2.2 以直接引入方式使用Vue.js 8
1.2.3 以构建方式使用Vue.js 9
1.3 MVVM模式与Vue.js应用 10
1.3.1 双向数据绑定 10
1.3.2 MVVM模式 11
1.3.3 创建MVVM模式的Web前端应用 11
本章小结 12
习 题 12
第 2章
Vue.js数据绑定 13
2.1 模板语法 14
2.1.1 插值 14
2.1.2 表达式 15
2.2 响应式声明渲染机制 16
2.2.1 响应式声明渲染机制简介 16
2.2.2 Vue.js属性绑定 19
2.2.3 Vue.js双向数据绑定 20
2.3 Vue.js计算属性 21
2.3.1 计算属性 21
2.3.2 计算属性与方法的区别 23
2.4 Vue.js生命周期 25
2.4.1 Vue.js生命周期图解 25
2.4.2 Vue.js生命周期详解 26
2.4.3 Vue.js生命周期函数主要业务应用 29
本章小结 29
习 题 29
第3章
Vue.js指令 30
3.1 Vue.js指令概述 31
3.1.1 Vue.js指令 31
3.1.2 指令参数 31
3.1.3 动态参数 31
3.1.4 指令修饰符 32
3.2 Vue.js指令详解 32
3.2.1 v-once指令 32
3.2.2 v-text和v-html指令 33
3.2.3 v-pre指令 34
3.2.4 v-cloak指令 35
3.2.5 v-memo指令 36
3.2.6 v-bind指令 37
3.2.7 v-on指令 42
3.2.8 v-for指令 42
3.2.9 v-if指令 47
3.2.10 v-show指令 50
3.3 表单输入绑定 51
3.3.1 v-model指令 51
3.3.2 v-model绑定value属性 52
3.3.3 v-model的修饰符 59
本章小结 59
习 题 59
第4章
Vue.js事件处理 61
4.1 Vue.js事件处理器 62
4.1.1 监听事件 62
4.1.2 方法事件处理器 62
4.1.3 内联事件处理器 64
4.2 修饰符 67
4.2.1 事件修饰符 67
4.2.2 按键修饰符 69
4.2.3 鼠标按键修饰符 73
4.3 watch侦听 73
4.3.1 侦听器 73
4.3.2 深层侦听器 74
4.3.3 即时回调的侦听器 77
4.3.4 this.$watch 78
4.3.5 停止侦听器 79
本章小结 80
习 题 80
第5章
Vue.js样式绑定 81
5.1 Vue.js绑定样式 82
5.1.1 静态绑定样式 82
5.1.2 动态绑定样式 83
5.1.3 绑定多个样式 87
5.2 通过数组绑定样式 89
5.3 Vue.js绑定内联样式 91
5.3.1 直接绑定内联样式 91
5.3.2 通过数组绑定内联样式 93
5.4 使用计算属性绑定样式 95
本章小结 97
习 题 97
高级应用篇
第6章
Vue.js组件 99
6.1 组件基础 100
6.1.1 以非构建方式定义组件 100
6.1.2 以构建方式定义组件 102
6.1.3 组件的注册与使用 106
6.2 组件高级应用 109
6.2.1 组件插槽 109
6.2.2 传递数据 115
6.2.3 组件中的事件 119
6.2.4 数据依赖注入 124
本章小结 130
习 题 130
第7章
Vue.js路由 132
7.1 路由基础 133
7.2 以构建方式使用路由 135
7.3 带参数路由的匹配 138
7.3.1 路由参数 139
7.3.2 路由参数匹配规则 141
7.4 嵌套路由 144
7.5 命名路由 149
7.6 命名视图 151
7.7 路由别名与重定向 157
7.8 编程式导航 159
本章小结 161
习 题 161
第8章
Vue.js渲染方法 163
8.1 虚拟节点 164
8.1.1 DOM节点树 164
8.1.2 虚拟DOM 164
8.1.3 创建VNode 165
8.2 渲染方法 167
8.3 JavaScript代码代替模板功能 170
8.3.1 v-if和v-for 170
8.3.2 v-model 172
8.3.3 slots 175
本章小结 177
习 题 177
实战篇
第9章
“待办事项”项目 179
9.1 Vue.js开发环境 180
9.1.1 Node.js环境 180
9.1.2 包管理工具 181
9.1.3 安装Vue CLI脚手架 182
9.2 创建Vue.js项目 183
9.2.1 vue create命令创建项目 183
9.2.2 图形化界面创建项目 184
9.2.3 项目文件结构 188
9.3 项目功能开发 191
9.3.1 项目分析 191
9.3.2 初始化项目 192
9.3.3 代码实现 193
9.3.4 运行和打包 201
本章小结 201
第 10章
“大学生志愿者服务”项目 202
10.1 项目分析 203
10.1.1 项目展示 203
10.1.2 技术方案 204
10.2 工程化项目搭建 205
10.2.1 创建项目 205
10.2.2 项目目录 206
10.2.3 资源准备 206
10.2.4 Mock数据 208
10.3 项目功能开发 209
10.3.1 页面入口 209
10.3.2 首页 211
10.3.3 个人信息维护 213
10.3.4 积分排名 216
10.3.5 活动列表 217
10.3.6 活动详情 219
10.3.7 我的报名 221
10.3.8 服务记录上传 222
10.3.9 服务记录列表 226
10.3.10 服务记录详情 228
本章小结 228