简介：面向 Vue 零基础初学者的入门讲解资料，以 PDF 文档形式整理了一条 Vue 渐进式框架的核心学习路径。内容从“Vue 是什么”切入，说明其轻量、渐进式的设计特点，并解释“直接以 script 引入”和“使用 NPM 安装”两种环境搭建方案的适用场景；随后通过一个可运行的最小应用示例，逐步演示数据绑定、事件监听、v-model 双向绑定等基础用法，并附有完整代码示意；最后梳理 Vue 实例创建、挂载、销毁等生命周期阶段，以及 created、mounted、beforeDestroy 三个常用钩子的触发时机与典型用途，便于初学者建立宏观认知并规避常见误区。资源打包为 1 个 PDF 文件，压缩包大小约 94KB，内容精炼、结构清晰，适合快速通读或随时查阅。目前已有 808 人学习下载，非常适合准备在短时间内了解 Vue 核心概念并启动第一个项目的同学作为第一份入门材料。

1. Vue 到底是什么：17kb 的渐进式框架，凭什么值得学

先抛一个反直觉的结论：Vue 的核心库压缩后只有 17kb，比一张高清图还小。很多完全没接触过前端框架的初学者，第一次听到「框架」两个字就下意识觉得重，实际上 Vue 是「渐进式」的，你可以只在页面里引入一个 script，用它管住某个互动区域，后续要构建大型应用时再从生态里逐步加东西。这篇文章就把 vue 快速入门的完整路径拆开：环境怎么搭、第一行代码怎么写、生命周期在哪个节点做什么事，以及小白最容易在哪几步翻车。适合两类人：一是被各种工程化术语劝退、只想赶紧跑通一个 demo 的纯新手；二是写过原生 JS 但还没系统性用框架、想建立正确心智模型的开发者。

2. 环境搭建的两条路：script 引入与 npm 工程化怎么选

2.1 直接引入：五分钟跑通的最小可行环境

最轻量的一条路，是下载 Vue 的独立构建版本，放进项目目录后用<script>标签引入。这个方式适合原型验证、写 demo、或者在一个老项目里局部拆入 Vue。常见做法是：你去官方文档的「安装」页下载 vue.js，把它放到一个lib目录下，然后让 HTML 和业务脚本都处在这个文件的包裹范围内。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Vue 最小环境</title> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script src="lib/vue.js"></script> <script src="js/main.js"></script> </body> </html>

// js/main.js - 创建 Vue 根实例 var app = new Vue({ el: '#app', // 把实例挂载到页面上 id 为 app 的 DOM 节点 data: { message: '环境跑通了' } });

逻辑说明：先加载 Vue 库文件，再把你的业务脚本放到后面，这样new Vue()执行时全局变量Vue已经存在。el负责划定接管范围，data里定义的数据可以被模板直接引用。这个地方有一个新手容易忽略的点：lib/vue.js的路径写错了，页面会直接白屏，而且控制台会报Vue is not defined，排查时先确认网络面板里这个文件有没有成功加载。

参数说明：el推荐使用 id 选择器，因为 id 在页面中唯一；如果用了 class 选择器，Vue 只取匹配到的第一个元素。data在根实例里是对象，在组件里必须是函数，这个差异后面章节会专门讲。

2.2 NPM 与脚手架：从手写 script 到工程化项目

一旦项目开始有多个页面、需要模块复用，手写 script 引入的方式会迅速失控。此时推荐走 npm 安装 Vue，配合脚手架工具初始化项目。这里必须先说一个镜像源的问题：npm 官方源在国内访问速度经常让人崩溃，安装依赖能卡到让人怀疑网络。我一般会先配置国内镜像源，这个操作非常快：

# 配置镜像源（这是常见做法，改的是 npm 的 registry 指向） npm install -g cnpm --registry=https://registry.npm.taobao.org # 全局安装脚手架工具 cnpm install -g vue-cli # 基于 webpack 模板创建项目 vue init webpack my-project

