TypeScript+Vue.js前端开发从入门到精通

《TypeScript+Vue.js前端开发从入门到精通》由活跃在一线的前端资深架构师总结近十年开发经验精心编撰，面向拥有1-2年经验的程序员，初学者，内容贴近开发实践。

本书首先介绍倍受关注的TypeScript编程语言，然后介绍Vue.js 3.x的核心技术，最后介绍使用两者结合开发项目，各章穿插介绍了很多小项目练手，可以说边学边练，易于上手，符合读者的学习习惯。

《TypeScript+Vue.js前端开发从入门到精通》还介绍了前端开发的相关UI组件、Vue.js全家桶的相关框架，可以帮助读者真正开发商业级的项目，应对工作需求。

《TypeScript+Vue.js前端开发从入门到精通》还提供了详尽解说的代码导读手册，几乎解释了书中示例的每一行代码，这一点对于初学者来说，可以大大降低理解代码的困惑。

总之，这是一本内容实战性强，配书资源丰富，贴近读者，通俗易学的一本前端开发书籍，相信会给读者带来预期受益

《TypeScript+Vue.js前端开发从入门到精通》以一个一线前端架构师的视角，深入浅出地介绍TypeScript与Vue.js整合开发大型前端应用的全部技术细节。全书共17个章节，主要内容包括TypeScript基础、面向对象编程、Vue中的模板、组件属性和方法、用户交互处理、组件基础与进阶、Vue响应性编程、动画技术、脚手架Vue CLI和Vite工具的使用、Element Plus UI组件库以及基于Vue的网络框架vue-axios的应用等。此外，本书还涵盖Vue路由管理和状态管理的内容，并通过实战编程技术论坛系统项目的开发，让读者巩固所学的知识，全面提升自己的前端开发技能。

《TypeScript+Vue.js前端开发从入门到精通》还提供了丰富的配书资源，包括教学视频、源代码、代码导读手册，这些资源可以让读者学习更轻松和高效。

《TypeScript+Vue.js前端开发从入门到精通》面向TypeScript与Vue.js初学者和有一到两年经验的前端开发人员，也适合培训机构和大中专院校作为教学用书。

张益珲，美国亚利桑那州立大学计算机工程技术硕士，架构师，从业近10年，多年大前端开发经验，曾就职于知名上市公司，主导开发过多款商业级应用程序，对移动跨平台开发、前端开发，以及Vue.js 、React、Flutter、小程序与iOS开发都拥有丰富经验。开源中国特邀技术专家，发表相关技术博文400余篇，访问量超过100万次。出版畅销书《循序渐进Vue.js 3.x前端开发实战》《微信小程序与云开发从入门到实践》《Swift 5从零到精通iOS开发训练营》等多部。

目    录

第 1 章  准备知识 1

1.1  前端技术简介 2

1.2  HTML入门 3

1.3  CSS入门 8

1.4  JavaScript入门 14

1.5  渐进式开发框架Vue 19

1.6  本章小结 25

第 2 章  TypeScript基础 26

2.1  重新认识TypeScript 26

2.2  TypeScript中的基本类型 31

2.3  TypeScript中有关类型的高级内容 35

2.4  函数的声明和定义 41

2.5  本章小结 45

第 3 章  TypeScript中的面向对象编程 48

3.1  理解与应用“类” 48

3.2  接口的应用 58

3.3  TypeScript中的类型推断与高级类型 65

3.4  本章小结 71

第 4 章  TypeScript编程进阶 73

4.2  迭代器与装饰器 78

4.3  命名空间与模块 84

4.4  本章小结 87

第 5 章  Vue中的模板 88

5.1  模板基础 88

5.2  条件渲染 93

5.3  循环渲染 97

5.4  范例：待办任务列表 101

5.5  本章小结 104

第 6 章  Vue组件的属性和方法 105

6.1  属性与方法基础 105

6.2  计算属性和侦听器 107

6.3  进行函数限流 111

6.4  表单数据的双向绑定 114

