Vue.js前端开发基础及项目化应用 微课版

1.本书采用项目任务式写法，详细讲解Vue3的相关知识； 2.本书配套丰富的教学资源，包括教学PPT、源代码、教学大纲、教学设计、教学视频； 3.本书配套了大量动手实践案例，突出培养读者的动手能，同时保证理论知识的完整性和系统性。

本书共11个单元，用通俗易懂的语言和丰富的案例，详细讲解Vue.js 3的相关技术和知识，具体内容包括Vue.js 3入门基础、基础语法、组件基础、组件进阶、过渡和动画、组合式API、与后端交互——axios、路由管理——Vue Router、状态管理——Vuex、构建工程化的Vue项目，以及工程化项目实战：图片素材库网站。 本书配套丰富的教学资源，包括教学PPT、源代码、教案及习题等。 本书可作为高等教育本、专科院校计算机相关专业的教材，也可作为网站开发爱好者的自学读物。

古凌岚，资深教授，广东轻工职业技术学院信息学院专业带头人，曾出版过多部优秀教材，重量十二五规划、十三五规划、十四五规划教材作者。

   单元1

Vue．js 3入门基础 1

单元导学 1

学习目标 1

知识学习 1

1．1 前端开发模式的演变历程 1

1．2 认识Vue．js 2

1．3 项目开发准备 3

1．3．1 了解相关工具 3

1．3．2 安装开发和调试工具 4

应用实践 10

项目1 历史名城简介页面 10

任务1-1 构建Vue应用程序 10

任务1-2 运行并调试Vue应用程序 12

同步训练 12

单元小结 13

单元练习 13




单元2

基础语法 14

单元导学 14

学习目标 14

知识学习 15

2．1 剖析Vue应用程序 15

2．2 单向绑定 17

2．3 双向绑定 22

2．4 流程控制 25

2．4．1 条件渲染 25

2．4．2 列表渲染 27

2．5 事件处理 29

2．5．1 事件监听 29

2．5．2 事件修饰符 31

2．6 计算属性 34

2．7 数据监听器 35

应用实践 37

项目2-1 简易计算器 37

任务2-1-1 构建页面布局 37

任务2-1-2 创建根组件和Vue应用实例 38

项目2-2 历史名城典故页面 39

任务2-2-1 构建页面布局 39

任务2-2-2 创建根组件和Vue应用实例 40

同步训练 40

单元小结 41

单元练习 42




单元3

组件基础 43

单元导学 43

学习目标 43

3．1 认识组件 44

3．2 组件定义 45

3．3 组件注册 47

3．3．1 全局注册 47

3．3．2 局部注册 48

3．4 组件间数据传递 49

3．4．1 props的使用 49

3．4．2 props的验证 52

3．5 组件事件 55

3．5．1 组件事件的监听与处理 55

3．5．2 组件事件的验证 57

3．5．3 v-model与自定义事件 59

3．6 组件插槽 61

3．6．1 默认插槽 61

3．6．2 具名插槽 63

3．6．3 作用域插槽 64

3．7 动态组件 66

应用实践 67

项目3 自定义页面图标样式 67

任务3-1 构建页面布局 68

任务3-2 实现自定义图标样式 69

同步训练 70

单元小结 70

单元练习 71




单元4

组件进阶 72

单元导学 72

学习目标 72

知识学习 72

4．1 组件生命周期 72

4．1．1 生命周期钩子函数 73

4．1．2 实例创建 74

4．1．3 页面挂载 75

4．1．4 数据更新 76

4．1．5 组件实例销毁 77

4．2 Teleport 79

4．2．1 基本用法 79

4．2．2 结合组件使用 82

应用实践 83

项目4 弹出式登录框 83

任务4-1 构建页面布局 84

任务4-2 创建登录框组件 85

同步训练 86

单元小结 87

单元练习 87




单元5

过渡和动画 88

单元导学 88

学习目标 88

知识学习 89

5．1 认识过渡和动画 89

5．2 实现过渡和动画 90

5．2．1 Transition组件 90

5．2．2 过渡 92

5．2．3 动画 93

5．2．4 基于钩子函数的过渡和动画 93

5．3 多个元素和组件过渡 97

5．4 列表过渡 100

应用实践 101

项目5 会员中心页面 101

任务5-1 构建页面布局 102

任务5-2 创建局部组件 103