逻辑说明：第一条命令安装的是cnpm这个包装器，它把下载源指向了国内镜像，后续安装依赖时速度会明显提升。第二条命令全局安装vue-cli，它负责的项目初始化脚手架。第三条命令里webpack是模板名，my-project是项目目录名，执行后交互式终端会问你项目描述、作者、是否安装 vue-router 等，直接回车用默认值即可。

参数说明：如果你用的是较新的环境，官方更推荐create-vue这条工具链而不是vue-cli，但老项目里vue init webpack这套模板依然大量存在。遇到卡在vue init没反应的，多半是被网络拦住了；换用--offline或直接改走 git 克隆模板仓库是国内开发者常用的备选路径。

2.3 依赖安装与目录结构：启动项目前先认识家当

项目初始化完成后，进入目录安装依赖并启动：

# 进入项目目录 cd my-project # 安装 package.json 里声明的所有依赖 npm install # 启动开发服务器 npm run dev

npm install首次执行时耗时较长，node_modules 里会有几千个包，这是正常现象。npm run dev启动后终端会打印一个本地访问地址，一般是localhost:8080，浏览器打开看到 Vue 的 logo 页面就是成功。

这个阶段要认识三个关键目录：src里放源码，你的组件文件都在这里；build和config是 webpack 的构建配置，新手不需要动；package.json声明依赖和脚本命令。踩过坑的人都知道，团队协作时package-lock.json这个文件必须提交到版本库，它锁定了每个依赖的精确版本，否则别人 clone 项目后npm install装出来的依赖版本不一致，玄学 bug 就是这样产生的。

3. 第一个 Vue 应用：把插值、事件、双向绑定和 watch 串起来

3.1 页面结构：先写静态骨架，再挂数据

第一个应用不用脚手架，直接用script引入的方式跑，因为注意力应该集中在 Vue 本身的语法上。页面里有一个div#app，里面放文本插值、一个按钮、一个输入框。这里顺便说一个很多教程不会强调的点：div#app里写的内容只是模板，真正渲染出来的内容由 Vue 实例的data决定。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>第一个 Vue 应用</title> </head> <body> <div id="app"> <div>{{ title }}</div> <button @click="say()">单击事件</button> <br> <div>今年 {{ age }} 岁</div> <input v-model="age"> </div> </body> <script src="lib/vue.js"></script> <script src="js/hello.js"></script> </html>

逻辑说明：{{ title }}是模板插值语法，Vue 会把实例里data.title的值渲染到这个位置。@click是v-on:click的简写形式，绑定的是methods里的方法。v-model是双向绑定指令，它同时做两件事：把data.age的初始值回填到输入框，又监听输入框的input事件把新值写回data.age。也就是说你改输入框，底下「今年 xx 岁」的文本会同步变化，这就是一个最简单的双向绑定场景。

3.2 实例逻辑：data、methods、watch 三者的协作关系

// js/hello.js - 第一个 Vue 应用的实例逻辑 var app = new Vue({ el: '#app', data: { title: 'hello vue', age: 22 }, methods: { say: function () { console.log(this.title); } }, watch: { 'age': function (newVal, oldVal) { console.log('年龄从', oldVal, '变为', newVal); } } });

逻辑说明：data里定义了title和age两个初始值。methods.say是事件处理函数，方法内部的this指向 Vue 实例，所以this.title能取到数据。watch是数据监听器，当age变化时自动触发回调，参数里newVal是新值、oldVal是旧值。这个三个部分的协作逻辑是：模板负责展示、data负责存储、methods负责行为的入口、watch负责数据变化后的响应。

参数说明：watch监听的键名写法有讲究，如果只写age，监听的是根级数据；如果数据是对象里的属性，要写成'obj.key'这种字符串形式。另外watch默认不会深度监听对象内部变化，需要深监听时加deep: true，这是一个很容易被忽略的细节。

3.3 数据流向：单向数据流与双向绑定的边界在哪里

很多教程讲到这里就停了，但你要真正理解 Vue 的执行机制，必须分清两条数据路径。插值表达式{{ }}和:attr绑定是单向的：数据变化会驱动视图更新，但视图上的交互不会直接改数据。v-model是语法糖，它本质上是value属性绑定加input事件监听的组合写法，所以它只适用于表单类元素（input、textarea、select）。

