---

前端框架 Vue 2 介绍与入门教程

随着前端技术的飞速发展，JavaScript 框架层出不穷。在众多优秀的选择中，Vue.js 凭借其易学易用、灵活高效的特性，迅速崛起并赢得了全球开发者的青睐。尤其是在 Vue 3 发布之前，Vue 2 长期占据着前端框架的重要地位，并在大量现有的项目中被广泛使用。

本篇文章将详细介绍 Vue 2 的核心概念、设计哲学以及如何从零开始入门，帮助你快速掌握这个强大的前端框架。尽管 Vue 3 已成为主流，但学习 Vue 2 的基础知识对于理解 Vue 的演进、维护现有项目以及掌握前端框架的通用原理仍然至关重要。

第一部分：Vue 2 简介与核心概念

1. 什么是 Vue.js？

Vue.js（通常简称为 Vue）是一个用于构建用户界面的渐进式 JavaScript 框架。由尤雨溪于 2014 年创建并开源。

• 渐进式框架 (Progressive Framework): 这是 Vue 的一个重要特性。意味着你可以逐步地将 Vue 应用到你的项目中。你可以只用 Vue 来增强一个现有的 HTML 页面，也可以构建一个完整的单页面应用 (SPA)。Vue 的核心库只关注视图层，你可以轻松地集成其他库或第三方包来处理路由、状态管理等需求，或者使用 Vue 提供的官方配套库（如 Vue Router、Vuex）。
• 构建用户界面: Vue 的主要目标是简化前端开发中 DOM 操作和状态管理的复杂性。它通过数据驱动视图的方式，让你只关注数据的变化，而将 DOM 的更新交给 Vue 来处理。

2. Vue 2 的设计哲学与优势

Vue 2 的设计哲学是简洁、高效和灵活。它吸收了 AngularJS 的双向绑定、React 的组件化和虚拟 DOM 等优点，并在此基础上进行了优化。

• 易学易用: Vue 2 的 API 设计直观简洁，文档友好，上手门槛低。对于有 HTML, CSS, JavaScript 基础的开发者来说，学习曲线非常平缓。
• 响应式系统 (Reactivity): Vue 2 实现了强大的响应式系统。当你修改数据时，依赖于这些数据的视图会自动更新，无需手动操作 DOM。这是 Vue 提高开发效率和性能的关键之一。
• 组件化 (Component-Based): Vue 鼓励将复杂的 UI 拆分成独立的、可复用的组件。每个组件拥有自己的模板、逻辑和样式，使得代码更易于组织、维护和复用。
• 虚拟 DOM (Virtual DOM): Vue 2 使用虚拟 DOM 技术来优化 DOM 更新。当数据发生变化时，Vue 会先在内存中生成一个虚拟 DOM 树，然后将新旧虚拟 DOM 树进行对比（diff 算法），找出差异，最后只更新真实 DOM 中需要改变的部分。这大大减少了直接操作真实 DOM 的次数，提高了渲染性能。
• 性能高效: 结合了响应式系统、虚拟 DOM 和优化的渲染机制，Vue 2 在大多数场景下都能提供出色的性能表现。
• 生态丰富: Vue 2 拥有一个成熟且活跃的生态系统，包括官方提供的路由库 (Vue Router)、状态管理库 (Vuex)、构建工具 (Vue CLI) 以及大量的第三方组件库和工具。

3. Vue 2 在前端生态中的位置

在 Vue 3 发布之前，Vue 2 与 React 和 Angular 共同构成了前端三大主流框架。它在中小型项目以及对易用性要求较高的场景中尤其受欢迎。即使现在 Vue 3 已成为推荐版本，Vue 2 仍广泛应用于许多生产环境中，维护和二次开发的需求依然存在。学习 Vue 2 不仅能让你应对这些老项目，也能为你过渡到 Vue 3 打下坚实的基础，因为 Vue 3 很多核心概念都源自 Vue 2 并在此基础上进行了改进和扩展。

第二部分：Vue 2 入门实战

接下来，我们将通过一些简单的例子来学习 Vue 2 的基本用法。

1. 获取 Vue 2

