面向谁、解决什么痛点

前端开发岗位的准入门槛这几年抬得很快，很多转行或零基础的同学卡在框架选型上：Vue 2 和 Vue 3 语法差异大，旧资料容易带偏，新资料又参差不齐。这套课程直接切入 Vue 3 的响应式系统，从语法初探一路讲到组件化理念。它解决的核心痛点是“如何快速建立对 Vue 3 的肌肉记忆”，而不是泛泛而谈概念。如果你打算在简历上写“熟悉 Vue 3 全家桶”，或者在日常工作中需要独立维护/开发中后台管理系统，这门课的逻辑是贴合实战需求的。

基础方面，建议至少掌握原生 JavaScript（DOM 操作、ES6 语法、异步处理）和 HTML/CSS。如果你连变量声明和函数调用都还模糊，直接进 Vue 会非常痛苦。课程没有假设你有任何框架经验，前几节会带着你从零写 Hello World 和计数器，所以零基础上手也没有障碍，但需要预留足够的时间去敲代码，而不是只看视频。

建议的学习路径与配套练习方法

不要试图一口气看完，建议按章节顺序推进，尤其是前两章是地基。第一章的 TodoList 小功能是重点，它会让你直观理解“循环渲染”和“双向绑定”到底意味着什么——这是 Vue 最核心的两个能力。第二章的生命周期和数据响应式部分很容易枯燥，但它是后续做复杂状态管理的基石，务必配合讲解内容在本地把代码跑通，不要跳着看。

资料包的配合方式很关键：视频只是引导，真正的技能长在你手指上。每学完一个语法点，立刻新建一个项目，把课程里的示例代码手打一遍，然后尝试修改参数观察变化。比如学到“计算属性”时，试着把它改成普通方法，对比性能差异；学到“表单双向绑定”时，自己加几个验证逻辑。这种“破坏性实验”比反复观看视频更有效。

学完能独立做什么

完成这套课程并认真跟练后，你应该能够独立完成单页应用（SPA）的基础架构搭建，熟练运用模板语法、事件处理、条件与列表渲染来构建动态界面。更重要的是，你将理解“组件化”思想，知道如何将一个复杂的页面拆分成可复用的局部组件，并进行局部与全局组件的管理。这意味着你具备了接手中小型前端模块开发的能力，也能更顺畅地过渡到后续学习 Vue Router 和 Pinia 等进阶内容。对于找工作来说，这是一个扎实的起点，但请务必在此基础上补充一个完整的项目实战，才能将知识点串联成作品。

课程目录

第1章 Vue 语法初探 试看 6 节 | 57分钟 1-1 课前须知，这里有你需要了解的一切 (04:34).mp4
 1-2 【讨论题】对于不断推出的前端新框架，我们应该如何学习？.mp4
 1-3 初学编写 HelloWorld 和 Counter (14:41).mp4
 1-4 编写字符串反转和内容隐藏小功能 (09:32).mp4
 1-5 编写TodoList 小功能，了解循环和双向绑定 (11:18).mp4
 1-6 组件概念初探，对 TodoList 进行组件代码拆分 (16:47).mp4
 第2章 Vue 基础语法 

18 节 | 161分钟 2-1 Vue 中应用和组件的基础概念 (09:32).mp4
 2-2 理解 Vue 中的生命周期函数（1） (10:49).mp4
 2-3 理解 Vue 中的生命周期函数（2） (12:56).mp4
 2-4 【讨论题】生命周期函数的深度分析.mp4
 2-5 常用模版语法讲解（1） (09:55).mp4
 2-6 常用模版语法讲解（2） (08:46).mp4
 2-7 【讨论题】模版语法的发展历程是怎样的？.mp4
 2-8 数据，方法，计算属性和侦听器（1） (15:47).mp4
 2-9 数据，方法，计算属性和侦听器（2） (06:10).mp4
 2-

10 样式绑定语法 (12:48).mp4
 2-

11 条件渲染 (06:41).mp4
 2-12 列表循环渲染（1） (11:38).mp4
 2-13 列表循环渲染（2） (10:45).mp4
 2-14 事件绑定（1） (13:28).mp4
 2-15 事件绑定（2） (07:15).mp4
 2-16 表单中双向绑定指令的使用（1） (07:54).mp4
 2-17 表单中双向绑定指令的使用（2） (07:22).mp4
 2-18 表单中双向绑定指令的使用（3） (08:51).mp4
 第3章 探索组件的理念 

