尚硅谷Vue技术全家桶（天禹老师主讲）

前端开发

课程简介

《尚硅谷Vue技术全家桶（天禹老师主讲）》天禹老师的Vue技术全家桶视频教程包含视频共168个、课件资料、代码全都有！【技能收获】学完可掌握：Vue / 前端工程化、React 前端。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目

已有 0 人浏览发布 2026-09-15 更新 2026-09-15

尚硅谷这套 Vue 全家桶在天禹老师手里讲出来，最大的特点不是"全",而是节奏敢压。168 个视频的数量摆在那里，容易让人误以为是那种一节讲一个 API 的慢炖课，实际打开会发现单集信息密度偏高，很多集是"概念 + 现场手写 + 踩坑演示"三件事挤在一起。所以这篇导读不打算替你把目录念一遍，而是说清楚：哪些章节值得逐帧看，哪些可以倍速过，以及那堆课件和代码到底该怎么拆。

课纲的含金量集中在哪几段

整套内容的主干是 Vue 核心语法 → 组件化 → 路由与状态管理 → 工程化与项目实战。真正拉开差距的是后半段。前半段模板语法、指令、计算属性这些，任何一本入门书都能覆盖，天禹老师胜在演示时会把"这样写会报什么错"顺手演一遍，对自学者来说这种负面案例比正确写法更值钱。

组件化那一块是全课的第一次爬坡。父子通信、插槽、动态组件、生命周期钩子，这些概念单独看都不难，难的是组合起来用。课程在这里安排了连续的案例推进，建议不要跳，跳了后面路由传参和状态管理会卡住。

值得精看的几个硬骨头

响应式原理相关章节：这是判断一个 Vue 学习者是否只停留在"会用"的分水岭。数据劫持、依赖收集、派发更新这条链路，课程里是拆开讲的，配合课件里的示意图看效果最好。
路由进阶部分：路由守卫、懒加载、动态路由匹配，这几节和真实项目里的权限控制直接挂钩，属于面试和干活都会碰到的内容。
状态管理：从基本用法到模块化拆分，重点看它怎么处理跨组件共享数据，而不是背 API。
工程化与构建配置：脚手架配置、代理、打包优化这几节，是很多只会写页面的人缺失的一环，含金量比语法章节高。

资料包别当成附件，要拆开用

配套的课件和代码不能按"看完视频再翻资料"的顺序用，那样基本等于没看。更有效的做法是分三层拆：

课件当索引，看视频前先扫一眼本节要解决什么问题，带着问题看，注意力不容易飘。
代码当对照本，视频里手写的时候先自己敲，敲完再和源码比，差异处往往就是你没吃透的点。
笔记当复盘工具，每过两三节回头把这一段的 API 和坑点整理成一页，比一次性刷完再回头补要省力得多。

怎么安排学习顺序更省时间

如果你已有 JS 基础，前面纯语法的部分可以加速过，把时间留给组件、路由、状态管理和工程化。如果你连 ES6 的模块化、解构、箭头函数都不熟，建议先补这一块再进来，否则中后段会频繁卡壳。项目实战章节不要只当"看一遍知道流程"，最好独立复现一次，哪怕功能缩水，写进自己的练习仓库也比收藏一堆源码有用。

这套课不适合当背景音刷完，它的价值在于那几段需要停下来自己动手的爬坡章节。挑对章节、拆对资料，168 集才不白囤。

天禹老师的Vue技术全家桶视频教程包含视频共168个、课件资料、代码全都有！

课程推荐

视频目录（168 节）

* 001_尚硅谷Vue技术_课程简介.mp4

* 002_尚硅谷Vue技术_Vue简介.mp4

* 003_尚硅谷Vue技术__Vue官网使用指南.mp4

* 004_尚硅谷Vue技术_搭建Vue开发环境.mp4

* 005_尚硅谷Vue技术_Hello小案例.mp4

* 006_尚硅谷Vue技术_分析Hello案例.mp4

