Vue 2.x 实战

先承认你缺什么，再谈 Vue 2.x 基本盘

这份资料讲的是 Vue 2.x 的核心响应式与组件化基础。别看到“2.x”就觉得过时，很多老项目还在跑它，转岗进公司接手旧代码、或者补前端底层原理时，绕不开这套数据驱动模型。它解决的问题是：你写过几页静态 HTML，或者用过原生 JS 操作 DOM，但一遇到状态多、表单杂、组件要复用的场景，代码就糊成一团。如果你连基本的 JavaScript 函数、数组方法、事件监听都写不顺，建议先补这些再来看，否则讲到 ViewModel 的实例方法你会卡住。这里不教怎么配工程化脚手架，重点全在框架核心概念怎么落到页面上。你的能力缺口在于：习惯了手动操作 DOM，脑子里没有“数据驱动视图”这根弦。所以学之前，先放下 jQuery 那套思路，接受“改数据、页面自动变”的设定。

建议先啃哪几块，怎么配合练习

学习顺序很明确，按目录走就行。第一块先啃“概述”到“ViewModel 实例方法”，搞懂 View 和 ViewModel 的分离逻辑，别急着写复杂界面。第二块是中间的标签属性关联、显示逻辑、UI 事件处理，这是把数据驱动视图跑通的关键。第三块是表单和可重用组件，组件那节是分水岭，看懂了才算入门。练习时别光看视频，准备一个空 HTML 文件，引入 Vue 的运行时库，每看完一节就照着敲一遍：讲计算属性就自己写个全名拼接的例子，讲事件就绑个点击计数器，讲组件就写个简单的待办项。资料里的代码片段只当参考，必须自己手敲报错才能记住，别复制粘贴。遇到卡壳，先看报错信息，再回头查文档，别直接跳过。

学完能独立回答什么、做出什么

看完这份资料，你应该能独立用 Vue 2.x 写一个不依赖构建工具的小页面：定义数据、挂载视图、用计算属性派生状态、把表单输入绑回数据、抽出一个可复用组件。检验学没学透，问自己几个问题：ViewModel 的实例方法到底改了什么、触发什么？计算属性和普通方法在缓存机制上差在哪？View 标签属性怎么和 ViewModel 关联？UI 事件交由 ViewModel 处理时参数怎么传？组件复用时父子数据怎么流动？答得上来就过，答不上来就回去重看对应那节。别假装都会，概念含糊到实战里就是满屏报错。能独立做出一个带表单验证和列表渲染的交互页，就算把基础打牢了。