首页 > 科技 > 计算机 > 网络与互联网

Vue.js 3+TypeScript完全指南

作译者：王红元,刘军

出版时间：2023-09 千字数：945 版次：01-01 页数：576

开本：16开装帧： I S B N ：9787121462764

换版：

纸质书定价：￥159.0

库存:有

分享到：

共有图书评论0条【查看评论摘要】

看了又看

{{data.bookName}}

￥{{data.price}}

内容简介

前言

上架建议

作者简介

编辑推荐

音视频专区

1  邂逅和初体验Vue.js	1
1.1  认识Vue.js	1
1.2  Vue.js与其他框架的对比	2
1.2.1  Vue.js、React和Angular三大框架对比	2
1.2.2  三大框架使用数据对比	2
1.3  Vue.js 2的缺点	4
1.4  Vue.js 3带来的新变化	4
1.5  搭建开发环境	6
1.5.1  VS Code的下载和安装	7
1.5.2  VS Code的基本配置	7
1.5.3  VS Code安装插件	9
1.6  Vue.js 3的安装和使用	10
1.6.1  使用CDN引入Vue.js 3	11
1.6.2  下载Vue.js 3源码并在本地引入	14
1.7  计数器案例	16
1.7.1  原生JavaScript实现计数器	16
1.7.2  用Vue.js 3实现计数器	17
1.7.3  MVVM架构模式	19
1.8  createApp的对象参数	20
1.8.1  template属性	20
1.8.2  data属性	22
1.8.3  methods属性	22
1.8.4  其他属性	24
1.9  VS Code生成代码片段	24
1.10  本章小结	27
2  模板语法和内置指令	28
2.1  插值语法	28
2.2  基本指令	30
2.2.1  v-once	30
2.2.2  v-text	31
2.2.3  v-html	32
2.2.4  v-pre	32
2.2.5  v-cloak	33
2.3  v-bind	34
2.3.1  绑定基本属性	34
2.3.2  绑定class属性	35
2.3.3  绑定style属性	38
2.3.4  动态绑定属性	40
2.3.5  绑定一个对象	41
2.4  v-on	42
2.4.1  绑定事件	42
2.4.2  事件对象和传递参数	44
2.4.3  修饰符	45
2.5  条件渲染	46
2.5.1  v-if和v-else	46
2.5.2  v-if和template结合使用	48
2.5.3  v-show	49
2.5.4  v-show和v-if的区别	50
2.6  列表渲染	51
2.6.1  v-for的基本使用	51
2.6.2  v-for支持的类型	52
2.6.3  v-for和template结合使用	54
2.6.4  数组的更新检测	55
2.7  key和diff算法	57
2.7.1  认识VNode和VDOM	57
2.7.2  key的作用和diff算法	59
2.7.3  没有key时的diff算法操作	60
2.7.4  有key时的diff算法操作	61
2.8  本章小结	64
3  Vue.js 3的Options API	65
3.1  计算属性	65
3.1.1  认识计算属性	65
3.1.2  计算属性的基本使用	66
3.1.3  计算属性和methods的区别	69
3.1.4  计算属性的setter和getter	71
3.2  监听器watch	73
3.2.1  watch的基本使用	73
3.2.2  watch配置选项	75
3.2.3  watch字符串、数组和API语法	78
3.2.4  watch深度监听	79
3.3  案例：书籍购物车	80
3.3.1  基本功能介绍	80
3.3.2  搭建基本功能	81
3.3.3  搭建书籍列表	83
3.3.4  搭建“加购物车”功能	84
3.3.5  优化价格和购买数量	86
3.3.6  完整代码展示	86
3.4  本章小结	88
4  v-model和表单输入	89
4.1  v-model的基本使用	89
4.2  v-model的实现原理	90
4.3  v-model绑定其他表单	91
4.4  v-model值的绑定	94
4.5  v-model的修饰符	94
4.5.1  .lazy修饰符	94
4.5.2  .number修饰符	94
4.5.3  .trim修饰符	96
4.6  v-model在组件上的使用	96
4.7  本章小结	96
5  Vue.js 3组件化开发	97
5.1  认识组件化	97
5.2  Vue.js 3的组件化	98
5.3  Vue.js 3注册组件	99
5.3.1  注册全局组件	99
5.3.2  组件的命名规范	102
5.3.3  注册局部组件	103
5.4  Vue.js 3开发模式	105
5.5  Vue.js 3支持SFC	106
5.6  本章小结	106
6  前端工程化	107
6.1  前端快速发展史	107
6.2  认识webpack	108
6.3  Vue CLI脚手架	109
6.3.1  认识Vue CLI	109
6.3.2  安装Node.js	109
6.3.3  安装Vue CLI	110
6.3.4  Vue CLI新建项目	111
6.3.5  Vue.js 3项目的目录结构	114
6.3.6  项目的运行和打包	115
6.3.7  vue.config.js文件解析	117
6.4  认识Vite	120
6.5  create-vue 脚手架	121
6.5.1  认识create-vue	121
6.5.2  create-vue新建项目	121
6.5.3  Vue.js 3项目目录结构	122
6.5.4  项目的运行和打包	123
6.5.5  vite.config.js文件解析	124
6.6  webpack和Vite的区别	126
6.7  本章小结	127
7  Vue.js 3组件化基础详解	128
7.1  组件的嵌套	130
7.1.1  搭建基本页面	130
7.1.2  组件的拆分和嵌套	131
7.1.3  组件CSS的作用域	134
7.1.4  组件之间的通信	135
7.2  组件样式的特性	135
7.2.1  Scoped CSS	135
7.2.2  CSS Modules	138
7.2.3  在CSS中使用v-bind	139
7.3  父子组件的相互通信	140
7.3.1  父组件传递数据给子组件	140
7.3.2  子组件传递数据给父组件	146
7.3.3  案例：选项卡TabControl实战	150
7.4  非父子组件的相互通信	153
7.4.1  Provide/Inject依赖注入	153
7.4.2  全局事件总线	159
7.5  组件中的插槽	162
7.5.1  认识插槽	162
7.5.2  插槽的使用	163
7.6  组件的作用域插槽	169
7.6.1  认识渲染作用域	169
7.6.2  作用域插槽	169
7.6.3  独占默认插槽	171
7.7  本章小结	172
8  Vue.js 3组件化进阶详解	173
8.1  动态组件	173
8.1.1  v-if指令的实现	174
8.1.2  动态组件的实现	175
8.1.3  动态组件的传参	176
8.1.4  keep-alive的使用	177
8.2  异步组件	180
8.2.1  webpack对代码分包	180
8.2.2  在Vue.js 3中实现异步组件	182
8.2.3  异步组件和Suspense	185
8.3  获取元素或组件的实例	187
8.3.1  $refs	187
8.3.2  $parent	189
8.4  组件生命周期函数	190
8.4.1  认识组件的生命周期	190
8.4.2  生命周期函数的演练	191
8.5  在组件中使用v-model指令	193
8.5.1  v-model的基本使用方法	194
8.5.2  v-model绑定computed	195
8.5.3  组件上应用多个v-model	197
8.5.4  v-model绑定对象类型	198
8.6  本章小结	200
9  Vue.js 3实现过渡动画	201
9.1  基本过渡动画	201
9.1.1  认识过渡动画	201
9.1.2  过渡动画特有的类	203
9.1.3  CSS的Animation动画	204
9.1.4  Transition组件的常见属性	205
9.2  第三方库动画库	210
9.2.1  Animate.css动画库	210
9.2.2  GSAP动画库	212
9.3  列表中的过渡动画	216
9.3.1  TransitionGroup的基本使用	217
9.3.2  列表元素的过渡动画	219
9.3.3  案例：列表元素的交替过渡	220
9.4  本章小结	222
10  Vue.js 3 Composition API详解	224
10.1  Options API代码的复用	224
10.1.1  Mixin混入	224
10.1.2  extends继承	228
10.2  认识Composition API	229
10.3  setup函数的基本使用	230
10.3.1  setup函数的参数	231
10.3.2  setup函数的返回值	233
10.3.3  setup函数的this	234
10.4  数据响应式API	235
10.4.1  reactive	235
10.4.2  ref	236
10.5  响应式工具reactive	239
10.5.1  readonly	239
10.5.2  isProxy	241
10.5.3  isReactive	241
10.5.4  isReadonly	241
10.5.5  toRaw	242
10.5.6  shallowReactive	242
10.5.7  shallowReadonly	242
10.6  响应式工具ref	242
10.6.1  toRefs	242
10.6.2  toRef	244
10.6.3  isRef	245
10.6.4  unref	245
10.6.5  customRef	245
10.6.6  shallowRef	247
10.6.7  triggerRef	247
10.7  computed计算属性	247
10.7.1  computed函数的基本使用	247
10.7.2  computed函数的get和set方法	248
10.8  watchEffect监听	249
10.8.1  watchEffect的基本使用	249
10.8.2  停止watchEffect监听	251
10.8.3  watchEffect清除副作用	251
10.8.4  watchEffect的执行时机	252
10.9  watch监听	254
10.9.1  监听单个数据源	254
10.9.2  监听多个数据源	257
10.9.3  监听响应式对象	258
10.10  组件生命周期函数	259
10.11  Provide/Inject依赖注入	260
10.11.1  提供数据	261
10.11.2  注入数据	262
10.11.3  提供和注入响应式数据	263
10.12  案例：Composition API的实战	264
10.12.1  计数器的两种实现方式	264
10.12.2  代码逻辑的封装和复用	266
10.12.3  修改网页的标题	267
10.12.4  监听页面滚动位置	268
10.13  ＜script setup＞语法	270
10.13.1  ＜script setup＞的基本使用	270
10.13.2  defineProps和defineEmits	272
10.13.3  defineExpose	273
10.13.4  useSlots和useAttrs	274
10.14  本章小结	275
11  Vue.js 3组件化高级详解	276
11.1  render函数	276
11.1.1  认识h函数	276
11.1.2  h函数的基本使用	277
11.1.3  render函数实现计数器	278
11.1.4  setup函数实现计数器	279
11.1.5  在render函数中实现插槽	279
11.1.6  组件的JSX语法	281
11.2  自定义指令	283
11.2.1  自定义指令的基本使用	283
11.2.2  自定义指令的生命周期函数	285
11.2.3  自定义指令的参数和修饰符	287
11.2.4  案例：自定义时间格式化指令	288
11.3  teleport内置组件	290
11.3.1  认识teleport组件	290
11.3.2  teleport的基本使用	290
11.3.3  teleport中嵌套组件	291
11.3.4  多个teleport组件的使用	291
11.4  Vue.js 3的插件开发	292
11.4.1  认识Vue.js 3插件	292
11.4.2  对象类型的插件	292
11.4.3  函数类型的插件	293
11.5  nextTick函数的原理	294
11.6  本章小结	297
12  Vue Router路由	299
12.1  认识Vue Router	299
12.1.1  什么是前端路由	299
12.1.2  前端路由的原理	300
12.1.3  认识Vue Router	303
12.2  Vue Router的基本使用	303
12.2.1  路由的基本使用	303
12.2.2  路由配置的细节	306
12.3  Vue Router进阶知识	310
12.3.1  动态路由的匹配	310
12.3.2  嵌套路由的使用	314
12.3.3  编程式导航的使用	317
12.3.4  路由内置组件的插槽	320
12.3.5  动态添加路由	322
12.3.6  路由守卫	324
12.4  本章小结	326
13  Vuex状态管理	327
13.1  认识Vuex状态管理	327
13.1.1  认识状态管理	327
13.1.2  Vuex的基本使用	329
13.1.3  Vue.js devtools插件安装	331
13.2  Vuex的核心概念	333
13.2.1  state	333
13.2.2  getters	339
13.2.3  mutations	343
13.2.4  actions	347
13.2.5  modules	352
13.3  本章小结	361
14  TypeScript的基础详解	362
14.1  认识JavaScript	362
14.1.1  优秀的JavaScript	362
14.1.2  类型引发的问题	363
14.1.3  缺少类型约束	364
14.2  认识TypeScript	364
14.2.1  什么是TypeScript	364
14.2.2  TypeScript的特点	365
14.3  搭建TypeScript的运行环境	365
14.3.1  TypeScript的编译环境	365
14.3.2  TypeScript的运行环境	366
14.4  声明变量的方式	367
14.4.1  声明变量的格式	367
14.4.2  声明变量的关键字	368
14.4.3  变量的类型推导	368
14.5  JavaScript的数据类型	368
14.5.1  number类型	368
14.5.2  boolean类型	369
14.5.3  string类型	369
14.5.4  array类型	370
14.5.5  object类型	370
14.5.6  null和undefined类型	370
14.5.7  symbol类型	371
14.6  TypeScript的数据类型	371
14.6.1  any类型	371
14.6.2  unknown类型	372
14.6.3  void类型	372
14.6.4  never类型	372
14.6.5  tuple类型	373
14.7  TypeScript类型的补充	374
14.7.1  函数的参数和返回值	374
14.7.2  对象类型	375
14.7.3  联合类型	376
14.7.4  类型别名	376
14.7.5  类型断言	377
14.7.6  字面量类型	380
14.7.7  类型缩小	381
14.8  TypeScript函数类型详解	383
14.8.1  函数的类型	383
14.8.2  函数参数的类型	384
14.8.3  this的类型	385
14.8.4  函数重载	386
14.9  本章小结	387
15  TypeScript的进阶详解	388
15.1  TypeScript类的使用	388
15.1.1  类的定义	388
15.1.2  类的继承	389
15.1.3  类的多态	390
15.1.4  成员修饰符	391
15.1.5  只读属性	392
15.1.6  getter/setter	393
15.1.7  静态成员	393
15.1.8  抽象类	393
15.1.9  类作为数据类型使用	394
15.2  TypeScript接口的使用	395
15.2.1  接口的声明	395
15.2.2  索引类型	396
15.2.3  函数类型	397
15.2.4  接口的继承	397
15.2.5  交叉类型	398
15.2.6  接口的实现	398
15.2.7  interface和type的区别	399
15.2.8  字面量赋值	400
15.3  TypeScript枚举类型	401
15.3.1  认识枚举	401
15.3.2  枚举的值	401
15.4  TypeScript泛型的使用	402
15.4.1  认识泛型	402
15.4.2  泛型接口	403
15.4.3  泛型类	403
15.4.4  泛型约束	404
15.5  模块和命名空间	405
15.5.1  模块化开发	405
15.5.2  命名空间	405
15.6  类型的声明	406
15.6.1  类型的查找	406
15.6.2  创建Vue.js 3 + TypeScript项目	407
15.6.3  declare声明变量	408
15.6.4  declare声明函数	409
15.6.5  declare声明类	409
15.6.6  declare声明文件	410
15.6.7  declare声明模块	410
15.6.8  declare声明命名空间	411
15.7  tsconfig.json文件解析	411
15.8  本章小结	413
16  第三方库的集成与使用	414
16.1  Vue CLI新建项目	414
16.2  Vue Router的集成	414
16.3  Vuex的集成	415
16.4  Element Plus的集成	417
16.4.1  Element Plus的介绍和安装	417
16.4.2  Element Plus的全局引入	418
16.4.3  Element Plus的按需引入	419
16.4.4  Element Plus的手动引入	420
16.5  axios的集成和使用	421
16.5.1  axios的介绍和安装	421
16.5.2  axios的GET请求	422
16.5.3  axios的POST请求	424
16.5.4  axios的配置选项	425
16.5.5  axios的并发请求	425
16.5.6  axios的拦截器	426
16.5.7  axios的实例	427
16.5.8  axios + TypeScript的封装	427
16.6  ECharts的集成和使用	432
16.6.1  认识前端可视化	432
16.6.2  ECharts介绍	432
16.6.3  ECharts的基本使用	433
16.6.4  ECharts的渲染引擎	435
16.6.5  ECharts的配置选项	436
16.6.6  BaseEchart组件的封装	437
16.6.7  ECharts绘制饼图	440
16.6.8  ECharts绘制折线图	441
16.7  本章小结	442
17  后台管理系统	443
17.1  Vue.js 3 + TypeScript项目介绍	443
17.2  Vue CLI新建项目	444
17.3  项目开发规范	447
17.3.1  统一IDE编码格式	447
17.3.2  Prettier格式化代码	447
17.3.3  ESLint 检测代码	449
17.3.4  项目编码规范	449
17.4  快速集成第三方库	449
17.4.1  vue.config.js的配置	449
17.4.2  Vue-Router的集成	451
17.4.3  Vuex的集成	452
17.4.4  Element Plus的按需导入	453
17.4.5  axios的集成与封装	454
17.4.6  区分开发和生成环境	457
17.5  tsconfig.json文件的解析	458
17.6  vue文件的类型声明	459
17.7  defineComponent函数的作用	460
17.8  登录模块	460
17.8.1  搭建登录页面	460
17.8.2  登录表单的实现	464
17.8.3  表单规则的校验	466
17.8.4  登录逻辑的实现	468
17.8.5  网络请求的反向代理	473
17.8.6  登录后获取用户信息	474
17.9  首页模块	476
17.9.1  搭建首页的布局	476
17.9.2  封装菜单组件	478
17.9.3  封装头部栏组件	483
17.9.4  新建页面和配置路由	486
17.9.5  动态注册路由	488
17.9.6  封装面包屑组件	491
17.10  用户模块	493
17.10.1  高级检索功能	493
17.10.2  用户列表功能	500
17.11  路由守卫和国际化	511
17.11.1  添加路由守卫	511
17.11.2  Element Plus的国际化	511
17.12  本章小结	512
18  自动化部署	513
18.1  DevOps开发模式	513
18.1.1  传统开发模式	513
18.1.2  DevOps开发模式	513
18.1.3  持续集成和持续交付	514
18.1.4  自动化部署流程	515
18.2  购买云服务器	516
18.2.1  注册阿里云账号	516
18.2.2  购买云服务器	516
18.3  连接远程云服务器	518
18.4  Nginx安装和配置	519
18.5  Nginx手动部署Vue.js 3项目	520
18.6  Jenkins安装和配置	522
18.6.1  安装Jenkins	522
18.6.2  Jenkins设置向导	523
18.6.3  Jenkins插件安装	524
18.7  项目自动化部署	526
18.7.1  新建任务	526
18.7.2  源码管理	526
18.7.3  构建触发器	527
18.7.4  构建环境	528
18.7.5  构建脚本	528
18.7.6  立即构建	530
18.7.7  构建结果	530
18.8  本章小结	531
19  手写Mini-Vue.js 3框架	532
19.1  Vue.js 3源码概述	532
19.1.1  认识虚拟DOM	532
19.1.2  Vue.js 3源码的三大核心模块	534
19.2  Mini-Vue.js 3框架的实现	535
19.2.1  渲染系统的实现	535
19.2.2  响应式系统的实现	542
19.2.3  应用程序入口模块	548
19.3  本章小结	554

