全新Vue.js2.6核心技术第一季：零基础初体验

缺什么补什么：Vue 2.6 核心指令初体验导读

很多转岗做前端或后端补前端的同行，在看老项目时经常卡在 Vue 2 的写法上：明明 HTML 里没写死内容，页面却能渲染出数据；标签上挂着的 v-bind、v-on 到底在替谁干活。这门聚焦 Vue 2.6 核心技术初体验的资料，解决的就是从零到能看懂、能照着写第一个响应式页面的断层问题。它不碰脚手架，不碰工程化，只把框架最底层的指令和事件绑定掰开揉碎。适合完全没碰过框架、只会原生 JavaScript 操作 DOM 的人；如果你连函数和事件监听都写不顺，请先补 JS 基础再来看，否则后面的双向绑定会让你觉得在背咒语。

先看哪几块，资料怎么配合练

别按顺序从头到尾刷，建议跳着看。第一块先啃 MVC 与 MVVM 的理解及基础示例，把数据驱动视图的概念立住，别急着敲代码，先弄明白 Vue 实例接管了哪块区域。第二块直接扎进常用指令，这是这门课的肉。重点放在 v-bind 处理属性、v-on 处理事件、v-model 处理表单双向绑定这三个上。事件修饰符那一节别快进，它决定了你后面写表单验证时能不能少写一堆 if。资料包里的示例代码不是用来看的，每听完一个指令，立刻在本地建一个空 HTML 文件，引一份本地版本的 Vue 2.6 库，把视频里的案例照着敲一遍。敲的时候故意把 v-bind 写错成 v-on，看报什么错，这种试错比看十遍视频都管用。v-cloak 那节虽然短，但必须跟着练，它会解释你刚刷新页面时那一闪而过的花屏是怎么回事。

学完能独立做什么，看完应能回答的问题

学完这一季，你应该能独立用纯 HTML 加引入 Vue 库的方式，写出一个简单的交互页面：比如一个待办事项列表，能输入、能点按钮添加、能点删除。别小看这个，不用脚手架手写出来，说明你真懂了数据怎么绑到视图上。看完资料后，问自己几个问题：Vue 实例里的 data 改了，页面是怎么自动变的？v-bind 和插值表达式在处理属性时有什么区别？v-model 用在非表单元素上会怎样？事件修饰符能帮你省掉多少手动写事件处理的代码？如果这几个问题答得磕磕巴巴，回去把指令那几节再过一遍。别急着找第二季看组件化，地基没打牢，组件传参会让你更晕。把这几个指令用熟，能独立写出不带路由的交互页，这季才算没白看。