有几种方式可以使用 Vue 2：

• 通过 CDN (内容分发网络): 这是最简单的方式，适合学习、快速原型开发或集成到现有静态网站中。
  html
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- 或者用于生产环境的压缩版 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> -->

• 通过 npm 或 yarn (推荐用于大型项目): 这是构建单页面应用或其他复杂项目的标准方式，可以通过模块打包工具（如 Webpack, Parcel）进行管理。
  “`bash
  # 使用 npm
  npm install [email protected]

  使用 yarn

  yarn add [email protected]
  “`
  * 通过 Vue CLI (Vue 命令行工具): Vue CLI 是官方提供的脚手架工具，可以快速搭建一个功能齐全的 Vue 项目，集成了 Webpack, Babel, PostCSS 等工具。注意： 现代版本的 Vue CLI 默认创建 Vue 3 项目。如果需要创建 Vue 2 项目，通常需要安装旧版本的 Vue CLI 或者在创建项目时选择 Vue 2 选项（如果可用的话）。对于本教程，我们将重点介绍核心概念，使用 CDN 是最直观的方式入门。

我们将以 CDN 方式开始。

2. 创建第一个 Vue 2 应用

我们从一个简单的 “Hello Vue!” 例子开始。

“`html

“`

将这段代码保存为 HTML 文件并在浏览器中打开。你会看到页面上显示 “Hello Vue!”。

代码解释：

• div id="app": 这是我们的 Vue 应用将要挂载的 DOM 元素。
• {{ message }}: 这是 Vue 的模板语法中的插值 (Interpolation)。它会将被挂载的 Vue 实例的 data 属性中 message 的值显示在这里。
• new Vue({...}): 创建一个 Vue 实例。
  • el: '#app': 指定 Vue 实例要挂载的 DOM 元素的选择器。Vue 将会控制这个元素及其内部的所有内容。
  • data: { message: 'Hello Vue!' }: 定义应用的数据。data 必须是一个对象。Vue 会将这些数据属性转换为响应式的。当 message 的值改变时，{{ message }} 显示的内容会自动更新。

现在，打开浏览器的开发者工具，在控制台中尝试改变 app.message 的值：

javascript
app.message = 'Hello Vue 2!'

你会发现页面上的文本立即变成了 “Hello Vue 2!”。这就是 Vue 响应式系统的魅力！

3. 模板语法：指令 (Directives)

Vue 的模板语法除了插值 {{}} 外，还提供了一系列指令。指令是带有 v- 前缀的特殊属性，它们作用于 DOM 元素，指示 Vue 如何处理这些元素。

• v-bind: 用于动态绑定一个或多个 HTML 属性，或者组件 props。可以简写为 :。
  “`html

  鼠标悬停在我上面看效果

  
  访问 Vue 官网
  

  
  ``
当myTitle,myLink,myImageSrc,myImageAlt` 数据变化时，对应的属性也会自动更新。

• v-if, v-else-if, v-else: 条件渲染指令。根据表达式的布尔值来决定是否渲染一个元素。它们是真实的条件渲染，会创建或销毁 DOM 元素。
  “`html

  这段文字会显示或隐藏

  当上面的文字隐藏时，我显示

  <div v-if="type === 'A'">Type A</div>
  <div v-else-if="type === 'B'">Type B</div>
  <div v-else>Other Type</div>
  
  <button @click="toggleShowText">切换显示/隐藏</button>
  <button @click="changeType">改变类型</button>
  

  
  ``v-if` 是”惰性”的：如果在初始渲染时条件为假，那么什么都不会做，直到条件第一次变为真时，才会渲染这个元素。

• v-show: 条件显示指令。根据表达式的布尔值来决定元素的 CSS display 属性（display: block 或 display: none）。元素始终会被渲染并保留在 DOM 中。
  “`html

  这段文字通过 v-show 控制可见性

  切换可见性

  
  ``v-show` 适用于频繁切换显示/隐藏的场景，因为它避免了频繁创建/销毁 DOM 元素的开销。

