Vue.js 3+TypeScript完全指南

图书标准信息

• 作者 王红元
• 出版社 电子工业出版社
• 出版时间 2023-09
• 版次 1
• ISBN 9787121462764
• 定价 159.00元
• 装帧 其他
• 开本 16开
• 纸张 胶版纸
• 页数 576页
• 字数 945千字

【内容简介】

本书是一本全面、深入介绍Vue.js 3和TypeScript前端开发技术的图书。本书详细介绍了Vue.js 3的新特性与优势，包括模板语法、内置指令、Options API、组件化、过渡动画、Composition API、Vue Router、Vuex 等核心知识点；TypeScript 的基础和进阶知识，包括数据类型、类型别名、联合类型、类型断言、函数类型、类、接口、泛型、类型声明等内容。此外，本书还深入探讨了前端工程化、第三方库的集成与使用、企业级管理后台的实现和自动化部署等内容，以及如何从零开始实现一个Mini-Vue.js 3框架，以便读者深入理解Vue.js 3的核心原理。本书既适合有一定基础的前端开发工程师、Web 开发者阅读，也适合作为初学者学习 Vue.js 3 和TypeScript的入门教材。本书旨在帮助读者全面理解Vue.js 3和TypeScript的使用方法和原理，掌握实用的知识和技能，提高前端开发水平。

【作者简介】

王红元（网名coderwhy），担任广州市弘源科教软件有限公司CEO、澳大利亚The WAIN公司CTO，作为腾讯AI高校训练营的特聘讲师，曾为多所双一流高校授课。在国内外大型项目和软件系统中，负责架构设计和研发工作，曾兼任多家公司的技术顾问，协助解决开发过程中的关键问题。精通多种编程语言，包括C/C++、Python、Java、Objective-C、Swift、JavaScript和TypeScript等，对即时聊天和流媒体技术有深入研究。目前致力于不断提高自身技能，为企业、开源社区及学员做出更多贡献。刘军，曾在深圳市华云中盛科技股份有限公司担任前端负责人，广州市弘源科教软件有限公司联合创始人之一，拥有8年前端开发经验。精通Vue.js、React、TypeScript、webpack、Vite、Node、Docker、CI/CD，以及Java、Android等技术栈，擅长微前端、中后台、组件库、脚手架、公众号、小程序、大屏可视化等领域的工作。

【目录】

1  邂逅和初体验Vue.js1

1.1  认识Vue.js1

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 311

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-once30

2.2.2  v-text31

2.2.3  v-html32

2.2.4  v-pre32

2.2.5  v-cloak33

2.3  v-bind34

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-on42

2.4.1  绑定事件42

2.4.2  事件对象和传递参数44

2.4.3  修饰符45

2.5  条件渲染46

2.5.1  v-if和v-else46

2.5.2  v-if和template结合使用48

2.5.3  v-show49

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和VDOM57

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 API65

3.1  计算属性65

3.1.1  认识计算属性65

3.1.2  计算属性的基本使用66

3.1.3  计算属性和methods的区别69

3.1.4  计算属性的setter和getter71

3.2  监听器watch73

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支持SFC106

5.6  本章小结106

6  前端工程化107

6.1  前端快速发展史107

6.2  认识webpack108

6.3  Vue CLI脚手架109

6.3.1  认识Vue CLI109

6.3.2  安装Node.js109

6.3.3  安装Vue CLI110

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  认识Vite120

6.5  create-vue 脚手架121

6.5.1  认识create-vue121

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 CSS135

7.2.2  CSS Modules138

7.2.3  在CSS中使用v-bind139

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  异步组件和Suspense185

8.3  获取元素或组件的实例187

8.3.1  $refs187

8.3.2  $parent189

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绑定computed195

8.5.3  组件上应用多个v-model197

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 API229

10.3  setup函数的基本使用230

10.3.1  setup函数的参数231

10.3.2  setup函数的返回值233

10.3.3  setup函数的this234

10.4  数据响应式API235

10.4.1  reactive235

10.4.2  ref236

10.5  响应式工具reactive239

10.5.1  readonly239

10.5.2  isProxy241

10.5.3  isReactive241

10.5.4  isReadonly241

10.5.5  toRaw242

10.5.6  shallowReactive242

10.5.7  shallowReadonly242

10.6  响应式工具ref242

10.6.1  toRefs242

10.6.2  toRef244

10.6.3  isRef245

10.6.4  unref245

10.6.5  customRef245

10.6.6  shallowRef247

10.6.7  triggerRef247

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和defineEmits272

10.13.3  defineExpose273

10.13.4  useSlots和useAttrs274

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 Router299

12.1.1  什么是前端路由299

12.1.2  前端路由的原理300

12.1.3  认识Vue Router3