* 007_尚硅谷Vue技术_模板语法.mp4

* 008_尚硅谷Vue技术_数据绑定.mp4

* 009_尚硅谷Vue技术_el与data的两种写法.mp4

* 010_尚硅谷Vue技术_理解MVVM.mp4

* 011_尚硅谷Vue技术_Object.defineProperty.mp4

* 012_尚硅谷Vue技术_理解数据代理.mp4

* 013_尚硅谷Vue技术_Vue中的数据代理.mp4

* 014_尚硅谷Vue技术_事件处理.mp4

* 015_尚硅谷Vue技术_事件修饰符.mp4

* 016_尚硅谷Vue技术_键盘事件.mp4

* 017_尚硅谷Vue技术_事件总结.mp4

* 018_尚硅谷Vue技术_姓名案例.mp4

* 019_尚硅谷Vue技术_计算属性.mp4

* 020_尚硅谷Vue技术_计算属性_简写.mp4

* 021_尚硅谷Vue技术_天气案例.mp4

* 022_尚硅谷Vue技术_监视属性.mp4

* 023_尚硅谷Vue技术_深度监视.mp4

* 024_尚硅谷Vue技术_监视的简写形式.mp4

* 025_尚硅谷Vue技术_watch对比computed.mp4

* 026_尚硅谷Vue技术_绑定class样式.mp4

* 027_尚硅谷Vue技术_绑定style样式.mp4

* 028_尚硅谷Vue技术_条件渲染.mp4

* 029_尚硅谷Vue技术_列表渲染.mp4

* 030_尚硅谷Vue技术_key作用与原理.mp4

* 031_尚硅谷Vue技术_列表过滤.mp4

* 032_尚硅谷Vue技术_列表排序.mp4

* 033_尚硅谷Vue技术_更新时的一个问题.mp4

* 034_尚硅谷Vue技术_Vue监测数据的原理_对象.mp4

* 035_尚硅谷Vue技术_Vue.set()方法.mp4

* 036_尚硅谷Vue技术_Vue监测数据的原理_数组.mp4

* 037_尚硅谷Vue技术_总结Vue监视数据.mp4

* 038_尚硅谷Vue技术_收集表单数据.mp4

* 039_尚硅谷Vue技术_过滤器.mp4

* 040_尚硅谷Vue技术_v-text指令.mp4

* 041_尚硅谷Vue技术_v-html指令.mp4

* 042_尚硅谷Vue技术_v-cloak指令.mp4

* 043_尚硅谷Vue技术_v-once指令.mp4

* 044_尚硅谷Vue技术_v-pre指令.mp4

* 045_尚硅谷Vue技术_自定义指令_函数式.mp4

* 046_尚硅谷Vue技术_自定义指令_对象式.mp4

* 047_尚硅谷Vue技术_自定义指令_总结.mp4

* 048_尚硅谷Vue技术_引出生命周期.mp4

* 049_尚硅谷Vue技术_生命周期_挂载流程.mp4

* 050_尚硅谷Vue技术_生命周期_更新流程.mp4

* 051_尚硅谷Vue技术_生命周期_销毁流程.mp4

* 052_尚硅谷Vue技术_生命周期_总结.mp4

* 053_尚硅谷Vue技术_对组件的理解.mp4

* 054_尚硅谷Vue技术_非单文件组件.mp4

* 055_尚硅谷Vue技术_组件的几个注意点.mp4

* 056_尚硅谷Vue技术_组件的嵌套.mp4

* 057_尚硅谷Vue技术_VueComponent构造函数.mp4

* 058_尚硅谷Vue技术_Vue实例与组件实例.mp4

* 059_尚硅谷Vue技术_一个重要的内置关系.mp4

* 060_尚硅谷Vue技术_单文件组件.mp4

* 061_尚硅谷Vue技术_创建Vue脚手架.mp4

* 062_尚硅谷Vue技术_分析脚手架结构.mp4

