第1章 Vue的开发环境 1
1.1 VS Code编辑器 1
1.1.1 下载及安装VS Code 1
1.1.2 VS Code的界面介绍 2
1.1.3 插件的获取及安装 3
1.1.4 前端开发常用插件 4
1.1.5 VS Code常用快捷操作 5
1.2 Vue的调试工具 7
1.3 Node.js环境 10
第2章 Vue项目开发ES6基础 12
2.1 变量、常量声明 12
2.2 变量的解构赋值 16
2.3 rest参数 18
2.4 扩展运算符 19
2.5 箭头函数 19
2.6 模板字符串 21
2.7 异步编程 21
2.7.1 Promise 22
2.7.2 async/await 23
2.8 模块 25
2.8.1 ES6模块化规范 25
2.8.2 在HTML文件中引入JS模块 25
2.8.3 模块的导出与导入 25
2.8.4 动态导入 27
2.8.5 直接导入并执行模块代码 28
第3章 初识Vue 29
3.1 Vue框架的优点 29
3.2 Vue高效开发示例分析 30
3.3 Vue实现数据驱动 32
3.4 引入Vue3方式 33
3.5 创建无构建步骤的Vue应用程序 33
3.5.1 创建Vue应用实例 33
3.5.2 挂载应用实例 34
3.5.3 使用Vue3开发的步骤 34
3.6 API风格 37
3.6.1 组合式API的两个核心概念 37
3.6.2 创建组合式API应用实例 38
3.7 Vue3提供API的方式 39
3.7.1 全局构建版本提供API的方式 39
3.7.2 使用ES模块构建版本提供API的
方式 40
3.8 Vue Devtools工具的使用 42
3.9 Vue组件基础 43
第4章 Vue指令 47
4.1 指令概述 47
4.2 数据绑定 48
4.2.1 文本节点数据绑定 48
4.2.2 属性节点数据绑定 52
4.2.3 样式绑定 53
4.2.4 条件渲染 58
4.2.5 列表渲染 63
4.2.6 v-pre指令和v-once指令 67
4.3 数据双向绑定 68
4.3.1 input和textarea元素 69
4.3.2 radio和checkbox元素 70
4.3.3 select元素 72
4.3.4 双向绑定修饰符 73
4.4 事件绑定 75
4.4.1 监听事件 75
4.4.2 事件修饰符 77
第5章 Vue常用组合式API 85
5.1 setup函数 85
5.2 计算属性 87
5.3 watch侦听器 88
5.4 watchEffect侦听器 91
5.5 reactive函数 92
5.6 Vue组件实例生命周期 93
5.6.1 生命周期概述 93
5.6.2 生命周期状态与钩子函数示例 95
5.7 组合式函数 100
5.8 综合应用案例 102
第6章 工程化的Vue项目 105
6.1 前端工程化概述 105
6.2 Node.js基础 106
6.2.1 Node.js的模块化开发规范 106
6.2.2 Node.js的包 107
6.2.3 包（模块）加载规则 111
6.3 创建Vue工程化项目 112
6.3.1 创建项目 112
6.3.2 安装并启动项目 113
6.4 项目的配置目录及配置文件 115
6.4.1 package.json文件与node_modules
目录 115
6.4.2 src目录与index.html文件 117
6.4.3 public、vite.config.js等目录和
文件 119
6.5 工程化项目开发简单示例 120
第7章 Vue组件通信 124
7.1 组件注册 124
7.1.1 全局注册及调用 124
7.1.2 局部注册及调用 126
7.2 组件的层级关系 127
7.3 父子组件之间的通信 130
7.3.1 Props传值（父组件传递数据给子
组件） 130
7.3.2 插槽slot（父组件传模板内容给子
组件） 133
7.3.3 组件事件（子传父） 139
7.3.4 组件v-model 141
7.3.5 透传Attributes 143
7.3.6 子组件暴露属性和方法给父组件 147
7.4 跨级组件通信 149
7.4.1 依赖注入 149
7.4.2 全局属性的对象 153
7.4.3 状态管理 155
7.5 兄弟组件通信 157
第8章 Vue的内置组件与第三方组件库 158
8.1 内置组件 158
8.1.1 Transition组件 158
8.1.2 TransitionGroup组件 169
8.1.3 KeepAlive组件 172
8.1.4 Teleport组件 173
8.1.5 Suspense组件 174
8.2 第三方组件库 178
8.2.1 常用组件库介绍 178
8.2.2 组件库的使用 179
第9章 Vue Router 182
9.1 Vue Router的基本用法 182
9.1.1 Vue Router提供的组件 182
9.1.2 在项目中使用Vue Router的
步骤 183
9.1.3 Vue Router使用示例 183
9.2 在创建项目时引入Vue Router 187
9.3 设置路由被激活的链接样式 188
9.4 命名路由 189
9.5 路由别名 190
9.6 路由重定向 191
9.7 命名视图 191
9.8 嵌套路由 193
9.9 路由传递参数 195
9.9.1 路由对象 195
9.9.2 query方式传递参数 196
9.9.3 params方式传递参数 197
9.10 编程式的导航 198
9.10.1 路由器对象 198
9.10.2 路由器对象的导航方法 200
9.10.3 编程式的导航实例 200
第10章 Pinia状态管理 203
10.1 Pinia的安装和注册 203
10.2 Store的基本使用方法 204
10.2.1 定义Store 204
10.2.2 使用Store 205
10.3 创建项目时选择引入Pinia 208
10.4 电商案例 209
10.4.1 案例分析 209
10.4.2 实现步骤 210
第11章 前后端数据交互技术 214
11.1 前后端交互相关基础概念 214
11.2 API接口文档 216
11.3 JSON Server服务器 219
11.4 接口调用技术 221
11.4.1 Axios基本介绍 221
11.4.2 Axios的基本用法 222
11.4.3 Axios的常用请求方法 223
11.4.4 Axios的响应结果 229
11.4.5 配置Axios全局默认值 230
11.4.6 Axios的配置对象config 230
11.4.7 Axios拦截器 231
11.4.8 在工程化项目中使用Axios 232
11.5 工程化项目的前后端数据交互案例 233
11.5.1 案例介绍 233
11.5.2 案例实现步骤 233
第12章 基于Vue+Vant移动端的项目开发
 实践 237
12.1 项目介绍 237
12.2 技术方案 240
12.3 创建项目并搭建Vant移动端的开发
环境 243
12.4 安装配置Axios 244
12.5 项目的目录及文件结构 245
12.6 配置路由 246
12.7 各模块功能的实现 248
12.7.1 老黄历查询功能的实现 248
12.7.2 二十四节气查询功能的实现 251
12.7.3 中药查询功能的实现 256
12.7.4 今日国内油价查询功能的实现 257
12.7.5 导航栏的实现 260
12.7.6 配置App.vue 260
12.8 在浏览器中测试项目 261
12.9 项目打包 262
参考文献 263