Vue.js 教程：入门与介绍 – wiki基地

作者： /

Vue.js 教程：入门与介绍

前端开发的世界日新月异，各种框架和库层出不穷。在众多选择中，Vue.js 凭借其易学易用、灵活高效的特点，迅速崛起并赢得了全球开发者社区的广泛喜爱。无论你是刚踏入前端领域的新手，还是希望从其他框架转向 Vue 的资深开发者，本篇教程都将为你提供一份全面而深入的入门指南，带你了解 Vue.js 是什么，为什么选择它，以及如何迈出学习的第一步。

前言：为什么我们需要前端框架？

在 Web 开发的早期，网页主要由静态的 HTML 构成，配合一些 CSS 进行样式美化。随着互联网的发展，用户对网页的交互性要求越来越高。JavaScript 的出现使得在浏览器端操作 DOM (文档对象模型)、实现动态效果成为可能。然而，当应用变得越来越复杂，尤其是在构建单页面应用 (Single Page Application, SPA) 时，直接操作 DOM 会变得异常繁琐和低效：

  1. 复杂的状态管理： 随着用户交互，页面状态会不断变化，手动追踪和更新 DOM 变得困难且容易出错。
  2. 代码组织混乱： 没有良好的结构，JavaScript 代码很容易变成一团乱麻（俗称“意大利面条式代码”）。
  3. 性能问题： 频繁和不必要的 DOM 操作是网页性能的瓶颈。
  4. 代码复用性差： 难以将页面中的可复用部分抽象出来。

前端框架应运而生，它们提供了一套结构化的方式来构建用户界面，帮助开发者更高效地管理数据、更新视图和组织代码。React、Angular 和 Vue.js 是当今最流行的三大前端框架，它们各自有其特点和适用场景。

第一部分：Vue.js 是什么以及为什么选择它

1. 什么是 Vue.js?

Vue.js（读音 /vjuː/, 类似于 view）是一套用于构建用户界面的渐进式框架。由尤雨溪 (Evan You) 创建，并由一个活跃的核心团队维护。

  • 渐进式 (Progressive): 这是 Vue.js 最独特的特性之一。意味着你可以逐步地、按需地采用 Vue。你可以只用它来增强现有的 HTML 页面的一小部分，也可以用它构建一个大型的、复杂的单页面应用。与其他一些强要求“全家桶”的框架不同，Vue 非常灵活，你可以根据项目需求选择使用其核心库、官方配套库（如 Vue Router 用于路由，Pinia 或 Vuex 用于状态管理）或其他第三方库。
  • 用于构建用户界面: Vue.js 专注于视图层。它提供了一种声明式的方式来描述你的 UI，Vue 会负责高效地将数据渲染到页面上，并在数据变化时更新视图，而无需你手动操作 DOM。

简单来说，Vue.js 的核心思想是通过数据驱动和组件化来简化前端开发。你只需要关注数据的变化，Vue 会自动处理视图的更新。同时，将复杂的界面拆分成可复用的、独立的组件，大大提高了开发效率和可维护性。

2. 为什么选择 Vue.js? (优势)

相较于其他前端框架，Vue.js 有一些显著的优势，使其成为众多开发者的首选：

  • 易学易用 (Approachability): 这是 Vue 最大的亮点之一。如果你已经掌握了 HTML、CSS 和 JavaScript 的基础知识，学习 Vue 会非常快。它的 API 设计简洁直观，文档清晰详尽，即使是初学者也能很快上手开发。你可以从一个简单的 <script> 标签引入开始，逐步深入学习其高级特性。
  • 性能优秀 (Performance): Vue.js 使用了虚拟 DOM (Virtual DOM) 技术，并通过优化策略（如静态提升、补丁优化等）来最小化实际的 DOM 操作，从而保证了高效的渲染和更新性能。在大多数常见的应用场景下，Vue 的性能都能满足需求。
  • 灵活渐进 (Versatility/Progressive): 如前所述，Vue 的渐进式特性意味着你可以根据项目规模和需求灵活地采用。它可以轻松地集成到现有项目中，也可以用于从零开始构建复杂的 SPA。这种灵活性使得 Vue 适用于各种类型的项目。
  • 完善的生态系统 (Ecosystem): Vue 拥有一个强大且不断发展的生态系统，包括官方提供的路由库 (Vue Router)、状态管理库 (Pinia/Vuex)、构建工具 (Vite, Vue CLI – 历史)、测试工具、以及大量的第三方组件库和插件。这些工具为开发大型应用提供了全方位的支持。
  • 友好的社区 (Community): Vue.js 拥有一个庞大且活跃的开发者社区，你可以轻松找到大量的教程、示例、解答和支持。官方文档的中文翻译质量也非常高，为国内开发者提供了便利。
  • 易于维护 (Maintainability): 组件化的开发模式使得代码结构清晰、模块化，提高了代码的可读性和可维护性。当你需要修改或添加功能时，通常只需要关注特定的组件，降低了出错的可能性。

