第1章 初识Vue.js 1
1.1 前端技术的发展 1
1.1.1 前端的起源 1
1.1.2 从前后端未分离开发到前后端
分离开发 2
1.2 前端主流框架 3
1.2.1 AngularJS 3
1.2.2 React 3
1.2.3 Vue 3
1.3 前端架构模式 4
1.3.1 MVC 4
1.3.2 MVVM 4
1.4 Vue概述 5
1.4.1 Vue简介 5
1.4.2 Vue的发展史 6
1.4.3 Vue 3新特性 6
1.5 Vue的使用 7
1.5.1 开发工具的选择 7
1.5.2 Vue的引入和安装 7
1.5.3 第一个Vue应用——
HelloWorld 8
本章小结 10
本章练习 10
第2章 Vue开发基础 11
2.1 Vue实例 11
2.1.1 挂载应用 11
2.1.2 数据模型 12
2.1.3 methods定义方法 13
2.2 模板语法 14
2.2.1 模板语法简介 14
2.2.2 模板插值 14
2.2.3 模板表达式 16
2.2.4 模板指令 17
2.3 条件渲染 17
2.3.1 v-if条件渲染 17
2.3.2 v-show条件渲染 19
2.4 列表渲染 19
2.4.1 遍历数组 19
2.4.2 遍历对象 21
2.4.3 使用范围值 21
2.4.4 v-for和v-if同时使用的问题 21
2.4.5 通过key属性管理状态 22
2.4.6 数组变化侦听 22
2.5 计算属性——computed 23
2.5.1 计算属性的基本使用 23
2.5.2 计算属性vs方法调用 23
2.5.3 可写计算属性 24
2.6 侦听器——watch 24
2.6.1 侦听器的基本使用 25
2.6.2 深层次侦听器和回调侦听器 25
2.6.3 使用$watch()创建侦听和停止
侦听 26
2.6.4 侦听器vs计算属性 27
2.7 数据绑定 27
2.7.1 class属性绑定 27
2.7.2 内联样式绑定 29
2.7.3 表单数据的双向绑定 29
2.8 事件处理 32
2.8.1 事件的侦听和处理 32
2.8.2 事件修饰符 33
2.8.3 按键修饰符 34
2.9 案例：图书管理页面 35
2.9.1 图书管理页面布局 35
2.9.2 图书列表渲染 38
2.9.3 添加和删除图书 39
本章小结 40
本章练习 41
第3章 Vue指令 42
3.1 Vue内置指令 42
3.1.1 v-text 43
3.1.2 v-html 43
3.1.3 v-bind 43
3.1.4 v-pre 44
3.1.5 v-once 44
3.1.6 v-memo 44
3.1.7 v-cloak 45
3.2 自定义指令 46
3.2.1 自定义指令的注册和使用 46
3.2.2 自定义指令钩子函数 47
本章小结 48
本章练习 48
第4章 Vue组件 49
4.1 组件概念和定义 49
4.1.1 组件的概念 49
4.1.2 组件的定义 50
4.2 组件的注册和使用 51
4.2.1 全局注册 51
4.2.2 局部注册 52
4.3 组件中数据的传递 52
4.3.1 props属性 52
4.3.2 $emit()侦听事件 53
4.3.3 组件使用v-model 55
4.4 插槽技术 57
4.4.1 插槽的基本使用 57
4.4.2 具名插槽 58
4.4.3 作用域插槽 58
4.5 动态组件 59
本章小结 60
本章练习 60
第5章 Vue组件进阶 61
5.1 组件生命周期 61
5.2 props进阶 67
5.2.1 props类型 67
5.2.2 props只读特性和计算属性 67
5.2.3 props校验 68
5.2.4 依赖注入 70
5.3 异步组件 73
5.4 内置组件 74
5.4.1 <KeepAlive> 74
5.4.2 <Teleport> 76
本章小结 78
本章练习 78
第6章 Vue进阶 79
6.1 全局API 79
6.1.1 createApp() 80
6.1.2 app.mount() 81
6.1.3 app.unmount() 81
6.1.4 Vue插件和app.use() 81
6.1.5 app.mixin() 82
6.1.6 app.config.globalProperties 82
6.1.7 nextTick() 83
6.2 选项式API 84
6.2.1 data() 84
6.2.2 extends 85
6.2.3 name 85
6.2.4 组件实例选项式API 85
6.3 组合式API 87
6.3.1 组合式API简介 87
6.3.2 setup()函数 88
6.3.3 响应式API的使用 89
6.3.4 生命周期钩子函数 97
6.4 过渡和动画 98
6.4.1 CSS3过渡和动画 98
6.4.2 内置组件<Transition> 100
6.4.3 内置组件<TransitionGroup> 104
6.5 虚拟DOM 106
6.6 案例：图书管理页面的改造 107
本章小结 111
本章练习 111
第7章 Vue CLI脚手架 112
7.1 模块化开发 112
7.1.1 CommonJS规范 113
7.1.2 AMD规范 113
7.1.3 ES Module规范 113
7.2 环境准备 115
7.2.1 Node.js环境准备 115
7.2.2 NPM和Yarn包管理工具 116
7.2.3 webpack 118
7.3 Vue CLI的基本使用 120
7.3.1 Vue CLI的安装 121
7.3.2 Vue CLI创建Web项目 121
7.3.3 项目结构 123
7.3.4 运行项目 126
7.4 SPA和SFC开发 128
7.4.1 SPA 128
7.4.2 SFC开发 130
7.5 插件和配置 133
7.5.1 插件 133
7.5.2 项目配置 134
7.6 新型前端构建工具——Vite 136
7.6.1 Vite简介 136
7.6.2 Vite的基本使用 137
本章小结 139
本章练习 139
第8章 Vue Router路由管理 140
8.1 路由介绍和实现 140
8.1.1 基于URL的哈希值实现
路由 141
8.1.2 基于HTML5的history API实现
路由 142
8.2 Vue Router的基本使用 143
8.2.1 Vue Router的安装 144
8.2.2 Vue Router的基本使用 144
8.2.3 路由对象 147
8.2.4 路由模式 148
8.3 动态路由匹配 148
8.3.1 params传参 149
8.3.2 query传参 150
8.3.3 路由的匹配语法 151
8.4 嵌套路由 152
8.5 命名路由和命名视图 154
8.5.1 命名路由 154
8.5.2 命名视图 154
8.6 重定向和别名 155
8.6.1 路由重定向 155
8.6.2 别名 156
8.7 路由组件传参 156
8.8 编程式导航 158
8.9 导航守卫 159
8.9.1 全局守卫 159
8.9.2 路由独享守卫 161
8.9.3 组件内守卫 161
8.10 路由懒加载 162
8.11 动态操作路由 164
8.12 路由过渡效果 165
本章小结 166
本章练习 167
第9章 Vue状态管理 168
9.1 状态管理模式 168
9.2 Vuex的安装和使用 170
9.2.1 Vuex简介和使用场景 170
9.2.2 Vuex的安装 170
9.2.3 Vuex的基本使用 171
9.3 Vuex的核心概念 173
9.3.1 state 174
9.3.2 mutations 176
9.3.3 actions 178
9.3.4 getters 181
9.3.5 modules 182
9.4 组合式API 186
9.5 新型状态管理工具——Pinia 186
本章小结 189
本章练习 189
第10章 服务端渲染技术 190
10.1 页面渲染技术 190
10.1.1 客户端渲染技术——CSR 190
10.1.2 服务端渲染技术——SSR 191
10.1.3 预渲染技术 191
10.1.4 静态网站生成——SSG 192
10.2 Nuxt实现SSR 192
10.2.1 Nuxt简介 192
10.2.2 创建Nuxt项目 193
10.2.3 Nuxt项目结构介绍 194
10.2.4 Nuxt中的视图和路由 195
10.2.5 Nuxt中的状态管理 197
本章小结 197
本章练习 197
第11章 网络数据交互技术 198
11.1 网络数据交互基础 198
11.1.1 网络数据交互 198
11.1.2 HTTP介绍 200
11.2 Ajax实现网络数据交互 203
11.2.1 Ajax介绍 203
11.2.2 Ajax的使用 204
11.3 Axios和vue-axios 205
11.3.1 Axios简介和快速入门 205
11.3.2 vue-axios的使用 206
11.3.3 Axios API 207
11.3.4 Axios默认配置 209
11.3.5 拦截器的使用 209
11.4 同源策略和跨域 211
本章小结 213
本章练习 213
第12章 项目实战：电商后台管理
系统 214
12.1 项目分析 214
12.1.1 项目介绍 214
12.1.2 技术栈的选择 217
12.1.3 前后端分离开发注意事项 218
12.2 开始项目 218
12.2.1 环境准备 218
12.2.2 创建项目 218
12.2.3 配置路由 219
12.2.4 配置状态管理 220
12.2.5 配置Axios网络数据交互 221
12.2.6 编写404页面 223
12.3 Element Plus简介和安装 225
12.4 Mock.js 226
12.4.1 Mock.js简介和使用 226
12.4.2 在项目中导入Mock.js 227
12.5 编写登录页面 233
12.5.1 编写页面结构 233
12.5.2 编写API交互 235
12.5.3 编写页面逻辑 235
12.5.4 配置登录拦截 237
12.6 编写主页 237
12.6.1 编写主页结构 237
12.6.2 编写主页逻辑 240
12.6.3 配置主页及其他路由 242
12.6.4 编写dashboard组件 244
12.7 编写商品管理页面 247
12.7.1 编写商品列表页面结构 247
12.7.2 编写商品相关API的封装 249
12.7.3 编写商品列表页面逻辑 251
12.7.4 编写添加和编辑商品页面 254
本章小结 262
本章练习 262