Vue 2 入门：从零开始学习前端框架
随着现代 Web 应用的日益复杂，前端框架成为了开发不可或缺的工具。其中，Vue.js 以其渐进式、易学易用和高性能的特点，受到了广大开发者的青睐。本文将带领完全没有 Vue.js 基础的你，从零开始，逐步掌握 Vue 2 的核心概念和开发实践。
导言：为什么选择 Vue 2？
Vue.js (通常简称为 Vue) 是一个用于构建用户界面的渐进式框架。与大型框架如 Angular 不同，Vue 被设计为可以自底向上逐层应用。这意味着你可以将 Vue 用作小型交互组件的库，也可以构建大型的单页应用 (SPA)。
在 Vue 2 的生态系统中，有着成熟的工具链、丰富的文档和活跃的社区。虽然 Vue 3 已发布，但 Vue 2 仍然在许多现有项目和公司中广泛使用，理解其核心原理对于前端开发者来说至关重要。
Vue 2 的主要优势包括：
- 易学易用： 简洁的 API 和清晰的文档，让你能够快速上手。
- 渐进式： 可以逐步引入 Vue 到现有项目，按需使用。
- 高性能： 虚拟 DOM 和优化机制保证了渲染效率。
- 组件化： 模块化的开发方式，提高代码复用性和可维护性。
- 丰富的生态： 拥有 Vue Router、Vuex、Vue CLI 等官方工具，覆盖了开发过程的方方面面。
第一部分：准备工作
在开始编写代码之前，我们需要搭建一个基础的开发环境。
-
Node.js 和 npm/yarn 安装：
Vue 的很多开发工具都依赖于 Node.js。请访问 Node.js 官网 (nodejs.org) 下载并安装最新稳定版。安装 Node.js 会同时安装 npm (Node Package Manager)。你也可以选择安装更快的包管理器 yarn (npm install -g yarn)。 -
代码编辑器：
强烈推荐使用 Visual Studio Code (VS Code)，它拥有强大的扩展生态，例如 Vetur (对 Vue 文件提供语法高亮、智能提示等支持)。 -
浏览器：
推荐使用 Chrome 或 Firefox，并安装 Vue Devtools 浏览器扩展。这对于调试 Vue 应用至关重要。
第二部分：你的第一个 Vue 2 应用
我们先从最简单的方式开始——通过 CDN 引入 Vue，无需复杂的构建配置。
创建一个 index.html 文件：
“`html
{{ message }}
现在你看到了我
计算属性：{{ reversedMessage }}
待办事项列表
- {{ todo.text }}
你输入了: {{ newMessage }}
“`
打开 index.html，你将看到一个由 Vue 驱动的简单页面。让我们分解一下其中的关键概念：
-
Vue 实例 (
new Vue())：
每个 Vue 应用都是通过创建一个新的Vue实例来启动的。它接收一个选项对象，其中包含数据、模板、挂载元素等配置。el: '#app'：指定 Vue 实例将挂载到的 DOM 元素。data：一个对象，Vue 会将其属性转换为响应式数据。当这些数据发生变化时，视图会自动更新。methods：定义属于 Vue 实例的方法，通常用于响应用户交互或执行业务逻辑。computed：计算属性。它们是基于data中现有响应式数据计算而来的属性。与methods相比，计算属性会缓存其结果，只在其依赖的响应式数据发生变化时才重新计算，因此性能更优。watch：侦听器。当你需要在某个数据变化时执行一些异步或开销较大的操作时，可以使用侦听器。它会“侦听”一个数据属性的变化，并在变化时执行回调函数。
-
模板语法：
- 数据绑定 (
{{ }})： 双大括号语法用于将data中的数据插入到 HTML 模板中。当data.message变化时，<h1>标签的内容会自动更新。 - 指令 (
v-)： Vue 提供了许多内置指令，以v-开头，用于在 HTML 元素上应用特殊的行为。v-if="seen"：根据seen的布尔值来条件性地渲染元素。v-for="todo in todos"：循环渲染列表。:key="todo.id"是重要的，它帮助 Vue 追踪每个列表项的身份，从而优化渲染性能。v-on:click="reverseMessage"(简写@click="reverseMessage")：监听 DOM 事件，当点击按钮时调用reverseMessage方法。v-bind:href="url"(简写:href="url")：用于动态绑定 HTML 属性。v-model：实现表单输入和应用状态之间的双向绑定，常用于<input>、<textarea>、<select>等表单元素。
- 数据绑定 (
第三部分：组件化
组件是 Vue 应用的核心。它们是可复用的 Vue 实例，带有预定义的模板、脚本和样式。组件化让应用开发更模块化、更易于管理。
在上面的 index.html 中，我们可以在 Vue 实例外部定义一个全局组件：
“`html
<div id="app">
<!-- ... 之前的内容 ... -->
<my-component></my-component>
</div>
<script>
// 定义一个全局组件
Vue.component('my-component', {
template: '<div>这是一个自定义组件！<button @click="count++">点击了 {{ count }} 次</button></div>',
data: function () { // 组件的 data 必须是一个函数，返回一个对象
return {
count: 0
}
}
});
var app = new Vue({
el: '#app',
data: { /* ... */ },
methods: { /* ... */ },
computed: { /* ... */ }
});
</script>