正是这些优势，使得 Vue.js 成为了构建现代 Web 应用，特别是中小型到大型 SPA 的极佳选择。

第二部分：环境搭建 – 迈出第一步

学习任何一个框架，首先都需要搭建开发环境。Vue.js 提供了多种使用方式，从最简单的通过 <script> 标签引入到使用现代化的构建工具。我们将介绍几种主要的方式。

1. 使用 CDN (Content Delivery Network) – 快速体验

这是最快速体验 Vue 的方式，无需安装任何软件（除了浏览器）。你只需在 HTML 文件中引入 Vue 的脚本文件即可。

“`html




Hello Vue!



{{ message }}


“`

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

优点:
* 无需安装，上手极快。
* 适用于简单页面或在现有项目中部分使用 Vue。

缺点:
* 不适合构建大型应用，因为没有模块化、单文件组件等特性。
* 生产环境通常需要压缩版本。

2. 使用 Vite (推荐用于项目开发)

对于任何非简单的项目，推荐使用现代化的构建工具来创建 Vue 项目。Vite 是一个由 Vue 核心团队成员开发的构建工具，它提供了极快的开发服务器启动速度和构建性能。它是目前创建 Vue 3 项目的官方推荐方式。

前提条件:
* 你需要安装 Node.js (推荐 LTS 版本) 和 npm (Node.js 自带) 或 yarn 或 pnpm。

步骤:

  1. 安装 Vite:
    打开终端或命令行工具，运行以下命令创建 Vue 项目（使用 npm）：
    bash
    npm create vue@latest
    或者使用 yarn:
    bash
    yarn create vue@latest
    或者使用 pnpm:
    bash
    pnpm create vue@latest

  2. 根据提示配置项目:
    命令行会引导你进行配置，例如项目名称、是否使用 TypeScript、是否使用 JSX、是否添加 Vue Router、Pinia、Vitest (测试)、Cypress (E2E 测试) 和 ESLint/Prettier (代码规范)。对于入门，你可以先选择默认选项，或者只添加 Router 和 Pinia 以便后续学习。

    “`
    Need to install the following packages:
    [email protected]
    Ok to proceed? (y) y

    Vue.js – The Progressive JavaScript Framework

    √ Project name: … // 输入项目名称，例如 vue-intro
    √ Add TypeScript? … No / Yes
    √ Add JSX Support? … No / Yes
    √ Add Vue Router for Single Page Application development? … No / Yes
    √ Add Pinia for State Management? … No / Yes
    √ Add Vitest for Unit Testing? … No / Yes
    √ Add an End-to-End Testing Solution? » None
    √ Add ESLint for Code Quality? … No / Yes
    √ Add Prettier for Code Formatting? … No / Yes

    Scaffolding project in ./vue-intro…

    Done. Now run:

    cd vue-intro
    npm install // 或 yarn install / pnpm install
    npm run dev // 或 yarn dev / pnpm dev
    “`

  3. 进入项目目录并安装依赖:
    bash
    cd <your-project-name>
    npm install # 或 yarn install / pnpm install

  4. 启动开发服务器:
    bash
    npm run dev # 或 yarn dev / pnpm dev

    终端会输出一个本地开发服务器的地址，通常是 http://localhost:5173/ 或类似的。在浏览器中打开这个地址，你就能看到 Vite 创建的 Vue 项目的欢迎页面了。