14 节 | 141分钟 3-1 组件的定义及复用性，局部组件和全局组件（1） (10:19).mp4
 3-2 组件的定义及复用性，局部组件和全局组件（2） (10:28).mp4
 3-3 【讨论题】组件究竟是什么？.mp4
 3-4 组件间传值及传值校验 (15:41).mp4
 3-5 单向数据流的理解 (12:37).mp4
 3-6 Non-Props 属性是什么 (09:34).mp4
 3-7 父子组件间如何通过事件进行通信（1） (12:32).mp4
 3-8 父子组件间如何通过事件进行通信（2） (05:26).mp4
 3-9 组件间双向绑定高级内容（选学） (12:09).mp4
 3-10 使用插槽和具名插槽解决组件内容传递问题（1） (10:20).mp4
 3-11 使用插槽和具名插槽解决组件内容传递问题（2） (07:45).mp4
 3-

12 作用域插槽 (08:17).mp4
 3-

13 动态组件和异步组件 (12:20).mp4
 3-

14 基础语法知识点查缺补漏 (12:59).mp4
 第4章 Vue 中的动画 8 节 | 80分钟 4-1 使用 Vue 实现基础的 CSS 过渡与动画效果 (14:22).mp4
 4-2 使用 transition 标签实现单元素组件的过渡和动画效果（1） (13:39).mp4
 4-3 使用 transition 标签实现单元素组件的过渡和动画效果（2） (12:36).mp4
 4-4 使用 transition 标签实现单元素组件的过渡和动画效果（3） (13:09).mp4
 4-5 组件和元素切换动画的实现 (12:12).mp4
 4-6 【讨论题】前端动画是如何实现的？.mp4
 4-7 列表动画 (07:07).mp4
 4-8 状态动画 (06:50).mp4
 第5章 Vue 中的高级语法 9 节 | 93分钟 5-1 Mixin 混入的基础语法（1） (07:20).mp4
 5-2 Mixin 混入的基础语法（2） (15:13).mp4
 5-3 开发实现 Vue 中的自定义指令（1） (09:47).mp4
 5-4 开发实现 Vue 中的自定义指令（2） (10:17).mp4
 5-5 Teleport 传送门功能 (10:11).mp4
 5-6 更加底层的 render 函数（选学） (15:57).mp4
 5-7 插件的定义和使用 (10:28).mp4
 5-8 【讨论题】为什么插件机制相对于Mixin是更优雅的代码扩展.mp4
 5-9 数据校验插件开发实例 (12:54).mp4
 第6章 Composition API 

13 节 | 119分钟 6-1 Setup 函数的使用 (10:13).mp4
 6-2 ref，reactive 响应式引用的用法和原理（1） (10:49).mp4
 6-3 ref，reactive 响应式引用的用法和原理 （2） (07:17).mp4
 6-4 toRef 以及 context 参数（1） (04:11).mp4
 6-5 toRef 以及 context 参数（2） (10:22).mp4
 6-6 使用 Composition API 开发TodoList（1） (09:57).mp4
 6-7 使用 Composition API 开发TodoList（2） (06:45).mp4
 6-8 computed方法生成计算属性 (10:59).mp4
 6-9 watch 和 watchEffect 的使用和差异性（1） (11:30).mp4
 6-

10 watch 和 watchEffect 的使用和差异性（2） (10:48).mp4
 6-

11 生命周期函数的新写法 (10:54).mp4
 6-

12 Provide,Inject,模版 Ref 的用法 (14:53).mp4
 6-

13 【讨论题】Composition API 的产生背景是什么.mp4
 第7章 Vue 项目开发配套工具讲解 

13 节 | 93分钟 7-1 VueCLI 的使用和单文件组件（1） (09:37).mp4
 7-2 VueCLI 的使用和单文件组件（2） (08:34).mp4
 7-3 使用单文件组件编写 TodoList (11:46).mp4
 7-4 【讨论题】单文件组件这种语法设计，背后实现的原理是什么.mp4
 7-5 Vue-Router 路由的理解和使用（1） (12:28).mp4
 7-6 Vue-Router 路由的理解和使用（2） (04:50).mp4
 7-7 【讨论题】对前端路由，你有怎样的理解？.mp4
 7-8 VueX 的语法详解（1） (09:42).mp4
 7-9 VueX 的语法详解（2） (13:12).mp4
 7-