• v-for: 列表渲染指令。基于源数据多次渲染元素或模板块。常用于遍历数组或对象。
  “`html

  • {{ item.text }}

  <ol>
      <li v-for="(value, key, index) in myObject">
          {{ index }} - {{ key }}: {{ value }}
      </li>
  </ol>
  

  
  ``
**注意key属性:** 在使用v-for时，强烈建议为每个列表项提供一个独一无二的key属性。这有助于 Vue 追踪每个节点的身份，从而优化更新时的性能，并处理列表项的排序、添加、删除等操作，避免不必要的渲染和 DOM 操作。key` 通常使用数据项的唯一 ID。

• v-on: 事件绑定指令。用于监听 DOM 事件，并在触发时运行 JavaScript 代码。可以简写为 @。
  “`html

  点我
  
  也点我
  打招呼

  
  ``methods对象中定义的方法可以在模板中通过v-on` 指令调用。

• v-model: 表单输入绑定指令。在表单控件或组件上创建双向绑定。它会根据控件类型自动选取正确的方式更新元素（如 value 属性和 input 事件）。
  “`html

  输入内容: {{ message }}

  <p>多行输入: {{ multiLineText }}</p>
  <textarea v-model="multiLineText" placeholder="多行输入..."></textarea>
  
  <p>选中的水果: {{ selectedFruit }}</p>
  <select v-model="selectedFruit">
      <option disabled value="">请选择</option>
      <option>苹果</option>
      <option>香蕉</option>
      <option>橙子</option>
  </select>
  
  <p>同意协议: {{ agree }}</p>
  <input type="checkbox" id="agree" v-model="agree">
  <label for="agree">我同意协议</label>
  
  <p>选中的性别: {{ gender }}</p>
  <input type="radio" id="male" value="男" v-model="gender">
  <label for="male">男</label>
  <br>
  <input type="radio" id="female" value="女" v-model="gender">
  <label for="female">女</label>
  

  
  ``v-model是v-bind:value和v-on:input` 的语法糖。它极大地简化了表单处理。

4. 计算属性 (Computed Properties)

当数据需要进行一些计算或转换后才能显示时，可以使用计算属性。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时，它们才会重新求值。

“`html

``
修改输入框中的内容，reversedMessage会自动更新。注意，计算属性是以属性的方式访问 (vm.reversedMessage)，而不是函数调用 (vm.reversedMessage()`)。相比直接在模板中使用表达式或方法，计算属性更推荐用于复杂的逻辑，因为它有缓存机制。

5. 侦听器 (Watchers)

虽然计算属性适用于处理响应式数据的计算转换，但有时我们需要在数据变化时执行异步操作或比较昂贵的非计算逻辑。这时可以使用侦听器。

“`html

“`
侦听器适合用于执行副作用 (side effects) 的场景，比如异步操作、昂贵的计算或响应特定数据的变化。

6. 方法 (Methods)

我们在 v-on 的例子中已经接触过 methods。methods 对象中定义的函数可以在模板中通过 v-on 指令调用，或者在 Vue 实例内部通过 this.methodName() 调用。

“`html

``methods` 中的函数每次被调用时都会执行。这与计算属性的缓存行为不同。

第三部分：Vue 2 组件化

组件是 Vue 2 最强大的特性之一。它允许我们将 UI 拆分成独立、可复用的代码块。一个组件可以包含自己的模板、脚本逻辑和样式。

1. 定义和注册组件

Vue 2 中定义组件有多种方式：

• 全局注册 (Global Registration): 使用 Vue.component() 方法。全局注册的组件可以在任何 Vue 实例或子组件的模板中使用。
  “`javascript
  // 定义一个名为 button-counter 的新组件
  Vue.component(‘button-counter’, {
  data: function () {
  return {
  count: 0
  }
  },
  template: ‘你点击了我 {{ count }} 次。‘
  })

  // 创建一个根实例
  new Vue({ el: ‘#app-components-global’ })
  对应的 HTML:html

  
  
  

  ``
注意：每个button-counter实例都拥有自己独立的data.count。组件的data` 必须是一个函数，返回一个对象，以确保每个实例拥有独立的副本。

