这个系列还在更新中，涉及的内容还是比较多的。我会以每周3-5集的速度更新，保证下伙伴们可以学到最流行和事用的Vue课程。目录分为三大部分，分别是:有经验者的学习路线、零基础的学习路线和实战项目。

如果你想全面学习Vue3的知识，可以按照这篇文章顺序进行学习。这篇文章分为三个大的模块。

• 已经有Vue2.x经验的学习路线
• 零基础开始学习Vue3.x的学习路线
• 实战项目

相关视频还在不断的更新中，大概为一周3-5集。快来一起学习吧。

这部分教程，针对从来没有学习过Vue的小伙伴，可以零基础学习。

• 1. [初识]课程介绍和HelloWorld :https://jspang.com/detailed?id=68#toc21
• 2. [初识]Vue3编写的计数器:https://jspang.com/detailed?id=68#toc26
• 3. [初识]洗脚城管理系统-来宾欢迎语展示 :https://jspang.com/detailed?id=68#toc210
• 4. [初识]Vue3列表和循环-佳丽列表的制作:https://jspang.com/detailed?id=68#toc214
• 5. [初识]Vue3组件化开发-每个佳丽都是组件 :https://jspang.com/detailed?id=68#toc218
• 6. [基础]Vue的createApp()和mount()方法讲解:https://jspang.com/detailed?id=68#toc221
• 7. [基础]Vue的生命周期函数-1 :https://jspang.com/detailed?id=68#toc227
• 8. [基础]Vue的生命周期函数-2:https://jspang.com/detailed?id=68#toc231
• 9. [基础]插值表达式和v-bind数据绑定:https://jspang.com/detailed?id=68#toc234
• 10. [基础]模板动态参数和阻止默认事件 :https://jspang.com/detailed?id=68#toc240
• 11. [基础]模板中使用条件判断:https://jspang.com/detailed?id=68#toc244
• 12. [基础]计算属性-computed:https://jspang.com/detailed?id=68#toc247
• 13. [基础]Vue中的侦听器/监听器-watch:https://jspang.com/detailed?id=68#toc252
• 14. [基础]模板样式绑定详细讲解:https://jspang.com/detailed?id=68#toc257
• 15. [基础]模板样式绑定-2进阶 :https://jspang.com/detailed?id=68#toc261
• 16. [基础]v-show和v-if的差别:https://jspang.com/detailed?id=68#toc265
• 17. [基础]v-for循环详细讲解-1 :https://jspang.com/detailed?id=68#toc268
• 18. [基础]v-for循环详细讲解-2 :https://jspang.com/detailed?id=68#toc272
• 19. [基础]绑定事件详讲-方法和参数 :https://jspang.com/detailed?id=68#toc276
• 20. [基础]绑定事件详讲-事件修饰符:https://jspang.com/detailed?id=68#toc282
• 21. [基础]绑定事件详讲-按键、鼠标饰修符 :https://jspang.com/detailed?id=68#toc285
• 22. [基础]表单数据的双绑定-1 :https://jspang.com/detailed?id=68#toc289
• 23. [基础]表单数据的双绑定-2修饰符 :https://jspang.com/detailed?id=68#toc295

• 1. [组件]全局组件定义和复用性讲解 :https://jspang.com/detailed?id=69#toc21
• 2. [组件]Vue3中的局部组件 :https://jspang.com/detailed?id=69#toc27
• 3. [组件]父子组件的静态和动态传值 :https://jspang.com/detailed?id=69#toc212
• 4. [组件]组件传值时的校验操作 :https://jspang.com/detailed?id=69#toc217
• 5. [组件]组件中重要机制-单项数据流 :https://jspang.com/detailed?id=69#toc222
• 6. [组件]Non-props使用技巧 :https://jspang.com/detailed?id=69#toc226
• 7. [组件]组件中通过事件进行通信 :https://jspang.com/detailed?id=69#toc232
• 8. [组件]组件中插槽的使用Slot -1 :https://jspang.com/detailed?id=69#toc237
• 9. [组件]组件中插槽的使用Slot-2 :https://jspang.com/detailed?id=69#toc242
• 10. [组件]具名插槽简写和作用域插槽 :https://jspang.com/detailed?id=69#toc246
• 11. [组件]动态组件和状态保存 :https://jspang.com/detailed?id=69#toc251
• 12.[组件]异步组件和Promise讲解 :https://jspang.com/detailed?id=69#toc257
• 13.[组件]provide和inject多级组件传值 :https://jspang.com/detailed?id=69#toc260

• 01.[动画]CSS样式中的动画效果 :https://jspang.com/detailed?id=71#toc21
• 02.[动画]CSS制作过渡效果用Vue进行控制 :https://jspang.com/detailed?id=71#toc26

陆续更新中....

Vue3很好的支持了TypeScript,所以建议你先学习一下TypeScript的知识，然后再继续学习Vue3的内容。