常见误区是以为v-model可以到处用。它不能用于div这类普通元素。另一个误区是以为data里的对象可以直接增删属性触发更新，实际上 Vue 2 的响应式系统只监听初始化时存在的属性，动态新增的属性要调用Vue.set才会具备响应式能力。

4. 生命周期：created、mounted、beforeDestroy 分别在什么时机干活

4.1 生命周期整体链路：从创建到销毁的六个关键节点

Vue 实例创建后不是直接出现在页面上的，中间有一个完整的初始化链路。理解这条链路的价值在于：你知道某个业务逻辑应该放在哪个钩子。完整顺序是beforeCreate→created→beforeMount→mounted→beforeUpdate→updated→beforeDestroy→destroyed，但对小白来说，先抓住三个常用钩子就够了：created、mounted、beforeDestroy。

created触发时，数据已经初始化完毕，但 DOM 还没有生成，$el不可用。mounted触发时，实例的模板已经编译完成并且挂载到了文档中，此时可以拿到真实 DOM。beforeDestroy触发时实例还在，但马上要销毁，此时适合解绑全局事件和定时器。

var app = new Vue({ el: '#app', data: { a: 2 }, created: function () { console.log('created 阶段，数据 a 的值是', this.a); console.log('此时 $el 是', this.$el); }, mounted: function () { console.log('mounted 阶段，$el 已经可用'); console.log(this.$el); }, beforeDestroy: function () { console.log('实例销毁前，在这里清理定时器和事件监听器'); } });

逻辑说明：created里this.a已经能取到值，但this.$el打印出来是undefined，因为模板还没编译。mounted里this.$el是真实的 DOM 节点。这段代码的执行顺序是：先created后mounted，中间隔着一个模板编译的过程。

4.2 created 与 mounted 的分工：数据请求该放哪个钩子

新手最容易纠结的问题是：页面的初始数据请求到底放created还是mounted。我的习惯是放在created。原因是这个阶段离实例初始化最近，越早发起异步请求，数据回来得越早，同时这个阶段虚拟 DOM 还未生成，请求期间就算有依赖 DOM 的操作也不会因为结构未完成而报错。

mounted适合做依赖真实 DOM 的初始化操作，比如获取元素尺寸、初始化第三方图表库、绑定原生事件监听器。注意不要在mounted里拿到 DOM 后立即做同步的offsetWidth读取，因为此时样式可能还没完全生效，用this.$nextTick包一层才是稳妥做法。

4.3 beforeDestroy 里的自我救赎：清理是必做题不是选做题

定时器泄漏是 Vue 项目里最常见的隐性 bug。组件销毁了，但定时器还在跑，回调里还在操作已经销毁的 DOM，控制台报错一屏接一屏。

mounted: function () { this.timer = setInterval(function () { console.log('每秒执行一次'); }, 1000); }, beforeDestroy: function () { clearInterval(this.timer); this.timer = null; }

逻辑说明：把定时器句柄挂到实例的this上，beforeDestroy里做清理。这背后的规则是：Vue 只负责它自己创建的绑定和监听，对于外部 API（addEventListener、setInterval、第三方库的实例）一概不管，你不主动清理它们就会继续存活。以前我带过的一个项目就是忘了清一个轮播图的定时器，切页后后台一直在跑，移动端直接卡成幻灯片，查了半天才定位到是生命周期钩子里的清理逻辑缺失。

5. 小白高频翻车现场与排查思路：五个真实踩坑记录

5.1 控制台报错 Vue is not defined：script 加载顺序与路径问题

现象：打开页面白屏，控制台报Uncaught ReferenceError: Vue is not defined。

原因：vue.js要么没加载成功，要么加载顺序在业务脚本之后。Vue 以全局变量形式使用时，业务脚本执行时找不到Vue这个变量。

