最新 Vue.js 教程入门篇 – wiki基地

作者： /

深入浅出：最新 Vue.js 3 入门权威指南 (2024版)

前言：拥抱现代前端开发的利器

在当今前端开发领域，框架和库层出不穷，但 Vue.js 凭借其渐进式、易于上手、性能出色以及活跃的社区等诸多优点，始终占据着重要的地位。特别是自 Vue 3 发布以来，其在性能、代码组织、TypeScript 支持等方面有了显著提升，使其成为构建现代、高效、可维护 Web 界面的绝佳选择。

本教程旨在为初学者提供一份全面、详细且与时俱进的 Vue.js 3 入门指南。无论你是有一定前端基础想扩展技能栈，还是完全从零开始探索现代 JavaScript 框架，本文都将引导你一步步踏入 Vue.js 的世界，掌握其核心概念和基本用法，为后续的深入学习和项目实战打下坚实的基础。我们将从 Vue.js 的基本概念讲起，涵盖环境搭建、核心语法、组件化开发等关键知识点，并通过丰富的示例代码帮助你理解和实践。

文章目标读者：

  • 了解 HTML、CSS 和 JavaScript 基础知识的前端初学者。
  • 希望学习或转向 Vue.js 的开发者。
  • 希望了解 Vue 3 最新特性和最佳实践的开发者。

预计阅读时间： 约 45-60 分钟

第一章：Vue.js 简介 —— 为什么选择 Vue？

1.1 什么是 Vue.js？