• 01.TypeScript 简介和课程介绍:https://www.jspang.com/detailed?id=63#toc21
• 02.TypeScript 的静态类型:https://www.jspang.com/detailed?id=63#toc25
• 03.TypeScript 基础静态类型和对象类型:https://www.jspang.com/detailed?id=63#toc28
• 04.TypeScript 中的类型注释和类型推断:https://www.jspang.com/detailed?id=63#toc211
• 05.TypeScript 函数参数和返回类型定义:https://www.jspang.com/detailed?id=63#toc215
• 06.TypeScript 中数组类型的定义:https://www.jspang.com/detailed?id=63#toc220
• 07.TypeScript 中元组的使用和类型约束:https://www.jspang.com/detailed?id=63#toc223
• 08.TypeScript 中的 interface 接口:https://www.jspang.com/detailed?id=63#toc226
• 09.TypeScript 中的 interface 接口 2:https://www.jspang.com/detailed?id=63#toc230
• 10.TypeScript 中类的概念和使用:https://www.jspang.com/detailed?id=63#toc235
• 11.TypeScript 中类的访问类型:https://www.jspang.com/detailed?id=63#toc240
• 12.TypeScript 类的构造函数:https://www.jspang.com/detailed?id=63#toc245
• 13.TypeScript 类的 Getter、Setter 和 static 使用:https://www.jspang.com/detailed?id=63#toc248
• 14.类的只读属性和抽象类:https://www.jspang.com/detailed?id=63#toc251
• 15.配置文件-初识 tsconfig.json:https://www.jspang.com/detailed?id=63#toc254
• 16.配置文件-初识 compilerOptions 配置项:https://www.jspang.com/detailed?id=63#toc258
• 17.配置文件- compilerOptions 配置内容详解:https://www.jspang.com/detailed?id=63#toc264
• 18.联合类型和类型保护:https://www.jspang.com/detailed?id=63#toc269
• 19.Enum枚举类型讲解:https://www.jspang.com/detailed?id=63#toc275
• 20.TypeScript 函数泛型-难点:https://www.jspang.com/detailed?id=63#toc279
• 21.TypeScript 类中泛型-难点:https://www.jspang.com/detailed?id=63#toc285
• 22.初识命名空间-Namespace:https://www.jspang.com/detailed?id=63#toc290
• 23.深入命名空间-Namespace:https://www.jspang.com/detailed?id=63#toc294
• 24.TypeScript 如何使用 import 语法:https://www.jspang.com/detailed?id=63#toc298
• 25.用 Parcel 打包 TypeScript 代码:https://www.jspang.com/detailed?id=63#toc2103
• 26.在 TypeScript 中使用 JQuery:https://www.jspang.com/detailed?id=63#toc2106

• 01.课程介绍和 Vue3 简介:https://jspang.com/detailed?id=64#toc21
• 02.vue-cli 搭建 Vue3 开发环境:https://jspang.com/detailed?id=64#toc25
• 03.用 vue-cli 图形界面搭建 Vue3 环境:https://jspang.com/detailed?id=64#toc28
• 04.项目初始结构和重要文件讲解:https://jspang.com/detailed?id=64#toc210
• 05.setup()和 ref()函数制作大宝剑点餐:https://jspang.com/detailed?id=64#toc214
• 06.用 reactive()函数优化程序:https://jspang.com/detailed?id=64#toc217
• 07.Vue3.x 的生命周期和钩子函数:https://jspang.com/detailed?id=64#toc222
• 08.onRenderTracked()和 onRenderTriggered()钩子函数的使用:https://jspang.com/detailed?id=64#toc226
• 09.Vue3中Watch的使用和注意事项:https://jspang.com/detailed?id=64#toc230
• 10.Vue3中模块化介绍-作一个时间更新模块:https://jspang.com/detailed?id=64#toc234
• 11.Vue3中模块化深入-随机出现小姐姐:https://jspang.com/detailed?id=64#toc239
• 12.Teleport瞬间移动函数的使用:https://jspang.com/detailed?id=64#toc244
• 13.Suspense-初识异步请求组件:https://jspang.com/detailed?id=64#toc248
• 14.Suspense-深入学习 真实请求:https://jspang.com/detailed?id=64#toc251

• 01.Vite简介和搭建Vue3开发环境:https://jspang.com/detailed?id=66#toc21
• 02.用Vite生成项目的目录结构:https://jspang.com/detailed?id=66#toc26
• 03.Vite搭建React开发环境:https://jspang.com/detailed?id=66#toc27
• 04.Vite对TypeScript、CSS和JSON的支持:https://jspang.com/detailed?id=66#toc29
• 05.Vite中SASS使用和JSX支持:https://jspang.com/detailed?id=66#toc213
• 06.Vite配置文件设置别名:https://jspang.com/detailed?id=66#toc218