同步训练 105

单元小结 105

单元练习 105




单元6

组合式API 107

单元导学 107

学习目标 107

知识学习 107

6．1 组合式API 107

6．1．1 认识组合式API 108

6．1．2 setup函数 111

6．1．3 访问生命周期钩子函数 113

6．2 响应性API 114

6．2．1 响应性原理 114

6．2．2 响应性API的应用 117

6．3 provide inject响应式传值 123

应用实践 126

项目6 查询历史名城相关诗词 126

任务6-1 采用选项式API实现 126

任务6-2 利用组合式API重构 130

同步训练 131

单元小结 131

单元练习 132




单元7

与后端交互——axios 134

单元导学 134

学习目标 134

知识学习 134

7．1 认识axios 134

7．1．1 异步编程 135

7．1．2 axios安装与配置 140

7．2 axios处理HTTP请求 142

7．3 axios 145

应用实践 147

项目7 查询旅游城市天气 147

任务7-1 构建页面布局 148

任务7-2 实现天气预报查询 149

同步训练 152

单元小结 152

单元练习 153




单元8

路由管理——Vue Router 154

单元导学 154

学习目标 154

知识学习 155

8．1 认识Vue Router 155

8．1．1 前端路由 155

8．1．2 Vue Router安装与使用 156

8．2 路由属性 157

8．2．1 嵌套路由 157

8．2．2 命名路由 159

8．2．3 命名视图 160

8．3 动态路由 161

8．3．1 路由传参 161

8．3．2 路由函数 162

8．4 导航 164

8．4．1 声明式导航 164

8．4．2 编程式导航 166

8．5 导航守卫 168

8．5．1 全局导航守卫 168

8．5．2 路由导航守卫 170

应用实践 171

项目8 用户登录及注册 171

任务8-1 构建页面头部布局 172

任务8-2 实现登录和注册功能 173

同步训练 176

单元小结 176

单元练习 177




单元9

状态管理——Vuex 179

单元导学 179

学习目标 179

知识学习 179

9．1 认识Vuex 179

9．1．1 状态管理模式 180

9．1．2 Vuex安装与使用 182

9．2 Vuex核心属性 184

9．2．1 state 184

9．2．2 getters 185

9．2．3 mutations 187

9．2．4 actions 189

9．2．5 modules 192

应用实践 194

项目9 记录用户浏览历史 194

任务9-1 构建页面布局 195

任务9-2 实现浏览历史的记录和获取功能 198

同步训练 201

单元小结 201

单元练习 202




单元10

构建工程化的Vue项目 203

单元导学 203

学习目标 203

知识学习 204

10．1 Vue CLI工具 204

10．2 快速构建项目 205

10．3 项目组成要素 207

10．3．1 项目结构 207

10．3．2 项目入口文件 207

10．3．3 单文件组件 208

10．4 项目配置文件 212

10．4．1 package．json 212

10．4．2 vue．config．js 213

10．5 新一代构建工具Vite 214

10．5．1 Vite工具特点 215

10．5．2 体验Vite工具 215

10．6 Element Plus组件库 216

应用实践 218

项目10 todoMVC 218

任务10-1 构建项目主页布局 219

任务10-2 构建组件TodoHeader 220

任务10-3 构建组件TodoList 221

任务10-4 构建组件TodoFooter 223

同步训练 224

单元小结 225

单元练习 225




单元11

工程化项目实战：图片素材库网站 226

单元导学 226

学习目标 226

11．1 项目设计 227

11．1．1 项目功能模块 227

11．1．2 项目实现思路 227

11．1．3 项目工程化规范 232

11．2 前端子项目——构建项目 233

11．2．1 创建Vue工程 234

11．2．2 配置路由 234

11．2．3 配置Vuex 235

11．2．4 配置axios 237

11．2．5 项目入口 238

11．3 前端子项目——公共组件 239

11．4 前端子项目——网站首页 240

11．4．1 整体布局 240

11．4．2 轮播图 243

11．5 前端子项目——用户登录 245

11．6 前端子项目——图片展示与操作 247

11．7 前端子项目——图片分享 251

11．8 后端子项目——构建项目 255

11．8．1 认识Express框架 255

11．8．2 搭建后端子项目 257

11．9 后端子项目——用户登录合法性验证 258

单元小结 262

单元练习 263




附录

ES6相关语法 264