10 VueX 的语法详解（3） (09:12).mp4
 7-

11 CompositionAPI 中如何使用 VueX (07:06).mp4
 7-12 【讨论题】对前端数据管理框架，你有怎样的理解？.mp4
 7-

13 使用 axios 发送ajax 请求 (05:34).mp4
 第8章 “京东到家”项目首页开发 

13 节 | 155分钟 8-1 【**重要**】关于mock数据访问.mp4
 8-2 工程初始化 (04:09).mp4
 8-3 工程目录代码简介及整理 (10:50).mp4
 8-4 基础样式集成及开发模拟器的使用 (06:33).mp4
 8-5 flex + iconfont 完成首页 docker 样式编写 (22:21).mp4
 8-6 使用Scss 组织地址区域布局 (21:18).mp4
 8-7 利用CSS技巧实现搜索及 banner 区域布局 (15:54).mp4
 8-8 使用 flex布局实现图标列表布局 (11:48).mp4
 8-9 首页布局收尾 (18:50).mp4
 8-

10 首页组件的合理拆分 (16:28).mp4
 8-

11 使用v-for, v-html 指令精简页面代码 (17:52).mp4
 8-

12 CSS 作用域约束以及 Vue 开发者工具的安装使用 (08:39).mp4
 8-13 【讨论题】说说你在开发项目时，用到过的比较好的工具吧.mp4
 第9章 登陆功能开发 

10 节 | 116分钟 9-1 登陆页面布局开发 (21:15).mp4
 9-2 路由守卫实现基础登陆校验功能 (12:28).mp4
 9-3 注册页面开发及路由串联复习 (09:59).mp4
 9-4 使用axios 发送登陆 Mock 请求 (16:38).mp4
 9-5 请求函数的封装 (12:15).mp4
 9-6 【讨论题】请求逻辑可以封装哪些内容？.mp4
 9-7 Toast 弹窗组件的开发 (10:13).mp4
 9-8 通过代码拆分增加逻辑可维护性 (09:03).mp4
 9-9 Setup函数的职责以及注册功能的实现（1） (11:12).mp4
 9-10 Setup函数的职责以及注册功能的实现（2） (12:34).mp4
 第10章 商家展示功能开发（上） 

14 节 | 157分钟 10-1 首页附近店铺数据动态化-详情页准备 (11:41).mp4
 10-2 动态路由，异步路由与组件拆分复用（1） (14:02).mp4
 10-3 动态路由，异步路由与组件拆分复用（2） (07:49).mp4
 10-4 搜索布局及路由跳转（1） (11:40).mp4
 10-5 搜索布局及路由跳转（2） (06:36).mp4
 10-6 路由参数的传递以及商家详情的获取（1） (12:28).mp4
 10-7 路由参数的传递以及商家详情的获取（2） (10:42).mp4
 10-8 商家页面核心样式开发（1） (12:30).mp4
 10-9 商家页面核心样式开发（2） (11:22).mp4
 10-10 样式的优化与代码复用（1） (09:10).mp4
 10-11 样式的优化与代码复用（2） (10:33).mp4
 10-

12 【讨论题】说说 CSS 中的设计模式.mp4
 10-

13 商家详情页分类及内容联动的实现 (21:27).mp4
 10-

14 使用 watchEffect 巧妙的进行代码拆分 (16:07).mp4
 第11章 商家展示功能开发（下） 

17 节 | 203分钟 11-1 购物车的样式开发 (19:21).mp4
 11-2 Vuex中购物车数据结构的设计（1） (16:26).mp4
 11-3 Vuex中购物车数据结构的设计（2） (08:40).mp4
 11-4 使用 computed 完成订单价格计算 (18:14).mp4
 11-5 购物车及列表双向数据同步功能开发（1） (14:31).mp4
 11-6 购物车及列表双向数据同步功能开发（2） (08:50).mp4
 11-7 根据购物车选中状态计算订单金额（1） (12:51).mp4
 11-8 根据购物车选中状态计算订单金额（2） (11:37).mp4
 11-9 全选及清空购物车的功能实现（1） (15:14).mp4
 11-10 全选及清空购物车的功能实现（2） (14:24).mp4
 11-11 商家详情页面代码优化（1） (11:25).mp4
 11-12 商家详情页面代码优化（2） (06:27).mp4
 11-13 购物车数据结构的变更（1） (09:12).mp4
 11-14 购物车数据结构的变更（2） (11:05).mp4
 11-

