Vue.js 3开发详解

本书循序渐进地介绍当前流行的前端框架Vue.js 3的基础知识、新特性、各项功能及其在商业开发中的应用。全书共12章，第1~6章介绍Vue.js 3的语言基础，搭建开发环境，Vue.js 3的基本使用、指令和组件等基础知识；第7章介绍Vue.js 3框架的脚手架工程vue-cil的开发；第8章介绍使用Vue.js 3的路由；第9章介绍组合式API；第10章介绍基于Vue.js 3的UI框架Element Plus；第11章介绍网络请求框架Axios；第12章介绍状态管理框架Vuex和一个相对完整的案例。本书试图介绍Vue.js 3全家桶及周边框架和工具的综合应用，旨在使读者通过阅读本书开发自己的应用程序。本书的内容前后呼应，环环相扣，使得读者的学习曲线非常平缓，适合自学。

本书既适合Vue.js 3初学者和前端开发人员使用，也可以作为培训机构与大中专院校的教学用书。

蔡冰，20年开发架构和项目管理经验，前端开发平台架构师，主导千万级并发电商落地，搭建私有云对接物联网，深入研究Kafka/Nginx/Java/C++/C/Redis/MySQL等。已辅导近千位同学通过实习校招，顺利入职各大互联网的研发岗位。参与编写了《Java网络编程实战》的图书。

循序渐进地讲解了Vue框架的新特性及其各项功能的用法，原理与实战并重。

深入讲解Vue.js开发技术，提高Web前端开发效率。

详细介绍TypeScript语言的使用，与Vue 3完美结合，帮助读者轻松学会Vue。

对Vue的API深入剖析，同时结合大量案例进行讲解，让读者快速上手。

讲解商业项目开发的相关框架工具，如脚手架工程 vue-cil 的开发、Vue.js 3的路由、UI框架Element Plus、网络请求框架Axios、状态管理框架Vuex等。

本书面向Web前端从业者、学生，帮助他们从零基础开始学习前端基础知识和Vue.js（简称Vue）3开发的知识和技能。当前市面上讲述Vue.js 3的书籍比较少，而且内容非常简单，实例不多。读者迫切需要短而精，能从基本原理开始学习的实例。本书立足于零基础，从原理讲述，并赋予多而完整且短小精悍的实例，让读者读得明白，并方便动手实践。目前市面上的书籍，其中的例子所用的技术不是过期就是内容不完整。读者在看这类书的过程中，时常需要去询问作者，非常麻烦。相比而言，笔者这本书中的例子完整且讲解详细，非常适合读者自学。

本书的主要特点是对初学者友好，不假设读者对某个专业词汇熟悉，必要时会对专业词汇进行解释，让读者不需要去别处查询该专业词汇的具体含义。实例丰富也是本书的特色，几乎是“三步一岗，五步一哨”，处处有实例，处处有惊喜，看完实例就能实践，读者自然容易获得学习中的成就感。另外，实例丰富，却不复杂，以循序渐进的方式清楚讲解技术要点，尽量把实例设计得短小精悍，精准对焦技术点，尽量省略不相关的内容，保持实例的完整性和独立性，让读者能集中精力主攻当前的技术要点。也就是说，读者从中间随便翻看某个实例，就能跟着实例的步骤逐步成功实践，而不需要翻阅其他实例的代码，方便读者自学。本书的另一大特色是详细介绍了TypeScript语言的使用，它是Vue.js 3.0的开发语言，助力用户轻松学会Vue.js。

本书配套的源码和PPT课件需要使用微信扫描下面的二维码获取，可按扫描后的页面提示填写你的邮箱，然后把下载链接转发到邮箱中下载。

如果发现问题或有疑问，请用电子邮件联系[email protected]，邮件主题为“Vue.js 3开发详解”。

最后，感谢各位读者选择本书，希望本书能对读者的学习有所助益。由于笔者水平所限，虽然对书中所述内容尽量核实，但难免有疏漏之处，敬请各位读者批评指正。

作者

2022年12月20日

第1章 Vue.js概述 1

1.1 HTTP与HTML 1

1.1.1 TCP通信传输流 1

1.1.2 HTTP 2

1.1.3 HTML 4

1.2 Web后端基础技术 4

1.2.1 Spring 4

1.2.2 Spring Security 6

1.2.3 OAuth 2.0 8

1.2.4 JWT 8

1.2.5 JPA 9

1.2.6 MySQL 10

1.3 Web部署技术 10

1.3.1 Docker 11

1.3.2 Docker Swarm Service 11

1.3.3 Nginx + OpenResty 13

1.4 框架 14

1.4.1 为什么要使用框架 14

1.4.2 Web框架基础技术 14

1.4.3 分清框架和库 14

1.4.4 Web开发框架技术 15

1.5 Web前端框架 15

1.5.1 MVC框架模式 16