Vue (发音为 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。与庞大的单体框架不同，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。同时，Vue 也完全有能力驱动复杂的单页应用 (SPA)，并拥有配套的官方库（如 Vue Router 用于路由管理，Pinia 用于状态管理）和丰富的社区生态。

1.2 Vue.js 的核心优势：

  • 渐进式框架 (Progressive Framework): 你可以只使用 Vue 的一部分功能，将其嵌入现有项目中，也可以用它构建一个完整的、复杂的单页应用。这种灵活性使得 Vue 的学习曲线相对平缓。
  • 易于上手 (Approachable): 熟悉 HTML、CSS、JavaScript 的开发者可以很快地掌握 Vue 的基本用法。其模板语法直观易懂，API 设计简洁。
  • 性能卓越 (Performant): Vue 3 通过基于 Proxy 的响应式系统、优化的虚拟 DOM (Virtual DOM) 算法以及编译时优化（如静态节点提升、缓存事件处理函数等），在运行时性能上表现优异，体积也更小。
  • 代码组织 (Composition API): Vue 3 引入了 Composition API（组合式 API），它提供了一种更灵活、更可复用、更利于 TypeScript 类型推导的方式来组织组件逻辑，特别适合大型复杂应用。当然，Vue 3 仍然完全兼容并支持经典的 Options API（选项式 API）。本教程将主要使用更现代且推荐的 <script setup> 结合 Composition API 的方式。
  • 强大的生态系统 (Versatile Ecosystem): Vue 拥有官方维护的核心库（Vue Router、Pinia），以及由社区贡献的大量高质量插件和工具，可以满足各种开发需求。
  • 优秀的文档和社区 (Great Documentation & Community): Vue 官方文档清晰、详尽，被广泛认为是业界典范。活跃的社区也意味着遇到问题时更容易找到解决方案和获得帮助。

第二章：准备工作 —— 环境搭建与第一个 Vue 应用

2.1 前置知识要求

在开始学习 Vue.js 之前，你需要具备以下基础：

  • HTML: 了解基本的 HTML 标签、结构和语义。
  • CSS: 熟悉 CSS 选择器、样式规则和布局（如 Flexbox 或 Grid）。
  • JavaScript:
    • 掌握 JavaScript 的基本语法（变量、数据类型、函数、条件语句、循环等）。
    • 理解 ES6+ 的核心特性，如 let/const、箭头函数、模板字符串、解构赋值、模块 (import/export) 等。Vue 3 广泛使用了这些现代 JavaScript 特性。
    • 对 DOM 操作有基本了解（虽然 Vue 会帮我们处理大部分 DOM 操作）。

2.2 Node.js 环境

现代前端开发离不开 Node.js。Vue CLI（命令行工具）和 Vite（下一代前端构建工具，也是 Vue 官方推荐）都需要 Node.js 环境。请确保你的系统安装了较新版本的 Node.js（通常建议 LTS 版本）。

你可以访问 Node.js 官网 下载并安装。安装完成后，可以在终端（命令行）中运行以下命令检查是否安装成功：

bash
node -v
npm -v

npm (Node Package Manager) 是随 Node.js 一起安装的包管理工具。

2.3 创建你的第一个 Vue 3 项目 (推荐使用 Vite)

Vue 官方现在推荐使用 create-vue（基于 Vite）来快速创建 Vue 3 项目。Vite 提供了极速的冷启动和热模块更新 (HMR) 体验。

打开你的终端，运行以下命令：

“`bash

推荐使用 npm 6.x+ 或 yarn

npm create vue@latest

或者使用 yarn

yarn create vue@latest

“`

这个命令会引导你进行一系列配置，例如：

  • Project name: 项目名称 (例如 my-vue-app)
  • Add TypeScript? 是否添加 TypeScript 支持 (新手可以选 No，但推荐 Yes)
  • Add JSX Support? 是否添加 JSX 支持 (通常选 No)
  • Add Vue Router for Single Page Application development? 是否添加 Vue Router (用于构建单页应用，新手可以先选 No)
  • Add Pinia for state management? 是否添加 Pinia (用于状态管理，新手可以先选 No)
  • Add Vitest for Unit Testing? 是否添加 Vitest (用于单元测试，新手可以先选 No)
  • Add Cypress for End-to-End testing? 是否添加 Cypress (用于端到端测试，新手可以先选 No)
  • Add ESLint for code quality? 是否添加 ESLint (用于代码规范检查，推荐 Yes)
  • Add Prettier for code formatting? 是否添加 Prettier (用于代码格式化，推荐 Yes)

根据提示选择适合你的选项（对于入门，可以暂时都选 No，或者只选 ESLint 和 Prettier）。

创建完成后，根据终端提示进入项目目录并安装依赖：

bash
cd my-vue-app
npm install # 或者 yarn install

最后，启动开发服务器：

bash
npm run dev # 或者 yarn dev

Vite 会启动一个本地开发服务器。在浏览器中打开终端输出的地址（通常是 http://localhost:5173），你应该能看到 Vue 的欢迎页面！

2.4 项目结构概览 (基于 Vite 的模板)

一个典型的 Vue 3 + Vite 项目结构大致如下：

my-vue-app/
├── public/ # 静态资源，不会被构建处理
│ └── favicon.ico
├── src/ # 源代码目录
│ ├── assets/ # 静态资源 (会被 Vite 处理)
│ │ └── base.css
│ ├── components/ # 可复用的 Vue 组件
│ │ └── HelloWorld.vue
│ ├── App.vue # 根组件
│ └── main.js # 应用入口文件
├── index.html # 主 HTML 文件 (应用挂载点)
├── package.json # 项目依赖和脚本配置
├── vite.config.js # Vite 配置文件
├── README.md # 项目说明文件
└── ... # 其他配置文件 (如 .eslintrc.cjs, .prettierrc.json)

  • index.html: 是应用的入口 HTML 文件，你会看到一个 <div id="app"></div>，这是 Vue 应用挂载的 DOM 元素。
  • src/main.js (或 main.ts): 是 JavaScript 的入口文件。它负责创建 Vue 应用实例并将其挂载到 index.html 中的 #app 元素上。
  • src/App.vue: 是应用的根组件。所有其他的组件都将作为它的子组件嵌套在其中。
  • src/components/: 存放可复用的子组件。
  • .vue 文件：这是 Vue 的单文件组件 (Single-File Component, SFC)，它将模板 (HTML)、逻辑 (JavaScript) 和样式 (CSS) 封装在同一个文件中，是 Vue 开发的核心组织方式。

第三章：Vue 核心概念 —— 构建动态界面

现在，让我们深入了解 Vue 的核心概念和语法。我们将主要在 .vue 文件中进行演示，特别是 <script setup> 语法块，这是 Vue 3 中编写组件逻辑的推荐方式。

3.1 Vue 应用实例与挂载

在 src/main.js 文件中，你会看到类似这样的代码：

“`javascript
// src/main.js
import { createApp } from ‘vue’
import ‘./assets/base.css’ // 引入全局 CSS
import App from ‘./App.vue’

// 创建 Vue 应用实例
const app = createApp(App)

// 将应用实例挂载到 index.html 的 #app 元素上
app.mount(‘#app’)
“`

  • createApp(App): 使用根组件 App 创建一个 Vue 应用实例。
  • app.mount('#app'): 将这个应用实例“挂载”到 HTML 中 ID 为 app 的 DOM 元素上。Vue 将接管这个元素及其内部的所有内容。

3.2 单文件组件 (SFC) 结构

一个典型的 .vue 文件包含三个部分：

“`vue

“`

  • <template>: 定义组件的 HTML 结构。Vue 的模板语法是基于标准 HTML 的扩展。
  • <script setup>: 使用 Composition API 编写组件逻辑的地方。这里定义的变量、函数等可以直接在 <template> 中使用。这是 Vue 3 的推荐写法，更简洁。
  • <style scoped>: 定义组件的 CSS 样式。scoped 属性确保这些样式只作用于当前组件的元素，避免全局样式污染。

3.3 模板语法 (Template Syntax)

Vue 使用基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

  • 文本插值 (Text Interpolation): 使用双大括号 {{ }} (Mustache 语法) 将数据绑定到文本内容。

    “`vue


    ``{{ }}` 内部可以放任何有效的 JavaScript 表达式。

  • 属性绑定 (Attribute Bindings): 使用 v-bind 指令动态绑定 HTML 元素的属性。

    “`vue


    ``v-bind的常用简写是冒号:`。

  • 指令 (Directives): 指令是带有 v- 前缀的特殊属性，用于在 DOM 上应用特殊的响应式行为。

    • v-model: 在表单输入元素 (如 <input>, <textarea>, <select>) 上创建双向数据绑定。用户输入会更新数据，数据变化也会更新输入框的值。

      “`vue


      ``
      *      v-if,v-else-if,v-else: 根据表达式的真假条件性地渲染 DOM 元素。v-if` 是“真实”的条件渲染，如果条件为假，元素及其子组件会被销毁和重建。

      “`vue


      ``
      *      v-show: 也用于条件性显示元素，但它是通过切换元素的 CSSdisplay` 属性来实现。元素始终会被渲染，只是可能不可见。适用于需要频繁切换显隐的场景。

      “`vue


      ``
      *      v-for`: 基于源数据（数组或对象）多次渲染元素。

      “`vue


      ``
      **重要:** 使用      v-for时，强烈建议为每个项提供一个唯一的key属性 (:key=”…”)。这有助于 Vue 跟踪每个节点的身份，从而高效地更新 DOM。通常使用数据项的唯一 ID 作为key`。

    • v-on: 监听 DOM 事件，并在事件触发时执行 JavaScript 代码或方法。

      “`vue

      ``v-on的常用简写是@` 符号。

3.4 响应式基础 (Reactivity Fundamentals)

Vue 的核心特性之一就是其响应式系统。当你修改 JavaScript 状态时，DOM 会自动更新。在 Vue 3 的 Composition API 中，我们主要使用 ref 和 reactive 来创建响应式状态。

  • ref: 用于创建任意类型的响应式引用。它将传入的值包装在一个带有 .value 属性的对象中。在 <script setup> 中访问或修改 ref 的值时需要使用 .value，但在 <template> 中使用时 Vue 会自动“解包”，可以直接使用变量名。

    “`vue


    ```

  • reactive: 用于创建对象或数组的响应式代理。它返回对象本身的响应式代理，而不是包装后的对象。访问属性时不需要 .value。reactive 不能用于基本类型值 (string, number, boolean)。

    ```vue


    ```

  • ref vs reactive:

    • 用 ref 处理基本类型值和需要整个替换的引用（例如，重新赋值整个数组或对象）。
    • 用 reactive 处理包含多个属性的复杂对象，当你主要关心对象内部属性的变化时。
    • 在 <script setup> 中，ref 需要 .value 访问，reactive 不需要。
    • 在 <template> 中，两者访问方式通常一致（ref 会自动解包）。
    • 目前社区更倾向于优先使用 ref，因为它对所有类型都适用，行为更一致，尤其是在解构或传递给函数时不容易丢失响应性。

3.5 计算属性 (Computed Properties)

计算属性用于声明基于响应式状态派生出的值。它们是缓存的，只有在相关依赖发生改变时才会重新计算。这比在模板中写复杂表达式更高效且可维护。

使用 computed 函数创建计算属性：

```vue


```

计算属性非常适合处理模板中需要复杂逻辑才能展示的数据。

3.6 侦听器 (Watchers)

侦听器用于在某个响应式状态变化时执行副作用 (side effects)，例如发起异步请求、操作 DOM (应谨慎使用) 或执行一些需要特定时机的逻辑。

使用 watch 或 watchEffect 函数创建侦听器：

  • watch: 需要明确指定要侦听的源，并在回调函数中接收新值和旧值。它默认是懒执行的 (lazy)，即只有在侦听源首次变化时才执行回调。

    ```vue


    ```

  • watchEffect: 不需要指定侦听源，它会自动追踪回调函数中访问的所有响应式依赖。回调函数会立即执行一次（收集依赖），然后在任何依赖变化时再次执行。

    ```vue


    ```

  • Computed vs Watch:

    • computed 用于派生新的数据，强调返回值。
    • watch / watchEffect 用于在数据变化时执行副作用，不关心返回值。
    • 优先使用 computed，只有在需要执行异步操作或命令式代码（副作用）时才考虑 watch。

3.7 Class 与 Style 绑定

动态地绑定 HTML 元素的 class 和 style 是常见需求。Vue 提供了强大的 v-bind (或 :) 支持。

  • 绑定 Class: 可以绑定字符串、对象或数组。

    ```vue

    ```

  • 绑定 Style: 可以绑定对象或数组（较少用）。样式属性名建议使用驼峰式 (camelCase) 或短横线分隔 (kebab-case) (需要引号)。

    ```vue


    ```

第四章：组件化开发基础

组件化是 Vue 的核心思想之一。它允许我们将 UI 划分为独立、可复用的单元。

4.1 创建和使用组件

  1. 创建组件文件: 在 src/components/ 目录下创建一个新的 .vue 文件，例如 MyButton.vue。
  2. 编写组件内容: 在 MyButton.vue 中定义模板、脚本和样式。
  3. 在父组件中导入和注册: 在需要使用该按钮的父组件（例如 App.vue）的 <script setup> 中导入它。在 <script setup> 中，导入的组件可以直接在 <template> 中使用。

```vue
// src/components/MyButton.vue

```

```vue
// src/App.vue (父组件)


```

4.2 Props: 父组件向子组件传递数据

  • 父组件通过在子组件标签上绑定属性 (使用 v-bind 或简写 :) 来向子组件传递数据。
  • 子组件使用 defineProps 宏来声明它期望接收的 props，包括类型、是否必需、默认值和校验器。
  • Props 是单向数据流：父组件的数据变化会向下流到子组件，但子组件不应该直接修改 props。

4.3 Emits: 子组件向父组件发送消息

  • 当子组件内部发生某些事情（如用户交互）需要通知父组件时，它应该触发 (emit) 一个自定义事件。
  • 子组件使用 defineEmits 宏来声明它可能触发的事件名。
  • 使用 emit('eventName', optionalPayload) 来触发事件，可以附带参数。
  • 父组件使用 v-on (或简写 @) 在子组件标签上监听这些自定义事件，并指定一个处理函数。

4.4 插槽 (Slots): 内容分发

插槽允许父组件向子组件的模板中注入内容。这使得组件更加灵活和可复用。

```vue
// src/components/CardLayout.vue (一个带插槽的布局组件)

```

```vue
// src/App.vue (使用 CardLayout)


```

  • 默认插槽: 子组件中的 <slot></slot>。父组件直接放在子组件标签内的内容会填充到这里。
  • 具名插槽: 子组件中的 <slot name="header"></slot>。父组件使用 <template v-slot:header> (可简写为 #header) 来指定内容填充到哪个插槽。
  • 作用域插槽: 子组件通过在 <slot> 标签上绑定属性 (如 :timestamp="Date.now()")，将数据传递给父组件提供的插槽内容。父组件使用 v-slot:footer="slotProps" (或 #footer="slotProps") 接收这些数据。

第五章：生命周期钩子 (Lifecycle Hooks)

Vue 组件实例在创建、挂载、更新和销毁过程中会经历一系列阶段。Vue 提供了生命周期钩子函数，允许我们在这些特定阶段执行自定义逻辑。

在 <script setup> 中，生命周期钩子需要从 vue 导入，并以 on 开头：

```vue


```

常用的生命周期钩子 (Composition API):

  • onMounted: 组件挂载后。
  • onUpdated: 组件更新后。
  • onUnmounted: 组件卸载前。
  • onBeforeMount: 组件挂载前。
  • onBeforeUpdate: 组件更新前。
  • onBeforeUnmount: 组件卸载前。
  • onErrorCaptured: 捕获子孙组件错误时。
  • onRenderTracked / onRenderTriggered: (仅开发模式) 用于调试响应式系统。

注意: <script setup> 本身的代码执行时机相当于 beforeCreate 和 created。因此，在 <script setup> 中不需要显式使用 onBeforeCreate 或 onCreated。

第六章：下一步与资源推荐

恭喜你！你已经掌握了 Vue.js 3 的核心概念和基本用法。这为你构建交互式 Web 应用打下了坚实的基础。但这仅仅是开始，Vue 的世界还有更多值得探索：

6.1 深入学习方向：

  • 路由管理 (Vue Router): 学习如何使用官方的 vue-router 库来构建单页应用 (SPA)，管理页面导航和视图切换。
  • 状态管理 (Pinia): 学习使用官方推荐的 Pinia 库来管理跨组件共享的应用状态，特别是在中大型应用中非常有用。Pinia 相比之前的 Vuex 更简洁、类型支持更好。
  • 高级组件特性: 深入理解 provide/inject (依赖注入)、异步组件、动态组件、自定义指令、渲染函数和 JSX。
  • TypeScript 与 Vue: 如果你选择了 TypeScript，深入学习如何在 Vue 项目中充分利用 TypeScript 的类型检查和智能提示优势。
  • 网络请求: 学习如何在 Vue 组件中（通常在 onMounted 或方法中）使用 fetch API 或 axios 等库与后端 API 进行数据交互。
  • 测试: 学习使用 Vitest、Vue Testing Library 或 Cypress 为你的 Vue 应用编写单元测试、组件测试和端到端测试。
  • 构建与部署: 了解 Vite 的构建命令 (npm run build)，以及如何将构建产物部署到服务器或静态托管平台。
  • 性能优化: 学习 Vue 应用的性能分析和优化技巧。
  • 服务端渲染 (SSR) / 静态站点生成 (SSG): 探索 Nuxt.js (基于 Vue 的高级框架) 来实现 SSR 或 SSG，以获得更好的 SEO 和首屏加载性能。

6.2 推荐资源：

结语：开启你的 Vue 开发之旅

Vue.js 以其优雅的设计和强大的功能，为前端开发者提供了一种愉悦而高效的开发体验。通过本教程的学习，你已经掌握了 Vue 3 的基础知识，了解了其核心概念，并动手创建了你的第一个 Vue 应用。

记住，学习编程和框架是一个持续实践和探索的过程。不要害怕犯错，多动手编写代码，尝试构建一些小项目来巩固所学知识。积极参与社区，阅读优秀的代码，不断挑战自己。

希望这篇详尽的入门教程能帮助你顺利开启 Vue.js 的开发之旅。祝你编码愉快，用 Vue 构建出色的用户界面！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部