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初学者和前端开发人员使用，也可以作为培训机构与大中专院校的教学用书。

　　蔡冰，15年的编程教学、职业规划经历。已辅导近千位同学通过实习校招，顺利入职各大互联网公司的研发岗位，平时积累了大量当前流行的开发知识和技能。参与编写了《Java网络编程实战》的图书。

第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