1.5.2 MVP框架模式 16

1.5.3 MVVM框架模式 17

1.5.4 前端框架的发展现状 18

1.6 前端主流框架 19

1.6.1 Angular.js框架 19

1.6.2 React.js框架 20

1.6.3 Vue.js框架 20

1.6.4 Bootstrap框架 21

1.7 后端主流框架 21

1.7.1 Laravel框架 22

1.7.2 Spring Boot框架 22

1.7.3 Django框架 23

1.8 渲染引擎及网页渲染 23

1.8.1 JavaScript引擎 24

1.8.2 Chrome V8引擎 25

1.9 Vue.js的基本概念 25

1.10 Vue.js的优缺点 26

第2章 Vue.js 3的语言基础 28

2.1 从JavaScript标准说起 28

2.1.1 ECMAScript概述 29

2.1.2 ECMAScript和JavaScript的关系 29

2.1.3 ES 6为何重要 29

2.2 调试一个JavaScript程序 30

2.3 说说JavaScript运行时 34

2.3.1 Node.js概述 34

2.3.2 安装Node.js 35

2.3.3 Node.js的软件包管理器 36

2.3.4 包管理器cnpm 39

2.4 为何要学TypeScript 39

2.5 TypeScript基础 41

2.6 TypeScript的优点 41

2.7 TypeScript的发展历史 44

2.8 搭建TypeScript开发环境 44

2.8.1 安装TypeScript编译器 44

2.8.2 命令行编译TypeScript程序 45

2.8.3 在VSCode下调试TypeScript程序 46

2.8.4 在VSCode下全速运行TypeScript程序 49

2.9 TypeScript基础类型 51

2.9.1 常见类型 51

2.9.2 类型断言 55

2.9.3 类型推断 56

2.10 TypeScript变量声明 56

2.10.1 var声明变量 56

2.10.2 变量作用域 58

2.10.3 var的问题 58

2.10.4 let声明变量 59

2.10.5 const声明变量 61

2.11 TypeScript运算符 62

2.11.1 算术运算符 62

2.11.2 关系运算符 63

2.11.3 逻辑运算符 64

2.11.4 位运算符 65

2.11.5 三元运算符 66

2.11.6 类型运算符 67

2.11.7 负号运算符 67

2.11.8 字符串连接运算符 67

2.12 TypeScript条件语句 67

2.12.1 if语句 67

2.12.2 if…else语句 68

2.12.3 if…else if…else语句 68

2.12.4 switch…case语句 69

2.13 TypeScript循环 70

2.13.1 for循环 70

2.13.2 for…in循环 71

2.13.3 for…of循环 71

2.13.4 while循环 71

2.13.5 do…while循环 72

2.13.6 break语句 72

2.13.7 continue语句 73

2.13.8 无限循环 73

2.14 TypeScript函数 73

2.14.1 函数定义 73

2.14.2 调用函数 74

2.14.3 函数返回值 74

2.14.4 带参数函数 75

2.14.5 可选参数 75

2.14.6 默认参数 76

2.14.7 剩余参数 76

2.14.8 匿名函数 77

2.14.9 匿名函数自调用 77

2.14.10 递归函数 77

2.14.11 箭头函数 77

2.15 数组 78

2.16 联合类型 79

2.17 接口 80

2.18 类 81

2.18.1 创建类的数据成员 82

2.18.2 实例化对象 82

2.18.3 类的继承 83

2.18.4 继承类的方法重写 84

2.18.5 static关键字 84

2.18.6 instanceof运算符 84

2.18.7 访问控制修饰符 85

2.18.8 类和接口 85

2.19 命名空间 85

2.20 模块 87

2.21 TypeScript对象 88

2.22 声明文件 89

2.23 理解TypeScript配置文件 90

第3章 搭建Vue.js开发环境 96

3.1 使用VSCode开发JavaScript程序 96

3.2 Vue.js的引用方式 98

3.3 第一个Vue.js 3程序 98

第4章 Vue.js基础入门 101

4.1 创建应用实例并挂载 101

4.2 数据选择 105

4.3 响应式系统的原理 107

4.3.1 方法选项 110

4.3.2 模板选项 113

4.3.3 生命周期 115

4.4 绑定数据 116

4.4.1 了解代码中的MVVM 116

4.4.2 触发事件更新View 118

4.4.3 双向绑定 120

4.5 计算属性 122

4.5.1 计算属性的简单使用 123

4.5.2 计算属性的get和set 125

4.5.3 计算属性缓存 126

第5章 指令 130

5.1 v-text和v-html指令 130

5.2 v-model指令 132

5.3 v-on指令 136

5.4 v-for指令 144

5.5 v-if指令 149

5.6 v-else指令 150

5.7 v-show指令 151

5.8 v-bind指令 153

5.9 watch指令 160

第6章 组件应用与进阶 161

6.1 组件概述 161

