VUE.JS前端开发基础及项目化应用(微课版)

单元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