优点:
* 极快的开发服务器启动和热更新速度。
* 基于标准的 ES 模块，无需打包即可运行开发环境代码。
* 优秀的构建性能。
* 支持单文件组件 (.vue 文件)。
* 是构建现代 Vue 3 应用的最佳方式。

缺点:
* 需要 Node.js 环境。

注: 在 Vue 3 之前，Vue CLI 是官方推荐的构建工具。虽然现在 Vite 更受欢迎，但 Vue CLI 仍然是一个稳定、功能强大的选择，特别是对于需要高度定制化配置的项目。但对于新项目和入门，Vite 是首选。

第三部分：Vue.js 核心概念详解 (入门基础)

搭建好环境后，我们开始深入学习 Vue.js 的核心概念。这些概念是构建任何 Vue 应用的基础。我们将主要基于 Vue 3 的 Composition API 进行介绍（部分地方会提及 Options API 以作对比）。

1. Vue 应用实例 (App Instance)

每个 Vue 应用都是通过 createApp 函数创建一个应用实例 (Application Instance) 来启动的。

“`javascript
import { createApp } from ‘vue’

const app = createApp({
// 根组件的选项，定义数据、方法、计算属性等
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
})

// 应用实例有自己的方法，例如 use(), component(), directive(), mount() 等
// 将应用实例挂载到 DOM 元素上
app.mount(‘#app’)
“`

这里的 #app 是一个 DOM 选择器，指向你的 HTML 中一个存在的元素。Vue 会将整个应用挂载到这个元素内部，并对其进行控制。通常，这个元素就是应用的根容器。

Options API (Vue 2 & 部分 Vue 3):
“`javascript
import { createApp } from ‘vue’

const app = createApp({
data: function() { // data 是一个函数
return {
message: ‘Hello Options API!’
}
}
});

app.mount(‘#app’)

// Vue 2 的语法是 new Vue({…}).$mount(‘#app’)
``
在 Vue 3 中，createApp返回的应用实例可以被配置（例如app.use(router)），然后mount` 方法才返回根组件实例。这种链式调用更灵活。

2. 模板语法 (Template Syntax)

Vue.js 使用基于 HTML 的模板语法，允许你将数据声明式地绑定到 DOM。

文本插值 {{ }}

最基本的数据绑定形式是文本插值，使用“双大括号” (Mustache 语法)。它会将数据属性的值作为纯文本插入到 DOM 中。

“`html

{{ message }}

``
结果:

你好，Vue!

`

双大括号内的表达式是 JavaScript 表达式，它可以是变量、简单的运算等，但不是完整的 JavaScript 代码块。

指令 (Directives)

指令是带有 v- 前缀的特殊属性。它们用于为模板元素添加响应式行为。

“`html


前往官网




“`

一些常用的指令及其用途：

  • v-text: 更新元素的 textContent。
  • v-html: 更新元素的 innerHTML。
  • v-bind: 动态绑定属性 (如 href, src, class, style)。可以缩写为 :。
  • v-on: 绑定事件监听器 (如 click, input, submit)。可以缩写为 @。
  • v-if, v-else-if, v-else: 条件性渲染元素。
  • v-show: 根据条件切换元素的 CSS display 属性。
  • v-for: 循环渲染列表。
  • v-model: 在表单输入和应用状态之间创建双向绑定。

3. 数据绑定 (Data Binding)

数据绑定是 Vue 的核心能力之一，它将应用的状态（数据）与 DOM 连接起来。

  • 单向绑定 (v-bind 或 :): 数据流是单向的，从数据源流向视图。当数据变化时，视图会更新，但用户在视图上的操作（例如修改输入框的值）不会反过来影响数据源。主要用于绑定属性、类、样式等。
    html
    <button :disabled="isButtonDisabled">提交</button>
    <div :class="{ active: isActive, 'text-danger': hasError }"></div>
    <div :style="{ color: activeColor, fontSize: headerSize + 'px' }"></div>

  • 双向绑定 (v-model): 主要用于表单元素 (<input>, <textarea>, <select>)。它实现了数据和表单输入之间的双向同步：当数据变化时，表单输入的值会更新；当用户在表单输入中修改值时，对应的数据也会自动更新。

    “`html

    你好，{{ name }}


    “`

4. 事件处理 (v-on 或 @)

使用 v-on 指令来监听 DOM 事件，并在触发时执行 JavaScript 代码或调用 Vue 实例中的方法。

