Vue快速入门 1


任务 创建第 一个Vue应用 2
【任务提出】 2
【任务分析】 2
【知识准备】 2
1.1 Vue简介 2
1.1.1 什么是Vue 2
1.1.2 Vue的发展时间线 3
1.1.3 Vue的优点 4
1.1.4 Vue 3的新特性 5
1.2 开发环境搭建 6
1.2.1 Visual Studio Code 6
1.2.2 VS Code的下载和安装 6
1.2.3 安装插件 7
【任务实现】 7
【任务总结】 8
【巩固练习】 8
【任务拓展】 9


Vue语法基础 10


任务1 实现简单的计时器 11
【任务提出】 11
【任务分析】 11
【知识准备】 11
2.1 Vue实例的创建与挂载 11
2.2 数据的定义与渲染 12
2.2.1 定义数据 12
2.2.2 插值 13
2.3 methods 13
2.4 computed 15
2.4.1 计算属性的基本使用方法 15
2.4.2 计算属性的get方法和set
方法 16
2.4.3 计算属性的缓存功能 17
2.5 watch 19
2.5.1 watch监听属性 19
2.5.2 deep属性 20
2.6 在Vue 2中创建实例 21
【任务实现】 23
【任务总结】 24
【巩固练习】 25
【任务拓展】 25


Vue数据绑定 27


任务1 设计应聘信息登记表 28
【任务提出】 28
【任务分析】 28
【知识准备】 28
3.1 单向数据绑定 28
3.2 双向数据绑定 30
3.2.1 绑定单行文本框 30
3.2.2 绑定多行文本框 30
3.2.3 绑定复选框 31
3.2.4 绑定单选按钮 32
3.2.5 绑定下拉列表 33
3.2.6 绑定多选列表框 34
3.3 修饰符 35
3.3.1 .lazy 35
3.3.2 .number 35
3.3.3 .trim 36
3.4 MVVM模式 36
【任务实现】 37
【任务总结】 40
【巩固练习】 40
【任务拓展】 40
任务2 使用样式绑定实现投票和撤回投票
功能 41
【任务提出】 41
【任务分析】 42
【知识准备】 42
3.5 绑定样式类 42
3.5.1 对象语法 42
3.5.2 数组语法 45
3.6 绑定内联样式 47
3.6.1 对象语法 47
3.6.2 数组语法 49
【任务实现】 49
【任务总结】 51
【巩固练习】 51
【任务拓展】 52


Vue内置指令 53


任务1 跑马灯 54
【任务提出】 54
【任务分析】 54
【知识准备】 54
4.1 v-on指令 54
4.2 事件修饰符 55
4.3 生命周期 56
4.4 字符串的截取和拼接 57
4.5 定时器 57
【任务实现】 57
【任务总结】 58
【巩固练习】 59
【任务拓展】 59
任务2 切换登录方式 60
【任务提出】 60
【任务分析】 60
【知识准备】 60
4.6 条件渲染指令简介 60
4.6.1 v-if指令 60
4.6.2 v-else-if指令 60
4.6.3 v-else指令 61
4.6.4 v-show指令 61
4.7 v-html和v-text 61
4.7.1 v-html指令 61
4.7.2 v-text指令 62
4.8 input中key属性作用 62
【任务实现】 62
【任务总结】 64
【巩固练习】 64
【任务拓展】 64
任务3 搜索指定的图书信息 65
【任务提出】 65
【任务分析】 65
【知识准备】 65
4.9 v-for指令 65
4.10 search函数 66
【任务实现】 66
【任务总结】 68
【巩固练习】 68
【任务拓展】 69
任务4 购物车 69
【任务提出】 69
【任务分析】 69
【知识准备】 70
4.10 数组的基本操作方法 70
【任务实现】 70
【任务总结】 72
【巩固练习】 72
【任务拓展】 73


Vue组件 74


任务1 使用组件嵌套制作“校园新闻”
版块 75
【任务提出】 75
【任务分析】 75
【知识准备】 75
5.1 组件的定义 75
5.2 组件的使用方法 76
5.3 全局组件 76
5.4 局部组件 77
5.5 组件嵌套 79
【任务实现】 80
【任务总结】 82
【巩固练习】 83
【任务拓展】 83
任务2 制作“简易购物车”组件 83
【任务提出】 83
【任务分析】 84
【知识准备】 84
5.6 父组件向子组件传递数据 84
5.6.1 静态传递数据 84
5.6.2 动态传递数据 85
5.6.3 数据验证 86
5.7 子组件向父组件传递数据 89
【任务实现】 91
【任务总结】 94
【巩固练习】 94
【任务拓展】 94
任务3 使用具名插槽制作“新闻热点”
版块 95
【任务提出】 95
【任务分析】 96
【知识准备】 96
5.8 默认插槽 96
5.9 具名插槽 98
5.10 作用域插槽 100
5.11 动态组件 102
【任务实现】 105
【任务总结】 107
【巩固练习】 107
【任务拓展】 108