写作背景
Vue.js诞生于2014年，是由Evan You开源的轻量级前端框架。相比于React和Angular框架，Vue.js显得更加轻量级、简单，更容易理解和上手。Vue.js的简单易用和高效性使其成为开发者首选的框架之一。目前，Vue.js在GitHub上已经有超过20万个Star，足以说明其受欢迎程度。
2016年10月，Evan You发布Vue.js 2.0版本。2020年9月，Evan You对Vue.js 2进行重构，并发布Vue.js 3版本。Vue.js 3具有非常多的新特性，其中最重要的变化是使用TypeScript进行重构。这使得Vue.js 3更加易于开发和维护，也更加符合现代开发规范。此外，Vue.js 3还引入了Proxy进行数据劫持和Composition API等，这些新特性可以使开发者更加轻松地编写高质量的代码。
随着企业对Vue.js 3 + TypeScript的需求不断增加，越来越多的企业开始使用这种技术开发Web应用程序。例如，Element Plus、Ant Design Vue和Vant等都已经全面支持Vue.js 3 + TypeScript开发。这说明Vue.js 3 + TypeScript已经成为现代Web开发的核心技术之一。
然而，目前市场上还没有一本全面、系统介绍Vue.js 3 + TypeScript的入门教材，这使很多初学者感到困难重重。因此，本书的写作初衷是为读者提供系统级的学习体验，旨在帮助读者全面掌握Vue.js 3和TypeScript的使用和原理，提高前端开发水平。
学习建议
本书是一本全面、深入介绍Vue.js 3和TypeScript前端开发技术的图书，重点介绍Vue.js 3和TypeScript的核心概念、技术原理和实战应用，以帮助读者成为一名优秀的前端开发工程师。
以下是为读者提供的一些学习建议。
（1）先学习基础知识：对于没有前端开发经验的读者，建议先学习一些基础知识，例如HTML、CSS和JavaScript。这些基础知识对学习Vue.js 3和TypeScript来说非常重要。
（2）系统性学习：本书是一本系统性学习指南，建议读者按照章节顺序学习，不要跳跃式阅读。在学习的过程中，建议一边阅读，一边动手实践，以便加深理解；建议多写学习笔记，方便后续复习和总结。
（3）动手练习：学习Vue.js 3和TypeScript最好的方法是动手练习。建议读者在阅读每个章节时，都亲自动手练习，切忌纸上谈兵，这样才能更好地理解概念。
（4）查看示例代码：书中的示例代码是非常有用的，有助于读者更好地理解概念和实现。在阅读每个章节时，请务必查看示例代码。完整的示例代码可以查看本书提供的源代码，下载方式见本书封底的“读者服务”。
（5）项目实战练习：学习Vue.js 3和TypeScript不仅是学习理论知识，而且需要通过实战项目的练习来加深理解。建议读者跟随书中内容，逐步动手实现本书提供的一个后台管理系统的项目，提升自己的编程能力。
（6）参考官方文档：Vue.js 3和TypeScript都有完整的官方文档，可以帮助我们更深入地了解其特性和用法。在阅读每个章节时，如果想要了解更多的信息，可以参考官方文档。
（7）观看配套视频：本书涉及的知识面非常广，如果阅读时对某些知识点有疑惑或难以理解，可以观看专为本书定制的视频教程。视频教程可以在本书读者群中获取，进群方式见封底的“读者服务”。
总之，学习Vue.js 3和TypeScript需要耐心、毅力、勤于实践，希望本书能成为各位读者学习Vue.js 3和TypeScript的有力工具和高效指南！
本书特色
（1）丰富的实战案例：本书涵盖多个实际开发场景，如书籍购物车、计数器、自定义Hooks实战、自定义指令、自定义插件、列表动画、柱状图、折线图、饼图、后台管理系统等。这些案例涉及Vue.js 3的各个方面，可以帮助读者在实践中掌握Vue.js 3的核心概念和技能。
（2）深入剖析原理：本书不仅介绍了Vue.js 3的使用方式和技巧，还深入剖析了其原理和实现方式。例如，methods中this的指向、虚拟DOM、diff算法、nextTick的原理，并实现了一个Mini-Vue.js 3框架，帮助读者深入理解Vue.js 3的内部机制。
（3）各种实用工具：本书介绍了多种实用工具，如VS Code常用的插件、snippet代码片段生成、Vue.js devtools、Vue CLI、create-app、ESLint、Prettier等。这些工具可以帮助读者提高开发效率和代码质量。
（4）适合不同层次读者：本书内容适合从初学者到高级前端开发工程师等各个层次的读者。无论是前端开发工程师、Web开发者、学生，还是从Vue.js 2转向Vue.js 3的读者，都可以从本书中获得实用的知识和技能。
（5）最新的技术栈：本书使用最新的技术栈，如 Vue.js 3、Element Plus、ECharts 5.x、TypeScript、axios、Vue Router、Vuex等，帮助读者了解最新的前端开发技术和趋势。
（6）知识点覆盖全面：本书囊括了Vue.js 3的模板语法、内置指令、Options API、组件化、过渡动画、Composition API、Vue Router、Vuex、TypeScript、前端工程化、常用的第三方库、项目实战、自动化部署，以及从零实现一个Mini-Vue.js 3框架等内容，帮助读者全面掌握Vue.js 3的相关知识和技能。
（7）封装与架构思想：本书介绍了项目中的各种组件封装技巧、axios请求库的封装、Vue Router 的封装、Vuex 的封装，以及后台管理系统架构等。这些内容可以帮助读者学习封装和架构思想，提高代码的可维护性和可扩展性。
（8）自动化部署（CI/CD）：本书介绍了DevOps开发模式、购买服务器、手动部署、自动化部署等内容。这些内容可以帮助读者了解自动化部署的流程和工具，提高项目的交付效率和质量。

查看更多 > 图书评论

暂无评论

发表图书评论

评论标题：
评论内容：
验证码：: 看不清楚
点击刷新
: 您还没有登录，请登录后再评论。
点击“登录”

购买过本书的顾客还买过

{{data.bookName}}

￥{{data.price}}