在 front-end 开发领域，Vue.js 凭借其渐进式框架的特性，已成为构建现代用户界面的首选方案之一。然而，许多初学者往往止步于基础语法的记忆，难以将零散的知识点串联成完整的工程能力。本课程《Vue 全家桶技术精讲+Vue 商城项目实战》正是为了解决这一痛点而生，它不仅是一次技术的系统梳理，更是一场从理论到落地、从代码到部署的完整职业训练。
课程的第一部分深耕 Vue 基础，旨在为你打下坚实的地基。我们从 Vue 的开篇介绍起步，迅速进入插值表达式与核心指令的学习。在这里，你将不再局限于死记硬背，而是通过 `v-if` 与 `v-show` 的性能对比、`v-bind` 与 `v-on` 的底层逻辑，深刻理解 Vue “数据驱动视图”的核心思想。特别是针对 `v-for` 列表渲染中的 key 值原理，以及 `v-model` 双向绑定的实现机制，课程均提供了详尽的代码演示。此外，计算属性 `computed` 与侦听器 `watch` 的区别、过滤器的使用场景，这些面试中的高频考点也在讲解中逐一攻克。为了检验学习成果，我们还通过“音乐播放器”案例，将零散的指令知识点整合进实际业务场景中，让你在实战中体会 Vue 的优雅与强大。
进入第二部分，课程重心转向组件化开发，这是 Vue 进阶的必经之路。组件不仅是代码复用的单元，更是大型应用架构的基石。我们将深入探讨局部组件与全局组件的创建差异，重点剖析组件间复杂的通信机制——包括父子组件的 Props/Events 传递、平行组件间的通信策略，以及其他高阶通信方式。通过理解组件的封装艺术，你将学会如何构建高内聚、低耦合的前端模块，这是从“写页面”到“做工程”的关键跨越。
除了核心的 Vue 语法，本课程还涵盖了全家桶技术栈及工程化能力。你将接触到 Vue Router 的路由配置、Vuex/Pinia 的状态管理，以及如何利用 Axios 进行前后端数据交互。更重要的是，课程并未止步于本地开发环境，而是延伸到了“如何上线部署”。从静态资源的优化到服务器的配置，再到 CI/CD 流水线的初步概念，这些内容填补了许多培训班教学的空白，让你具备独立交付完整项目的能力。最后，通过 MVVM 原理解析，你将透过现象看本质，理解视图、模型与 ViewModel 之间的绑定机制，从而在面对复杂 Bug 时能做出更准确的判断。
这门课程适合希望系统掌握 Vue 体系、渴望独立完成电商类中型项目，并具备上线部署能力的开发者。无论你是从零开始的新手，还是试图突破瓶颈的进阶者，这套体系化的训练都将助你构建起完整的知识图谱，自信地迎接前端开发的各种挑战。
课程目录
1-1 [Vue基础] Vue开篇介绍 (15:49).mp4 1-2 [Vue基础] Vue的起步和插值表达式 (12:08).mp4 1-3 [Vue基础] Vue指令之v-text和v-html (06:26).mp4 1-4 [Vue基础] vue指令之v-if和v-show (09:07).mp4 1-5 [Vue基础] Vue指令之v-bind绑定 (09:34).mp4 1-6 [Vue基础] Vue指令之v-on事件处理 (07:31).mp4 1-7 [Vue基础] Vue指令之事件修饰符 (08:06).mp4 1-8 [Vue基础] Vue指令之v-for列表渲染 (08:33).mp4 1-9 [Vue基础] Vue指令之v-model双向数据绑定 (04:36).mp4 1- 10 [Vue基础] Vue中表单输入绑定应用 (12:29).mp4 1- 11 [Vue基础] 侦听器watch的用法 (08:29).mp4 1- 12 [Vue基础] 计算属性之computed (08:14).mp4 1- 13 [Vue基础] 计算属性之computed的setter方法 (05:51).mp4 1- 14 [Vue基础] Vue的过滤器filters用法 (06:09).mp4 1- 15 [Vue基础] 案例：音乐播放器 (17:42).mp4 1- 16 [Vue基础] 案例：音乐播放器之computed实现 (07:01).mp4 1- 17 [Vue基础] 课程总结 (01:29).mp4 2-1 [Vue组件化开发] 组件的概念 (14:16).mp4 2-2 [Vue组件化开发] 局部组件的创建和使用 (08:14).mp4 2-3 [Vue组件化开发] 全局组件的创建和使用 (10:04).mp4 2-4 [Vue组件化开发] 组件通信(重要) (16:35).mp4 2-5 [Vue组件化开发] 平行组件通信 (14:25).mp4 2-6 [Vue组件化开发] 组件通信的其它方式 (11:50).mp4 2-7 [Vue组件化开发] 匿名插槽 (06:08).mp4 2-8 [Vue组件化开发] 具名插槽 (05:31).mp4 2-9 [Vue组件化开发] 作用域插槽 (10:02).mp4 2- 10 [Vue组件化开发] 生命周期（重要） (27:41).mp4 2- 11 [Vue组件化开发] 异步组件加载 (04:40).mp4 2- 12 [Vue组件化开发] refs的使用 (05:03).mp4 2- 13 [Vue组件化开发] nextTick的使用 (07:34).mp4 2- 14 [Vue组件化开发] nextTick的应用 (08:30).mp4 2- 15 [Vue组件化开发] 对象变更检测注意事项 (07:06).mp4 2- 16 [Vue组件化开发] mixin混入偷懒技术 (05:17).mp4 2- 17 [Vue组件化开发] mixin混入技术应用 (15:04).mp4 3-1 [Vue-cli3开发单文件组件] 单文件组件介绍 (11:31).mp4 3-2 [Vue-cli3开发单文件组件] 如何安装vue-cli3脚手架 (04:40).mp4 3-3 [Vue-cli3开发单文件组件] 快速原型开发 (06:50).mp4 3-4 [Vue-cli3开发单文件组件] 使用脚手架生成前端项目 (15:44).mp4 3-5 [Vue-cli3开发单文件组件] 购物车项目构建 (11:51).mp4 3-6 [Vue-cli3开发单文件组件] 购物车项目CRUD操作 (11:27).mp4 3-7 [Vue-cli3开发单文件组件] mock.js模拟数据接口 (11:24).mp4 3-8 [Vue-cli3开发单文件组件] 如何做数据持久化 (13:25).mp4 3-9 [Vue-cli3开发单文件组件] element-ui的使用 (23:22).mp4 3-10 [Vue-cli3开发单文件组件] 提升：Element-UI表单组件分析 (12:52).mp4 3-11 [Vue-cli3开发单文件组件] 提升：手写表单组件-Input实现双向数据绑定 (08:40).mp4 3-12 [Vue-cli3开发单文件组件] 提升：手写表单组件-设计FormItem组件 (08:05).mp4 3-13 [Vue-cli3开发单文件组件] 提升：手写表单组件-如何正确设计表单验证规则 (19:30).mp4 3-14 [Vue-cli3开发单文件组件] 提升：手写表单组件-Form组件校验方法实现 (16:06).mp4 4-1 [Vue全家桶知识点详讲] vue-router的介绍和安装 (17:24).mp4 4-2 [Vue全家桶知识点详讲] 路由的基本使用 (07:37).mp4 4-3 [Vue全家桶知识点详讲] 命名路由的使用 (02:03).mp4 4-4 [Vue全家桶知识点详讲] 动态路由和路由组件复用 (12:03).mp4 4-5 [Vue全家桶知识点详讲] 404路由和路由匹配优先级 (09:01).mp4 4-6 [Vue全家桶知识点详讲] 路由查询参数（query+params） (06:12).mp4 4-7 [Vue全家桶知识点详讲] 路由重定向和别名的使用 (03:38).mp4 4-8 [Vue全家桶知识点详讲] 路由组件传值 (04:13).mp4 4-9 [Vue全家桶知识点详讲] 如何使用编程式导航 (07:15).mp4 4- 10 [Vue全家桶知识点详讲] 嵌套路由的使用 (08:19).mp4 4- 11 [Vue全家桶知识点详讲] 命名视图的使用 (09:32).mp4 4- 12 [Vue全家桶知识点详讲] 如何使用全局守卫做登录操作 (18:48).mp4 4- 13 [Vue全家桶知识点详讲] 组件内的路由守卫应用 (14:40).mp4 4- 14 [Vue全家桶知识点详讲] 路由meta元信息实现权限控制 (13:09).mp4 4- 15 [Vue全家桶知识点详讲] 路由组件内在什么时机获取数据 (17:09).mp4 4- 16 [Vue全家桶知识点详讲] 什么是Vuex、为什么要使用Vuex (18:52).mp4 4- 17 [Vue全家桶知识点详讲] Vuex的基本使用 (16:54).mp4 4- 18 [Vue全家桶知识点详讲] 为什么要使用actions (05:34).mp4 4- 19 [Vue全家桶知识点详讲] Vuex系列的辅助函数的运用 (09:59).mp4 4- 20 [Vue全家桶知识点详讲] 如何在组件内部提交数据给vuex (05:18).mp4 4- 21 [Vue全家桶知识点详讲] 使用vuex的modules构建购物车案例 (12:05).mp4 4- 22 [Vue全家桶知识点详讲] 模拟mock数据和商铺数据展示 (15:18).mp4 4- 23 [Vue全家桶知识点详讲] 如何添加商品到购物车中 (11:55).mp4 4- 24 [Vue全家桶知识点详讲] 购物车中数据渲染 (07:17).mp4 4- 25 [Vue全家桶知识点详讲] 商铺库存和购物车总结处理以及后续的安排 (11:45).mp4 5-1 [Vue商城项目实战] Xmall商城项目介绍和课程目标 (16:28).mp4 5-2 [Vue商城项目实战] 初始化项目和项目插件依赖下载 (07:03).mp4 5-3 [Vue商城项目实战] 嵌套路由控制导航组件的显示 (16:10).mp4 5-4 [Vue商城项目实战] Xmall商城导航组件实现 (16:38).mp4 5-5 [Vue商城项目实战] Xmall商城首页轮播图实现 (08:45).mp4 5-6 [Vue商城项目实战] 首页接口编写、交互以及数据渲染 (21:17).mp4 5-7 [Vue商城项目实战] 首页活动版块页面展示 (07:09).mp4 5-8 [Vue商城项目实战] 具名插槽在xmall商城中的体现 (08:12).mp4 5-9 [Vue商城项目实战] 热门商品模块实现 (08:48).mp4 5- 10 [Vue商城项目实战] 品牌周边模块功能实现 (07:46).mp4 5- 11 [Vue商城项目实战] 全部商品页面功能分析、接口编写 (16:54).mp4 5- 12 [Vue商城项目实战] 全部商品页面数据渲染 (13:12).mp4 5- 13 [Vue商城项目实战] 全部商品页面排序、过滤、分页功能实现 (11:40).mp4 5- 14 [Vue商城项目实战] 项目中如何监听复用组件的变化 (04:50).mp4 5- 15 [Vue商城项目实战] 商品详情接口实现、组件创建 (06:53).mp4 5- 16 [Vue商城项目实战] 商品详情页面数据渲染 (18:34).mp4 5- 17 [Vue商城项目实战] Vuex展示加入购物车商品效果 (10:18).mp4 5- 18 [Vue商城项目实战] Token+JWT实现登录接口 (08:44).mp4 5- 19 [Vue商城项目实战] 全局守卫用户跳转登录页面 (07:04).mp4 5- 20 [Vue商城项目实战] 登录组件表单验证实现 (13:48).mp4 5- 21 [Vue商城项目实战] 登录之后如何做数据持久化 (24:49).mp4 5- 22 [Vue商城项目实战] 用户信息展示和退出操作 (05:30).mp4 5- 23 [Vue商城项目实战] 加入购物车前端逻辑实现 (08:11).mp4 5- 24 [Vue商城项目实战] 添加购物车和购物车数据接口编写 (07:51).mp4 5- 25 [Vue商城项目实战] 加入购物车操作和数据显示 (11:16).mp4 5- 26 [Vue商城项目实战] 如何重载网页让购物车数据显示 (06:31).mp4 5- 27 [Vue商城项目实战] 登录和未登录状态购物车数据合并 (17:10).mp4 5- 28 [Vue商城项目实战] 购物车总数量和总价格计算 (05:02).mp4 5- 29 [Vue商城项目实战] xmall商城项目优化(异步组件、懒加载等) (09:12).mp4 5- 30 [Vue商城项目实战] 项目上线之前bug修复 (09:29).mp4 5- 31 [Vue商城项目实战] 测试接口迁移到Node服务器、公共URL设置 (10:03).mp4 5- 32 [Vue商城项目实战] Xmall商城项目上线部署 (23:46).mp4 6-1 [MVVM双向数据绑定原理解析] vue的MVVM响应式原理介绍 (16:09).mp4 6-2 [MVVM双向数据绑定原理解析] 入口函数和编译类Compile实现 (24:08).mp4 6-3 [MVVM双向数据绑定原理解析] 完整实现编译类Compile (39:10).mp4 6-4 [MVVM双向数据绑定原理解析] 实现Observer劫持并监听所有属性 (10:44).mp4 6-5 [MVVM双向数据绑定原理解析] 实现观察者Watcher和依赖收集器Dep (26:44).mp4 6-6 [MVVM双向数据绑定原理解析] 实现双向的数据绑定和Proxy代理 (16:05).mp4