Vue路由管理 109


任务1 实现选项卡 110
【任务提出】 110
【任务分析】 110
【知识准备】 110
6.1 Vue Router入门 110
6.1.1 认识前端路由 110
6.1.2 认识Vue Router 111
6.2 Vue Router的安装与使用 111
6.2.1 Vue Router的安装 111
6.2.2 Vue Router的使用步骤 112
【任务实现】 112
【任务总结】 116
【巩固练习】 116
【任务拓展】 117
任务2 实现后台管理系统 117
【任务提出】 117
【任务分析】 118
【知识准备】 118
6.3 嵌套路由 118
6.4 动态路由 119
6.5 命名路由 120
6.6 编程式导航 121
【任务实现】 121
【任务总结】 125
【巩固练习】 125
【任务拓展】 126


Vue组合式API 127


任务 选项卡 128
【任务提出】 128
【任务分析】 128
【知识准备】 128
7.1 Vue组合式API 128
7.2 setup函数 129
7.3 响应式API 129
7.3.1 ref 129
7.3.2 reactive 130
7.3.3 watchEffect 131
7.3.4 computed 131
【任务实现】 132
【任务总结】 134
【巩固练习】 135
【任务拓展】 135


Vue项目搭建 136


任务1 使用Vue CLI构建项目实现组件
切换 137
【任务提出】 137
【任务分析】 137
【知识准备】 137
8.1 认识Vue CLI 137
8.1.1 什么是Vue CLI 137
8.1.2 使用Vue CLI的前提——
Node.js的安装 138
8.1.3 Vue CLI的安装 140
8.2 使用Vue CLI创建项目 141
8.2.1 快速创建项目 141
8.2.2 分析项目结构 141
8.3 单文件组件 142
8.3.1 什么是单文件组件 143
8.3.2 创建并使用Hello单文件
组件 143
8.4 在Vue CLI项目中使用路由 145
8.4.1 安装路由插件Vue Router 145
8.4.2 Vue Router插件在Vue CLI
项目中的使用 146
【任务实现】 147
【任务总结】 149
【巩固练习】 149
【任务拓展】 150
任务2 使用Vite构建项目实现学生管理
系统的导航功能 150
【任务提出】 150
【任务分析】 150
【知识准备】 151
8.5 认识Vite 151
8.5.1 什么是Vite 151
8.5.2 Vite的优势 151
8.6 使用Vite创建Vue 3项目 151
【任务实现】 153
【任务总结】 158
【巩固练习】 158
【任务拓展】 159


Vue网络请求 160


任务 调用后台端口实现用户管理
模块 161
【任务提出】 161
【任务分析】 161
【知识准备】 161
9.1 Axios 161
9.1.1 什么是Axios 162
9.1.2 Axios应用 162
9.2 后端准备 164
9.2.1 搭建服务器环境 164
9.2.2 准备后端网站 165
9.3 跨域问题 169
9.3.1 使用Axios发送网络请求 169
9.3.2 什么是跨域请求 171
9.3.3 解决跨域请求问题 171
【任务实现】 172
【任务总结】 181
【巩固练习】 182
【任务拓展】 182


Vue状态管理 184


任务 购物车 185
【任务提出】 185
【任务分析】 185
【知识准备】 185
10.1 Vuex介绍 185
10.1.1 什么是Vuex 185
10.1.2 安装 186
10.2 Vuex核心概念 186
10.2.1 state 186
10.2.2 Getter 187
10.2.3 Mutation 188
10.2.4 Action 189
10.2.5 Module 189
【任务实现】 190
【任务总结】 198
【巩固练习】 198
【任务拓展】 198


项目实战：开发个人博客
系统 199

任务 开发个人博客系统 200
【任务提出】 200
【任务分析】 200
【知识准备】 200
11.1 项目分析 200
11.1.1 项目展示 201
11.1.2 组件规划 201
11.2 前端准备 204
11.3 后端准备 206
【任务实现】 207
【任务总结】 219
【巩固练习】 219
【任务拓展】 220