6.5  样式绑定 117

6.6  范例：用户注册页面 120

6.7  本章小结 125

第 7 章  处理用户交互 127

7.1  事件的监听与处理 127

7.2  Vue中的事件类型 132

7.3  实战一：随鼠标移动的小球 135

7.4  实战二：弹球游戏 138

7.5  本章小结 141

第 8 章  组件基础 142

8.1  关于Vue应用与组件 142

8.2  组件中数据与事件的传递 146

8.3  自定义组件的插槽 151

8.4  动态组件的简单应用 154

8.5  实战：开发一款小巧的开关按钮组件 156

8.6  本章小结 159

第 9 章  组件进阶 160

9.1  组件的生命周期与高级配置 160

9.2  组件props属性的高级用法 166

9.3  组件Mixin技术 173

9.4  使用自定义指令 177

9.5  组件的Teleport功能 179

9.6  本章小结 181

第 10 章  Vue响应性编程 183

10.1  响应性编程原理与在Vue中的应用 183

10.2  响应式的计算与监听 189

10.3  组合式API的应用 193

10.4  实战：支持搜索和筛选的用户列表示例 196

10.5  本章小结 202

第 11 章  使用动画 204

11.1  使用CSS 3创建动画 204

11.2  使用JavaScript的方式实现动画效果 208

11.3  Vue过渡动画 209

11.4  实战：优化用户列表页面 217

11.5  本章小结 219

第 12 章  Vue CLI工具的使用 220

12.1  Vue CLI工具入门 220

12.2  Vue CLI项目模板工程 224

12.3  在项目中使用依赖 232

12.4  工程构建 233

12.5  新一代前端构建工具Vite 234

12.6  本章小结 237

第 13 章  Element Plus基于Vue 3的UI组件库 238

13.1  Element Plus入门 238

13.2  表单类组件 251

13.3  开关与滑块组件 263

13.4  选择器组件 266

13.5  提示类组件 270

13.6  数据承载相关组件 274

13.7  实战：教务系统学生表 283

13.8  本章小结 287

第 14 章  基于Vue的网络框架vue-axios的应用 288

14.1  使用vue-axios请求天气数据 288

14.2  vue-axios实用功能介绍 293

14.3  实战：天气预报应用 297

14.4  本章小结 301

第 15 章  Vue路由管理 302

15.1  Vue Router的安装与简单使用 302

15.2  带参数的动态路由 305

15.3  页面导航 310

15.4  关于路由的命名 312

15.5  关于路由传参 316

15.6  路由导航守卫 317

15.7  动态路由 320

15.8  本章小结 322

第 16 章  Vue状态管理 323

16.1  认识Vuex框架 323

16.2  Vuex中的一些核心概念 328

16.3  本章小结 337

第 17 章  实战：编程技术论坛系统开发 338

17.1  项目搭建 338

17.2  登录注册模块 341

17.3  帖子列表模块的开发 358

17.4  帖子发布模块开发 370

17.5  帖子详情模块开发 379

17.6  评论与回复模块开发 388

17.7  搜索模块与退出登录逻辑开发 400

17.8  本章小结 408

Vue.js本身是JavaScript技术栈中的一个框架，但随着前端项目规模的增加，JavaScript越来越难以胜任大型团队合作的复杂项目的开发，TypeScript则弥补了JavaScript这方面的不足，编程的方式也更加现代化，因此Vue.js+TypeScript的组合越来越受前端开发人员的喜爱，已成为前端大型项目开发的一种趋势。

本书以一个资深前端架构师的视角，从零基础入手，通俗易懂地介绍了TypeScript的基础语法和进阶用法，以及Vue.js全家桶和周边技术框架，并提供了丰富的范例和项目，旨在使读者边学边练，快速且扎实地掌握TypeScript的编程方法和Vue.js框架的方方面面，并真正使用它们开发出商业级的应用程序。

内容结构

本书共分为17章。