• 局部注册 (Local Registration): 在 Vue 实例或另一个组件的 components 选项中注册。局部注册的组件只在该注册它的组件内部可用。
  “`javascript
  var ComponentA = {
  data: function () {
  return { message: ‘组件 A’ }
  },
  template: ‘

  一个自定义组件: {{ message }}

  ‘
  }

  new Vue({
  el: ‘#app-components-local’,
  components: {
  // 在 components 对象中注册
  ‘component-a’: ComponentA,
  // 你也可以直接在这里定义组件
  ‘component-b’: {
  template: ‘

  另一个自定义组件: {{ message }}

  ‘,
  data: function() { return { message: ‘组件 B’ } }
  }
  }
  })
  对应的 HTML:html

  
  

  “`
  在大型应用中，局部注册是更常用的方式，因为它能明确地表明组件的依赖关系，并且避免全局命名冲突。

2. 组件通信 (Props and Events)

组件化开发中，父子组件之间的通信非常重要。Vue 2 主要通过 props 和自定义事件来实现。

• Prop：从父组件向子组件传递数据
  props 是子组件用来接收父组件传递过来的数据的。props 在子组件中注册，父组件通过 HTML 属性的方式传递数据。Props 遵循单向数据流原则，即父组件的更新会流向子组件，但子组件不应该直接修改 props。
  “`javascript
  // 子组件定义
  Vue.component(‘child-component’, {
  // 声明接收一个名为 myMessage 的 prop
  props: [‘myMessage’],
  template: ‘

  来自父组件的消息: {{ myMessage }}

  ‘
  })

  // 父组件/根实例
  new Vue({
  el: ‘#app-props’,
  data: {
  parentMessage: ‘Hello from parent’
  }
  })
  对应的 HTML:html

  
  

  ``
注意，在 HTML 中使用 kebab-case (短横线连接) 的属性名（my-message）对应于组件中 camelCase (驼峰式) 声明的 prop 名 (myMessage)。v-bind是必须的，因为它绑定的是一个 JavaScript 表达式（parentMessage` 数据），而不是一个字符串字面量。

• 自定义事件：从子组件向父组件发送消息
  子组件可以通过触发自定义事件来通知父组件发生了一些事情。父组件通过 v-on 指令监听子组件的事件。
  “`javascript
  // 子组件定义
  Vue.component(‘child-button’, {
  template: ‘子组件按钮‘,
  methods: {
  handleClick: function () {
  // 触发一个名为 custom-event 的事件
  this.$emit(‘custom-event’, ‘来自子组件的数据’);
  }
  }
  })

  // 父组件/根实例
  new Vue({
  el: ‘#app-events’,
  data: {
  status: ‘等待子组件事件…’
  },
  methods: {
  // 父组件中处理事件的方法
  handleCustomEvent: function (dataFromChild) {
  this.status = ‘接收到子组件事件，数据: ‘ + dataFromChild;
  }
  }
  })
  对应的 HTML:html

  {{ status }}

  ``
在子组件中，使用this.$emit(‘event-name’, [payload])触发事件。在父组件中，使用@event-name=”handlerMethod”或v-on:event-name=”handlerMethod”` 监听事件，并在处理方法中接收子组件传递的数据（如果有）。

3. 生命周期钩子 (Lifecycle Hooks)

每个 Vue 实例在创建时都会经历一系列初始化步骤，例如设置数据观察、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时，它也会运行一些叫做生命周期钩子的函数，让你在不同阶段执行自己的代码。

Vue 2 常用的生命周期钩子有：

• beforeCreate: 实例刚在内存中被创建出来，此时，还没有初始化 data 和 methods 属性。
• created: 实例已经在内存中创建OK，此时 data 和 methods 已经创建完成，但模板还没有编译成 HTML。常用于发送 Ajax 请求获取数据。
• beforeMount: 模板已经在内存中编译完成，但尚未挂载到页面中。
• mounted: 实例已经成功挂载到页面 DOM 中，此时可以进行 DOM 操作。常用于第三方库的初始化。
• beforeUpdate: 数据发生变化时触发，在更新 DOM 之前调用。
• updated: 数据更新且 DOM 重新渲染后调用。
• beforeDestroy: 实例销毁之前调用，此时实例仍然完全可用。常用于清理定时器、解绑事件监听器等。
• destroyed: 实例销毁之后调用，Vue 实例的所有指令都被解绑，所有事件监听器都被移除，所有子实例都被销毁。