6.2 注册组件 162

6.2.1 全局注册组件 162

6.2.2 组件名称的命名 164

6.2.3 局部注册 165

6.3 组件之间的关系 166

6.4 组件的复用 168

6.5 组件通信 169

6.5.1 父组件向子组件传递数据 169

6.5.2 不要在子组件中修改属性数据 173

6.5.3 属性数据的常见应用 174

6.5.4 不同组件在不同JavaScript文件中的实现 176

6.5.5 属性的默认值 177

6.5.6 props数据类型和验证 178

第7章 Vue.js脚手架开发 181

7.1 Node.js和Vue.js的关系 181

7.2 配置Webpack环境 182

7.2.1 安装并使用Webpack 184

7.2.2 package.json文件 187

7.2.3 开发模式和生产模式 188

7.3 Vue.js单文件组件规范 190

7.3.1 基本概念 190

7.3.2 为什么要使用单文件组件 192

7.3.3 src引入 193

7.3.4 注释 193

7.3.5 vue-loader 193

7.4 打包实现含Vue.js文件的项目 194

7.5 使用脚手架vue-cli 201

7.5.1 安装vue-cli 202

7.5.2 使用vue create命令创建项目 203

7.5.3 解析npm run serve 206

7.5.4 vue init创建项目 208

7.5.5 图形化创建项目 210

7.5.6 使用多个Vue.js文件 213

第8章 路由应用 220

8.1 路由的概念 220

8.2 前端路由与服务端渲染 221

8.3 后端路由 221

8.4 前后端分离 222

8.5 前端路由 222

8.5.1 带hash的前端路由 223

8.5.2 不带hash的前端路由 230

8.6 Vue.js的路由 233

8.6.1 在HTML中使用路由 233

8.6.2 在脚手架工程中使用路由 244

8.7 带参数的动态路由匹配 246

8.7.1 查询参数 248

8.7.2 捕获所有路由 250

8.8 路由的匹配语法 250

8.8.1 在参数中自定义正则 250

8.8.2 可重复的参数 251

8.8.3 可选参数 251

8.9 嵌套路由 252

8.10 命名路由 255

8.11 命名视图 257

8.12 重定向 259

8.13 编程式导航 260

8.13.1 push实现编程式导航 260

8.13.2 replace实现编程式导航 262

8.13.3 横跨历史 262

8.14 不同的历史模式 263

8.15 导航守卫 263

第9章 组合式API 269

9.1 组合式API概述 269

9.2 入口函数setup 271

9.2.1 调用时机与this指向 271

9.2.2 函数参数 272

9.2.3 返回值 274

9.3 响应式函数 276

9.3.1 reactive函数 278

9.3.2 ref函数 280

9.3.3 toRef函数 282

9.3.4 toRefs函数 284

9.4 watch监听 286

9.4.1 监听ref定义的响应式数据 287

9.4.2 监听reactive定义的对象 290

9.5 案例：团购购物车 293

第10章 使用UI框架Element Plus 296

10.1 概述 296

10.2 使用Element Plus的基本步骤 297

10.2.1 CDN方式使用Element Plus 297

10.2.2 离线方式使用Element Plus 298

10.3 按钮的使用 299

10.4 网址链接 302

10.5 单选按钮 303

10.5.1 基础用法 303

10.5.2 单选按钮组 306

10.5.3 按钮样式 307

10.6 复选框 308

10.6.1 基础用法 308

10.6.2 复选框组 310

10.6.3 可选项目数量的限制 311

10.6.4 按钮样式 312

10.7 输入框 313

10.8 InputNumber计数器 314

10.9 选择器 317

10.10 开关 319

10.11 滑块 321

10.12 时间拾取器 324

10.13 时间选择器 326

10.14 日期拾取器 328

10.15 日期时间拾取器 331

10.16 上传 332

10.17 评分 334

10.18 颜色拾取器 335

10.19 穿梭器 336

10.20 表单 337

10.21 表格 339

10.22 标签 341

10.23 进度条 343

10.24 树形 346

10.25 分页 351

10.26 头像 354

10.27 描述列表 356

10.28 消息弹框 358

10.28.1 消息提示框 359

10.28.2 消息确认框 359

10.28.3 提交内容框 361

10.29 对话框 362

10.30 图片 364

10.31 跑马灯 365

10.32 在脚手架工程中使用Element Plus 367

第11章 Axios和服务器开发 371

11.1 概述 371

11.2 Axios的特点 372

11.3 Express搭建服务端 372

11.4 支持跨域问题 375

11.5 在Vue.js程序中访问Express服务器数据 376

11.5.1 安装和导入Axios 376

11.5.2 Axios常用的API函数 376

第12章 Vuex与案例实战 381

12.1 了解“状态管理模式” 381

12.2 使用Vuex的情形 383

12.3 安装或引用Vuex 383

12.4 项目实战 386