* 063_尚硅谷Vue技术_render函数.mp4

* 064_尚硅谷Vue技术_修改默认配置.mp4

* 065_尚硅谷Vue技术_ref属性.mp4

* 066_尚硅谷Vue技术_props配置.mp4

* 067_尚硅谷Vue技术_mixin混入.mp4

* 068_尚硅谷Vue技术_插件.mp4

* 069_尚硅谷Vue技术_scoped样式.mp4

* 070_尚硅谷Vue技术_TodoList案例_静态.mp4

* 071_尚硅谷Vue技术_TodoList案例_初始化列表.mp4

* 072_尚硅谷Vue技术_TodoList案例_添加.mp4

* 073_尚硅谷Vue技术_TodoList案例_勾选.mp4

* 074_尚硅谷Vue技术_TodoList案例_删除.mp4

* 075_尚硅谷Vue技术_TodoList案例_底部统计.mp4

* 076_尚硅谷Vue技术_TodoList案例_底部交互.mp4

* 077_尚硅谷Vue技术_TodoList案例_总结.mp4

* 078_尚硅谷Vue技术_浏览器本地存储.mp4

* 079_尚硅谷Vue技术_TodoList_本地存储.mp4

* 080_尚硅谷Vue技术_组件自定义事件_绑定.mp4

* 081_尚硅谷Vue技术_组件自定义事件_解绑.mp4

* 082_尚硅谷Vue技术_组件自定义事件_总结.mp4

* 083_尚硅谷Vue技术_TodoList案例_自定义事件.mp4

* 084_尚硅谷Vue技术_全局事件总线1.mp4

* 085_尚硅谷Vue技术_全局事件总线2.mp4

* 086_尚硅谷Vue技术_TodoList案例_事件总线.mp4

* 087_尚硅谷Vue技术_消息订阅与发布_pubsub.mp4

* 088_尚硅谷Vue技术_TodoList案例_pubsub.mp4

* 089_尚硅谷Vue技术_TodoList案例_编辑.mp4

* 090_尚硅谷Vue技术_$nextTick.mp4

* 091_尚硅谷Vue技术_动画效果.mp4

* 092_尚硅谷Vue技术_过度效果.mp4

* 093_尚硅谷Vue技术_多个元素过度.mp4

* 094_尚硅谷Vue技术_集成第三方动画.mp4

* 095_尚硅谷Vue技术_总结过度与动画.mp4

* 096_尚硅谷Vue技术_配置代理_方式一.mp4

* 097_尚硅谷Vue技术_配置代理_方式二.mp4

* 098_尚硅谷Vue技术_github案例_静态组件.mp4

* 099_尚硅谷Vue技术_github案例_列表展示.mp4

* 100_尚硅谷Vue技术_github案例_完善案例.mp4

* 101_尚硅谷Vue技术_vue-resource.mp4

* 102_尚硅谷Vue技术_默认插槽.mp4

* 103_尚硅谷Vue技术_具名插槽.mp4

* 104_尚硅谷Vue技术_作用域插槽.mp4

* 105_尚硅谷Vue技术_Vuex简介.mp4

* 106_尚硅谷Vue技术_求和案例_纯vue版.mp4

* 107_尚硅谷Vue技术_Vuex工作原理图.mp4

* 108_尚硅谷Vue技术_搭建Vuex环境.mp4

* 109_尚硅谷Vue技术_求和案例_vuex版.mp4

* 110_尚硅谷Vue技术_vuex开发者工具的使用.mp4

* 111_尚硅谷Vue技术_getters配置项.mp4

* 112_尚硅谷Vue技术_mapState与mapGetters.mp4

* 113_尚硅谷Vue技术_mapActions与mapMutations.mp4

* 114_尚硅谷Vue技术_多组件共享数据.mp4

* 115_尚硅谷Vue技术_vuex模块化+namespace_1.mp4

