课程简介
本课程以构建“去哪儿网”移动端应用为核心场景,系统梳理 Vue.js 从 2.5 到 3.0 的技术演进与工程化实践。它并非单纯罗列 API 文档,而是通过一个完整的商业级项目,解决初学者如何将分散的知识点整合为可维护代码结构的难题。课程旨在帮助开发者建立组件化思维,理解 MVVM 模式在前端架构中的具体落地方式。适合具备基本 HTML/CSS/JS 基础…
本课程以构建“去哪儿网”移动端应用为核心场景,系统梳理 Vue.js 从 2.5 到 3.0 的技术演进与工程化实践。它并非单纯罗列 API 文档,而是通过一个完整的商业级项目,解决初学者如何将分散的知识点整合为可维护代码结构的难题。课程旨在帮助开发者建立组件化思维,理解 MVVM 模式在前端架构中的具体落地方式。适合具备基本 HTML/CSS/JS 基础,但缺乏大型项目实战经验,或希望从 jQuery 时代平滑过渡到现代框架的开发者。对于完全零基础的读者,建议先补足 JavaScript ES6+ 核心语法,特别是 Promise 与异步编程概念,以便更好地理解 Vue 中的响应式数据与生命周期管理。学习路径建议从基础语法与实例生命周期入手,逐步过渡到组件通信与模块化开发,最后结合路由与网络请求完成全栈交互逻辑。
核心模块与学习重点
课程内容紧密围绕 Vue 实例、模版语法、生命周期钩子及组件化改造展开。重点在于解析 Vue 如何监听数据变化并高效更新 DOM,以及如何在复杂应用中管理状态。开发者应重点关注 TodoList 从单文件向组件化重构的过程,理解 Props 与 Events 在父子组件间传递数据的具体机制。同时,深入剖析 Vue 实例的生命周期,明确在 created 与 mounted 阶段适合执行哪些逻辑,避免常见的性能陷阱。通过反复练习组件封装,掌握如何将重复代码抽象为可复用模块,这是提升代码质量的关键。此外,课程还涉及移动端适配与交互细节,帮助开发者理解前端工程不仅仅是逻辑实现,更包括用户体验与性能优化。
实战产出与资料配合
学完本课程,开发者应能独立搭建一个具备路由切换、数据请求、状态管理及组件复用的移动端 Web 应用。具体产出包括:能够清晰划分项目目录结构,编写规范化的组件代码,并实现前后端数据的有效交互。资料包中的源码是重要的对照工具,建议采用“阅读-复现-修改”的学习方法。首先通读关键模块的代码结构,理解数据流向;然后尝试手动复现核心功能,不依赖自动补全;最后尝试修改业务逻辑或新增简单功能,验证对底层机制的理解。这种练习方式能有效避免“眼高手低”,确保将知识转化为实际工程能力。通过这种高强度的代码对照与实操,开发者不仅能掌握 Vue 框架本身,更能培养出解决真实业务问题的工程思维,为后续接触更复杂的架构打下坚实基础。
**第1章 课程介绍** (1节 | 12分钟)
- 1-1 课程简介 (11:01)
**第2章 Vue 起步** (9节 | 70分钟)
- 2-1 课程学习方法 (02:26)
- 2-2 hello world (11:03)
- 2-3 开发TodoList(v-model、v-for、v-on) (16:05)
- 2-4 MVVM模式 (16:42)
- 2-5 【讨论题】你所知道的常用设计模式有哪些?
- 2-6 前端组件化 (01:40)
- 2-7 使用组件改造TodoList (09:51)
- 2-8 简单的组件间传值 (10:01)
- 2-9 章节小结 (01:45)
**第3章 Vue 基础精讲** (13节 | 163分钟)
- 3-1 Vue实例 (09:52)
- 3-2 Vue实例生命周期 (18:23)
- 3-3 Vue的模版语法 (07:44)
- 3-4 计算属性,方法与侦听器 (16:22)
- 3-5 计算属性的 getter 和 setter (07:09)
- 3-6 Vue中的样式绑定 (19:54)
- 3-7 Vue中的条件渲染 (15:33)
- 3-8 Vue中的列表渲染 (20:30)
- 3-9 Vue中的set方法 (07:04)
- 3-10 (新)Vue中的事件绑定 (20:19)
- 3-11 (新)Vue中的表单绑定 (14:21)
- 3-12 (新)章节小节 (05:30)
- 3-13 【讨论题】你对前端中的面向对象有怎样的了解?
**第4章 深入理解 Vue 组件** (10节 | 111分钟)
- 4-1 使用组件的细节点 (25:02)
- 4-2 父子组件间的数据传递 (14:56)
- 4-3 组件参数校验与非 props 特性 (16:44)
- 4-4 给组件绑定原生事件 (05:31)
- 4-5 非父子组件间的传值 (15:44)
- 4-6 在Vue中使用插槽 (15:04)
- 4-7 作用域插槽 (06:57)
- 4-8 (新)动态组件与v-once指令 (08:42)
- 4-9 (新)章节小结 (02:09)
- 4-10 【讨论题】组件究竟是什么?
**第5章 Vue 中的动画特效** (9节 | 79分钟)
- 5-1 Vue动画 - Vue中CSS动画原理 (15:47)
- 5-2 在Vue中使用 animate.css 库 (09:00)
- 5-3 在Vue中同时使用过渡和动画 (11:26)
- 5-4 Vue中的 Js 动画与 Velocity.js 的结合 (13:11)
- 5-5 Vue中多个元素或组件的过渡 (10:12)
- 5-6 Vue中的列表过渡 (07:00)
- 5-7 Vue中的动画封装 (06:31)
- 5-8 本章小节 (04:56)
- 5-9 【讨论题】前端动画是如何实现的?
**第6章 Vue 项目预热** (7节 | 83分钟)
- 6-1 Vue项目预热 - 环境配置 (22:02)
- 6-2 (新)Vue项目预热 - 项目环境准备(答疑) (06:53)
- 6-3 Vue项目预热 - 项目代码介绍 (06:46)
- 6-4 Vue项目预热 - 单文件组件与Vue中的路由 (20:10)
- 6-5 Vue项目预热 - 单页应用VS多页应用 (09:30)
- 6-6 【讨论题】对前端路由,你有怎样的理解?
- 6-7 Vue项目预热 - 项目代码初始化 (16:50)
**第7章 项目实战 - 旅游网站首页开发** (10节 | 164分钟)
- 7-1 Vue项目首页 - header区域开发 (16:20)
- 7-2 Vue项目首页 - iconfont 的使用和代码优化 (20:24)
- 7-3 【讨论题】对于静态资源,如何处理会比较优雅呢?
- 7-4 Vue项目首页 - 首页轮播图 (28:33)
- 7-5 Vue项目首页 - 图标区域页面布局 (13:44)
- 7-6 Vue项目首页 - 图标区域逻辑实现 (22:07)
- 7-7 Vue项目首页 - 热销推荐组件开发 (21:39)
- 7-8 Vue项目首页 - 开发周末游组件 (08:23)
- 7-9 Vue项目首页 - 使用 axios 发送 ajax 请求 (15:57)
- 7-10 Vue项目首页 - 首页父子组组件间传值 (16:11)
**第8章 项目实战 - 旅游网站城市列表页面开发** (13节 | 165分钟)
- 8-1 Vue项目城市选择页 - 路由配置 (12:53)
- 8-2 Vue项目城市选择页 - 搜索框布局 (06:38)
- 8-3 Vue项目城市选择页 - 列表布局 (15:19)
- 8-4 Vue项目城市选择页 - BetterScroll 的使用和字母表布局 (07:50)
- 8-5 Vue项目城市选择页 - 页面的动态数据渲染 (12:45)
- 8-6 Vue项目城市选择页 - 兄弟组件数据传递 (24:10)
- 8-7 Vue项目城市选择页 - 列表性能优化 (05:25)
- 8-8 Vue项目城市选择页 - 搜索逻辑实现 (17:24)
- 8-9 Vue项目城市选择页 - Vuex实现数据共享 (26:22)
- 8-10 Vue项目城市选择页 - Vuex的高级使用及localStorage (17:48)
- 8-11 【讨论题】对前端数据管理框架,你有怎样的理解?
- 8-12 Vue项目城市选择页 - 使用keep-alive优化网页性能 (12:20)
- 8-13 (新)细节优化 (05:14)
**第9章 项目实战 - 旅游网站详情页面开发** (8节 | 110分钟)
- 9-1 Vue项目详情页 - 动态路由和banner布局 (20:45)
- 9-2 Vue项目详情页 - 公用图片画廊组件拆分 (24:26)
- 9-3 Vue项目详情页 - 实现Header渐隐渐显效果 (16:40)
- 9-4 【讨论题】移动端项目的开发过程中,你遇到过怎样的兼容性问题?
- 9-5 Vue项目详情页 - 对全局事件的解绑 (04:41)
- 9-6 Vue项目详情页 - 使用递归组件实现详情页列表 (15:07)
- 9-7 Vue项目详情页 - 动态获取详情页面数据 (16:06)
- 9-8 Vue项目详情页 - 在项目中加入基础动画 (11:14)
**第10章 实战项目 - 项目的联调,测试与发布上线** (6节 | 42分钟)
- 10-1 Vue项目的联调测试上线 - 项目前后端联调 (06:47)
- 10-2 【讨论题】作为前端,你在开发中是如何进行代码调试 Debug
- 10-3 Vue项目的联调测试上线 - 真机测试 (08:52)
- 10-4 Vue项目的联调测试上线 - 打包上线 (06:51)
- 10-5 Vue项目的联调测试上线 - 异步组件实现按需加载 (13:19)
- 10-6 Vue项目的联调测试上线 - 课程总结与后续学习指南 (06:05)
**第11章 Vue-cli4.0升级** (5节 | 49分钟)
- 11-1 Vue CLI 4 升级项目 (07:47)
- 11-2 入口文件迁移及 webpack 配置变更方式 (16:27)
- 11-3 首页代码迁移及代理配置变更 (12:45)
- 11-4 列表及详情页面迁移 (11:05)
- 11-5 【讨论题】Composition API 产生背景及解决问题
**第12章 Vue 3.0 项目全面升级** (9节 | 119分钟)
- 12-1 Vue 3.0环境升级 (11:26)
- 12-2 首页代码升级(Composition API) (20:35)
- 12-3 首页代码升级(优化进阶) (16:46)
- 12-4 首页组件升级(知识点巩固) (07:37)
- 12-5 城市列表页改造(构建更好的可复用性) (14:40)
- 12-6 城市列表组件改造(context & ref) (15:16)
- 12-7 城市列表组件改造(新路由语法) (22:44)
- 12-8 详情页面代码升级 (09:56)
- 12-9 【讨论题】Composition API 应用时注意得问题