解决：先看网络面板里vue.js是否 404，路径是否正确；再确认script标签顺序，Vue 库必须在前，业务脚本在后。如果用的是相对路径，注意lib/vue.js是从 HTML 文件所在目录开始算的，层级不对就会加载失败。这里还有个细节：把脚本放在body底部而不是head里，能避免加载阻塞页面渲染。

5.2 数据改了页面不更新：响应式监听边界

现象：data里的数组用下标改值，页面纹丝不动；动态给对象加属性，模板也不刷新。

原因：Vue 2 的响应式系统基于Object.defineProperty，初始化时已经存在的属性才有 getter 和 setter，直接新增属性或按索引改数组不走响应式拦截，所以视图不会更新。

解决：对象新增属性用Vue.set(this.obj, 'key', value)；数组按下标修改用this.arr.splice(index, 1, newValue)；整体替换则直接this.obj = Object.assign({}, this.obj, { key: value })。记住一个口诀：能用整体赋值解决的，就不要做局部修改。

5.3 v-model 与中文输入法的天然冲突：compositionstart 事件

现象：用v-model绑定输入框，输入拼音时，候选拼音还没上屏就已经触发数据更新，导致搜索框提前查询。

原因：v-model监听的是input事件，中文输入法的组合输入过程会触发多次input，每次输入的拼音字符都被当成有效值。

解决：正式项目里的搜索框一般不用裸的v-model，而是在@compositionstart和@compositionend里做标记，compositionend之后才让数据同步。另一个思路是改用@keyup.enter触发查询，规避输入过程中的数据风华问题。对小白来说，知道这个坑存在比真正踩一遍更省钱。

5.4 路由切换后组件状态残留：缺少销毁逻辑

现象：从 A 页面切走再切回来，A 页面的滚动位置还在，填的表单数据也没清空，甚至关联的定时器还在后台跑。

原因：组件被路由缓存或实例没有真正销毁时，状态被保留。默认路由切换时组件实例会销毁重建，但如果开了<keep-alive>包裹，组件实例会被缓存，destroyed不会触发。

解决：用了<keep-alive>时，要用activated和deactivated钩子替代mounted和beforeDestroy；不想保留状态，直接在路由视图外层不加缓存即可。排查这类问题，先在beforeDestroy里打一行日志，看看切路由时到底有没有走销毁逻辑。

5.5 index.html 里的 消失了

现象：渲染出来的页面里找不到根容器，结构全乱。

原因：挂载顺序和 DOM 结构的问题，new Vue({ el: '#app' })执行时根节点不存在或模板里直接写了根节点标签导致编译冲突。

解决：确保index.html里有<div id="app"></div>这个空节点，Vue 会把整个模板替换进去。不要在#app内部用v-for生成多个并列根节点，Vue 2 的组件模板要求单一根元素，多根会直接报编译错误。

6. 调试习惯与下一步：控制台里就能看穿数据状态

最后一个技巧送给想走得更远的人：打开 Vue 项目，按 F12 进入开发者工具，Vue 提供了一套独立调试用的浏览器插件，它会像黑匣子一样记录当前组件的data、computed、路由、Vuex 状态，改数据可以直接在面板里操作，页面即时响应。没有插件时也有替代方案，在业务代码里临时加一个window.vm = this，之后在控制台输入vm.age = 30，同样能触发视图更新，这个手法在排查线上问题时非常实用。

调试的优先级排序是这样的：先看控制台有没有报错，再看 Network 里请求和数据有没有返回，再看浏览器插件里数据和真实 DOM 是否一致。按这个顺序走能节约大量时间，也避免把网络问题错怪到代码头上。

文件组织的习惯也在这一步养成。不管项目大小，我会把lib、css、js拆开，业务脚本按功能继续拆分，比如把 Vue 实例、路由配置、第三方插件初始化各放一个文件。从那以后我每次拿到新项目都强制先跑一遍最小值：造一个最小模板，引入 Vue，跑通，再加业务代码——这个习惯帮我无数次躲过了环境问题的纠缠。希望这篇 vue 快速入门记录能帮你少走几段弯路。

本文还有配套的精品资源，点击获取