注册 登录

图书分类

高可靠系统构建指南：服务稳定性建设与技术债务治理

高可靠系统构建指南：服务稳定性建设与技术债务治理

本书以服务稳定性建设与技术债务治理为主线，深度剖析 Java 服务全生命周期中的关键问题与解决方案，通过“问题诊断-治理框架-实践落地”的三层递进结构，构建了覆...

 

特色专题

帮助

Vue.js 3+TypeScript完全指南
  • 推荐0
  • 收藏0
  • 浏览183

Vue.js 3+TypeScript完全指南

王红元 (作者)　

  • 书　　号：9787121462764
  • 出版日期：2023-10-01
  • 页　　数：
  • 开　　本：
  • 出版状态：上市销售
本书从Vue3的基础讲起，全面详细讲解Vue3的核心知识，包括基础语法、组件化开发、Vue3核心语法（2. Composition API、Provide、Inject、Teleport、自定义Hook等）、过渡动画，以及Vue3全家桶中的Vue-Router4.x、Vuex4.0的版本等。内容不仅限于语法层面，会穿插讲解Vue3各种原理和阅读部分核心源码，让读者从更深层次理解Vue3。接着本书会深入讲解TypeScript相关的语法，包括搭建TypeScript环境、TypeScript基础和高级语法的应用，并直接使用TypeScript编写项目，让读者熟练掌握TypeScript在项目中的运用，真正掌握编程语言中的类型思维。本书最终将完成一个后台管理系统的项目。项目采用的技术栈包括Vue3、Vue-Router、Vuex、Hooks、Element-Plus、ECharts、TypeScript、Axios、Less等。项目中还添加了自动化部署相关的知识，包括购买云服务器、云服务器配置、搭建自动化部署环境等，真实模拟实际项目中的部署过程。本书会专门讲解真实项目开发相关的规范，包括登录逻辑、用户管理、部门管理、菜单管理、权限管理、数据统计、问题反馈等功能。开发过程中会涉及各种Vue3+TS的组件化封装思想，封装更多可高度复用的高级组件，并穿插讲解一些项目架构设计的内容。
特色一：聚焦前端使用率最高的框架——Vue。React和Vue可以说是最为流行的前端框架，长久以来，国内使用率最高的是Vue，几乎所有的前端岗位都要求具备Vue操作经验。甚至可以说，只要学好了Vue，你一定可以找到一份前端工作。虽然这个说法有一些绝对，但这也体现了Vue对于前端开发者的重要性。对于前端工程师来说，必须要熟练掌握Vue框架。特色二：与作者视频课程配套，低门槛，覆盖群体广。全面讲解Vue3知识，内容结构完整，先基础知识，后项目实战，并对原理性知识进行系统分析，帮助开发者不仅知其然，而且知其所以然。作者的相关视频课程深受好评，Vue系列视频在B站的播放量已超过500万。本书与视频课程的结构保持一致，且内容上会略作补充，二者十分适合配套进行学习。特色三：作者写作及培训经验丰富，具有稳定的读者群。流量方面，B站账号粉丝7.8万；个人公众号粉丝数3万+，平均阅读量3000左右；微信群总人数5万+，主要群体为培训的学生；微博粉丝数1.2万。
王红元（网名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等技术栈，擅长微前端、中后台、组件库、脚手架、公众号、小程序、大屏可视化等领域的工作。
写作背景
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开发模式、购买服务器、手动部署、自动化部署等内容。这些内容可以帮助读者了解自动化部署的流程和工具，提高项目的交付效率和质量。

目录

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

读者评论