“`html


``v-on可以监听任何原生的 DOM 事件（如click,input,submit,mouseover` 等），也可以监听组件发出的自定义事件（后面会提到）。

事件修饰符: Vue 提供了事件修饰符来处理一些常见的事件行为，例如：
* .stop: 阻止事件冒泡 (等同于 event.stopPropagation())。
* .prevent: 阻止默认行为 (等同于 event.preventDefault())。
* .capture: 使用捕获模式。
* .self: 只当事件在该元素本身触发时触发处理函数。
* .once: 事件只触发一次。
* .passive: 提升移动端滚动性能。

示例:
“`html
点击阻止跳转


“`

5. 条件渲染 (v-if, v-show)

你可以根据条件来控制元素的显示与隐藏（或创建与销毁）。

  • v-if: 条件为真时，元素及其子组件会被渲染；条件为假时，元素会被销毁（不在 DOM 中）。它支持 v-else-if 和 v-else 来构建条件块。
    “`html

    欢迎回来！

    请先登录。

    A
    B
    C


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

  • v-show: 条件为真时，元素显示；条件为假时，元素隐藏（通过设置 CSS 的 display: none;）。元素始终存在于 DOM 中。
    html
    <p v-show="isLoading">加载中...</p>
    v-show 更适合需要频繁切换显示状态的元素，因为它只需要切换 CSS 属性，开销较低。v-if 适合那些不经常需要显示/隐藏的元素，因为它涉及 DOM 的创建和销毁，开销相对较大，但在不显示时没有 DOM 开销。

6. 列表渲染 (v-for)

使用 v-for 指令可以基于一个数组或对象来渲染一个列表的元素。

“`html

  • {{ item.text }}

  • {{ index }} – {{ item.text }}

  • {{ index }}. {{ key }}: {{ value }}

``
**key的重要性:**
在使用v-for渲染列表时，**强烈建议**为每个元素提供一个唯一的key属性。key用于 Vue 内部追踪列表中每个节点的身份，从而在列表更新时，Vue 可以更高效地复用和重新排序现有元素，而不是从头渲染。理想情况下，key应该是列表中每个元素的唯一 ID。不要使用索引index作为key`，除非你的列表数据是静态的或者你故意想强制重新渲染。

7. 计算属性 (Computed Properties)

计算属性允许你声明式地根据其他响应式数据计算出一个新的值。这些计算结果会被缓存，只有当其依赖的数据发生变化时，计算属性才会重新求值。

“`html

原字符串: {{ message }}

反转字符串: {{ reversedMessage }}

``
**为什么使用计算属性而不是方法?**
尽管你也可以在模板中使用方法来达到同样的效果 ({{ reverseMessage() }})，但计算属性有以下优势：
1. **缓存:** 计算属性的结果会被缓存。只要其依赖（message）没有改变，即使多次访问reversedMessage`，计算属性也不会重新执行，而是直接返回缓存的结果。方法则每次访问都会执行。
2. 可读性: 在模板中使用计算属性通常更简洁和声明式。

计算属性适用于处理复杂逻辑、过滤或转换数据后在模板中使用的情况。

8. 侦听器 (Watchers)

侦听器允许你“侦听”某个数据属性的变化，并在它变化时执行一个副作用操作。这通常用于执行异步操作、昂贵操作或响应数据的特定变化。

“`html

{{ answer }}

“`
侦听器通常在你需要在数据变化时执行一些非数据计算相关的逻辑时使用（例如发起网络请求，或者复杂的 DOM 操作）。如果只是为了根据现有数据计算出一个新值用于模板显示，应优先使用计算属性。

9. 组件基础 (Components)

组件是 Vue 应用的基本构建块。它们是可复用的、独立的界面单元，可以包含自己的数据、模板、脚本和样式。将应用拆分成组件，可以大大提高代码的组织性、可维护性和复用性。

在 Vite 创建的项目中，组件通常是单文件组件 (Single-File Components, SFC)，它们以 .vue 结尾，并将模板 (<template>)、脚本 (<script>) 和样式 (<style>) 组合在同一个文件中。

示例 (src/components/HelloWorld.vue):
“`vue

``
在一个.vue文件中：
*