15 【讨论题】作为前端，你在开发中是如何进行代码调试 Debug.mp4
 11-

16 通过 LocalStorage 实现购物车信息持久存储（1） (13:46).mp4
 11-

17 通过 LocalStorage 实现购物车信息持久存储（2） (10:02).mp4
 第12章 核心购物链路开发 

19 节 | 192分钟 12-1 确认订单页面创建及顶部布局（1） (16:51).mp4
 12-2 确认订单页面创建及顶部布局（2） (11:39).mp4
 12-3 订单商品列表数据获取与布局（1） (17:39).mp4
 12-4 订单商品列表数据获取与布局（2） (11:46).mp4
 12-5 页面布局及展示逻辑开发（1） (09:20).mp4
 12-6 页面布局及展示逻辑开发（2） (14:46).mp4
 12-7 确认订单页面组件拆分及弹框布局制作（1） (12:02).mp4
 12-8 确认订单页面组件拆分及弹框布局制作（2） (14:03).mp4
 12-9 购物流程开发完成（1） (11:04).mp4
 12-10 购物流程开发完成（2） (15:44).mp4
 12-

11 下单流程开发优化 (05:03).mp4
 12-12 订单列表页布局开发（1） (07:34).mp4
 12-13 订单列表页布局开发（2） (12:40).mp4
 12-14 订单列表逻辑开发（1） (16:25).mp4
 12-15 订单列表逻辑开发（2） (14:25).mp4
 12-

16 【讨论题】Composition API使用时会注意哪些方面.mp4
 12-17 【学习任务】结合本地购物车数据，完成多店铺购物车页面开发.mp4
 12-18 【学习任务】结合增删改查逻辑，实现地址功能编辑页面.mp4
 12-19 【学习任务】还原设计稿个人信息页面，并实现登出功能.mp4
 第13章 真机调试及工程发布流程 5 节 | 41分钟 13-1 如何进行真机调试 (06:18).mp4
 13-2 解决真机调试过程中的展示问题 (12:59).mp4
 13-3 实现项目对不同设备的展示适配 (07:18).mp4
 13-4 【讨论题】说说你在进行移动端开发时，遇到问题及解决方案.mp4
 13-5 项目上线和课程总结 (14:09).mp4
 第14章 【2022加餐】商品搜索 & 购物车功能实现 

13 节 | 175分钟 14-1 搜索页面样式布局（1） (11:26).mp4
 14-2 搜索页面样式布局（2） (13:47).mp4
 14-3 搜索历史逻辑的实现（1） (08:06).mp4
 14-4 搜索历史逻辑的实现（2） (12:24).mp4
 14-5 搜索列表页面逻辑开发 (10:03).mp4
 14-6 搜索列表布局及逻辑实现（1） (15:38).mp4
 14-7 搜索列表布局及逻辑实现（2） (13:46).mp4
 14-8 搜索列表布局及逻辑实现（3） (12:44).mp4
 14-9 购物车列表开发（1） (15:50).mp4
 14-10 购物车列表开发（2） (15:13).mp4
 14-11 购物车列表开发（3） (16:58).mp4
 14-

12 购物车优化 & mixin 样式复用（1） (09:49).mp4
 14-

13 购物车优化 & mixin 样式复用（2） (19:03).mp4
 第15章 【2022加餐】购物地址管理功能实现 7 节 | 112分钟 15-1 地址列表页面开发（1） (14:03).mp4
 15-2 地址列表页面开发（2） (13:16).mp4
 15-3 地址新建逻辑开发（1） (17:09).mp4
 15-4 地址新建逻辑开发（2） (19:42).mp4
 15-5 地址编辑逻辑开发 (18:37).mp4
 15-6 实现下单地址选择功能（1） (18:31).mp4
 15-7 实现下单地址选择功能（2） (09:44).mp4