第1章是本书的入门，简单介绍了前端开发必备的基础知识，包括HTML、CSS和JavaScript这3种前端开发必备的技能，以及JavaScript与TypeScript的关系，然后简要介绍了Vue.js框架，以使读者对本书所讲的知识有一个初步印象。

第2~4章是TypeScript部分。

第2章介绍TypeScript中的一些基础语法，包括开发环境的搭建、基本数据类型、函数等相关知识。第3章介绍TypeScript中的面向对象编程，包括类、接口等核心语法。第4章介绍TypeScript高阶技术，包括TypeScript中的泛型、迭代器与装饰器等。

第6~10章是Vue.js部分。

第5章介绍Vue模板的基本用法，包括模板插值、条件与循环渲染的相关语法。第6章介绍Vue组件中属性和方法的相关概念，并使用面向对象的思路进行前端程序开发，通过一个功能简单的登录注册页面进行练习。

第7章介绍前端应用中用户交互的处理方法，用户交互为应用程序带来灵魂。除介绍基础的网页用户交互的处理外，还讲解如何在Vue.js框架中更加高效地处理用户交互事件。

第8章和第9章介绍Vue.js中组件的应用。组件是Vue.js框架的核心，有了组件，才有了开发大型互联网应用的基础，组件使得项目的结构更加便于管理，工程的可维护与可扩展性大大提高，且组件本身的复用性也使开发者可以大量使用第三方模块，或将自己开发的模块作为组件供各种项目使用，极大地提高了开发效率。

第10章介绍Vue.js框架的响应性原理及Vue.js 3.x版本引入的组合式API的新特性。本章是对读者开发能力的一种拔高，引导读者在实现功能到精致逻辑设计的方向上进步。

第11章介绍通过Vue.js框架开发前端动画效果。前端是和用户面对面的，功能本身只是前端应用的一部分，更重要的是给用户带来良好的使用体验。合理地使用动画是提升用户体验的一大法宝。 

第12章介绍开发大型项目必备的脚手架Vue CLI和Vite的基本用法，管理项目、编译、打包都需要使用脚手架工具。

在使用Vue CLI构建结构化的Vue应用前，我们都是通过在HTML中引入Vue.js框架直接使用的，这种方式通过编译即可直接使用Vue.js提供的功能，这会使读者专注于Vue.js框架本身的语法特性，不分散精力在环境搭建、语言编译等工作流程上。因此，这一部分我们依然使用JavaScript来做Vue.js语法的演示。在使用脚手架工具后，编译相关的工作流程将由脚手架完成，在后续的实践项目中，读者即可通过前面所学习的知识，结合运用TypeScript来开发完整的应用程序。

第13章介绍样式美观且扩展性极强的基于Vue.js的UI框架Element Plus，第14章介绍网络请求框架vue-axios，第15章介绍一款非常好用的Vue应用路由管理框架Vue Router，第16章介绍强大的状态管理框架Vuex，通过Vuex开发者可以更好地管理大型Vue项目各个模块间的交互。

第17章通过一个相对完整的应用项目全面地对本书所涉及的Vue.js技能进行综合应用，帮助读者学以致用，更加深入地理解所学习的内容。

配书资源

源代码：本书提供完整源代码，读者扫描右侧的二维码即可下载。

代码导读手册：该手册对本书所有代码进行了详尽说明，对于初学者来说，通过该手册可以大大降低理解代码的难度，达到快速上手的目的。代码导读手册参见源码包中的PDF文件。读者扫描右侧的二维码即可下载。

教学视频：作者为本书录制的教学视频，读者可以扫描书中各章节的二维码直接观看。

读者对象

?正在学习前端开发的初学者

?拥有1～2年工作经验，想进一步提升的前端开发人员

?培训机构的学员和大中专院校的学生

最后，感谢支持我的家人和朋友，感谢清华大学出版社王金柱编辑的勤劳付出，使本书顺利与读者见面。感谢读者的耐心，希望本书可以带给你预期的收获。限于本人水平，书中疏漏之处在所难免，敬请广大读者斧正。

张益珲

2023年10月14日 于上海