javascript
new Vue({
el: '#app-lifecycle',
data: {
message: '生命周期钩子'
},
beforeCreate: function () {
console.log('beforeCreate: 数据和方法都不可用', this.message, this.changeMessage); // undefined undefined
},
created: function () {
console.log('created: 数据和方法已可用，但DOM未挂载', this.message, this.changeMessage); // "生命周期钩子" function
// 可以在这里请求数据
},
beforeMount: function () {
console.log('beforeMount: 模板编译完成，但尚未渲染DOM');
},
mounted: function () {
console.log('mounted: 实例已挂载到DOM', this.$el); // <div>...</div>
// 可以在这里操作DOM或初始化第三方库
},
beforeUpdate: function () {
console.log('beforeUpdate: 数据更新，DOM即将更新');
},
updated: function () {
console.log('updated: 数据更新，DOM已更新');
},
beforeDestroy: function () {
console.log('beforeDestroy: 实例即将销毁');
},
destroyed: function () {
console.log('destroyed: 实例已销毁');
},
methods: {
changeMessage: function () {
this.message = '消息已改变';
}
}
})
对应的 HTML:
“`html

“`
通过在控制台中观察输出，并点击按钮改变数据，可以更好地理解这些钩子的执行顺序。

第四部分：进阶话题（简述）

掌握了 Vue 2 的基础后，你可以进一步学习其生态系统中的其他重要部分，以构建更复杂的应用。

• Vue Router: 官方路由库，用于构建单页面应用的路由。它可以让你将应用的 URL 映射到不同的组件，实现页面间的导航和切换。
• Vuex: 官方状态管理库，用于管理应用中共享的状态。对于大型应用，Vuex 提供了一个集中式的状态管理方案，使得状态的变化可预测、可追踪。
• 单文件组件 (.vue 文件): 在使用构建工具（如 Vue CLI, Webpack）时，可以将组件的模板 (HTML)、脚本 (JavaScript) 和样式 (CSS) 写在一个 .vue 文件中。这提供了更好的组织性和开发体验。每个 .vue 文件通常包含 <template>, <script>, 和 <style> 三个块。
• Slots (插槽): 组件内容分发机制，允许你在父组件中向子组件的特定位置插入内容。
• Mixins (混入): 一种分发 Vue 组件中可复用功能的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进组件本身的选项。

第五部分：为什么学习 Vue 2？（即使有了 Vue 3）

正如前面提到的，学习 Vue 2 依然有其价值：

1. 大量现有项目: 许多公司和开发者在生产环境中使用 Vue 2 构建了他们的应用。如果你需要维护或加入这些项目，掌握 Vue 2 是必需的。
2. 理解 Vue 的演进: Vue 3 是在 Vue 2 的基础上发展而来的，理解 Vue 2 的响应式系统、组件化、模板语法等核心概念，能让你更容易理解 Vue 3 的改进（如 Composition API）以及它们解决的问题。
3. 基础知识通用: 模板语法、指令、组件生命周期、父子通信等大部分核心概念在 Vue 2 和 Vue 3 中是相似或直接沿用的，只是实现方式或API有所变化。

总结

Vue 2 是一个优秀、易学且功能强大的前端框架。通过其简洁的模板语法、高效的响应式系统和灵活的组件化能力，它极大地提升了前端开发效率。本教程带你了解了 Vue 2 的基本概念，包括实例、模板语法、指令、计算属性、侦听器、方法以及组件的定义、通信和生命周期。

虽然 Vue 3 是未来的方向，但学习 Vue 2 为你打开了通往 Vue 世界的大门，让你能够理解现有项目，并为学习更高级的 Vue 3 特性打下坚实的基础。

希望这篇详细的介绍和入门教程能帮助你迈出学习 Vue 2 的第一步。祝你在前端开发的道路上越走越远！

---