* 116_尚硅谷Vue技术_vuex模块化+namespace_2.mp4

* 117_尚硅谷Vue技术_路由的简介.mp4

* 118_尚硅谷Vue技术_路由基本使用.mp4

* 119_尚硅谷Vue技术_几个注意点.mp4

* 120_尚硅谷Vue技术_嵌套路由.mp4

* 121_尚硅谷Vue技术_路由的query参数.mp4

* 122_尚硅谷Vue技术_命名路由.mp4

* 123_尚硅谷Vue技术_路由的params参数.mp4

* 124_尚硅谷Vue技术_路由的props配置.mp4

* 125_尚硅谷Vue技术_router-link的replace属性.mp4

* 126_尚硅谷Vue技术_编程式路由导航.mp4

* 127_尚硅谷Vue技术_缓存路由组件.mp4

* 128_尚硅谷Vue技术_两个新的生命周期钩子.mp4

* 129_尚硅谷Vue技术_全局前置_路由守卫.mp4

* 130_尚硅谷Vue技术_全局后置_路由守卫.mp4

* 131_尚硅谷Vue技术_独享路由守卫.mp4

* 132_尚硅谷Vue技术_组件内路由守卫.mp4

* 133_尚硅谷Vue技术_history模式与hash模式.mp4

* 134_尚硅谷Vue技术_element-ui基本使用.mp4

* 135_尚硅谷Vue技术_element-ui按需引入.mp4

* 136_尚硅谷Vue3技术_vue3简介.mp4

* 137_尚硅谷Vue3技术_使用vue-cli创建工程.mp4

* 138_尚硅谷Vue3技术_使用vite创建工程.mp4

* 139_尚硅谷Vue3技术_分析工程结构.mp4

* 140_尚硅谷Vue3技术_安装开发者工具.mp4

* 141_尚硅谷Vue3技术_初识setup.mp4

* 142_尚硅谷Vue3技术_ref函数_处理基本类型.mp4

* 143_尚硅谷Vue3技术_ref函数_处理对象类型.mp4

* 144_尚硅谷Vue3技术_reactive函数.mp4

* 145_尚硅谷Vue3技术_回顾Vue2的响应式原理.mp4

* 146_尚硅谷Vue3技术_Vue3响应式原理_Proxy.mp4

* 147_尚硅谷Vue3技术_Vue3响应式原理_Reflect.mp4

* 148_尚硅谷Vue3技术_reactive对比ref.mp4

* 149_尚硅谷Vue3技术_setup的两个注意点.mp4

* 150_尚硅谷Vue3技术_computed计算属性.mp4

* 151_尚硅谷Vue3技术_watch监视ref定义的数据.mp4

* 152_尚硅谷Vue3技术_watch监视reactive定义的数据.mp4

* 153_尚硅谷Vue3技术_watch时value的问题.mp4

* 154_尚硅谷Vue3技术_watchEffect函数.mp4

* 155_尚硅谷Vue3技术_Vue3生命周期.mp4

* 156_尚硅谷Vue3技术_自定义hook.mp4

* 157_尚硅谷Vue3技术_toRef与toRefs.mp4

* 158_尚硅谷Vue3技术_shallowReactive与shallowRef.mp4

* 159_尚硅谷Vue3技术_readonly与shallowReadonly.mp4

* 160_尚硅谷Vue3技术_toRaw与markRaw.mp4

* 161_尚硅谷Vue3技术_customRef.mp4

* 162_尚硅谷Vue3技术_provide与inject.mp4

* 163_尚硅谷Vue3技术_响应式数据的判断.mp4

* 164_尚硅谷Vue3技术_CompositionAPI的优势.mp4

* 165_尚硅谷Vue3技术_Fragment组件.mp4

* 166_尚硅谷Vue3技术_Teleport组件.mp4

* 167_尚硅谷Vue3技术_Suspense组件.mp4

* 168_尚硅谷Vue3技术_Vue3中其他的改变.mp4