---

Vue.js 中文教程：新手入门指南

引言

在当今前端开发领域，Vue.js 凭借其渐进式框架的特性、易学易用、高性能和灵活的生态系统，迅速成为开发者们的宠儿。无论是开发单页面应用 (SPA)、大型企业级应用，还是简单的组件嵌入，Vue.js 都能提供强大而优雅的解决方案。

本教程旨在为完全没有 Vue.js 经验的初学者提供一份全面的入门指南，帮助您从零开始，逐步掌握 Vue.js 的核心概念和开发流程。

什么是 Vue.js？

Vue.js（通常简称为 Vue）是一个用于构建用户界面的渐进式 JavaScript 框架。它的核心库只关注视图层，易于与其它库或已有项目整合。同时，Vue.js 也完全能够驱动复杂的单页面应用，因为它提供了配套的工具和库，如 Vue Router（路由）、Vuex/Pinia（状态管理）、Vite/Vue CLI（项目构建）等。

为什么选择 Vue.js？

1. 易学易用：Vue.js 的 API 设计简洁直观，文档详尽且提供中文版本，上手难度低，对于有 HTML、CSS 和 JavaScript 基础的开发者非常友好。
2. 渐进式框架：您可以逐步采用 Vue。可以在现有项目中只使用它的一小部分，也可以构建一个完整的单页面应用。这种灵活性使得 Vue 适用于各种规模的项目。
3. 高性能：Vue.js 采用虚拟 DOM 技术和优化后的响应式系统，能够高效地更新视图，提供出色的运行时性能。
4. 生态系统完善：拥有强大的官方工具和库支持，以及活跃的社区，能够解决开发中遇到的各种问题。
5. 中文社区活跃：对于中文使用者而言，拥有大量的中文教程、文章和社区讨论，学习资源丰富。

先决条件

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

• HTML：了解 HTML 结构和标签。
• CSS：了解如何使用 CSS 为网页添加样式。
• JavaScript (ES6+)：这是最重要的。您需要熟悉 JavaScript 的基础语法，包括变量、函数、数组、对象、条件语句、循环以及 ES6+ 的一些新特性（如箭头函数、const/let、模板字符串、解构赋值等）。

第一章：快速入门

本章将引导您搭建 Vue.js 开发环境，并创建您的第一个 Vue 应用。

1. 安装与使用

Vue.js 有多种使用方式，最简单的是通过 CDN 引入，适合快速原型开发或小型项目。对于更复杂的项目，推荐使用构建工具。

方法一：通过 CDN 引入 (适用于快速原型)

您可以在 HTML 文件中直接引入 Vue.js：

“`html

“`

保存为 index.html 并用浏览器打开，您将看到一个显示“你好，Vue！”的标题和一个按钮。点击按钮，文字会反转。

方法二：使用构建工具 (推荐用于实际项目)

对于生产级别的应用，通常会使用构建工具（如 Vite 或 Vue CLI）来创建项目。Vite 是 Vue 官方推荐的下一代前端工具，速度更快。

步骤 1：安装 Node.js
请确保您的电脑已安装 Node.js（推荐 LTS 版本）。您可以访问 Node.js 官网 下载并安装。安装完成后，打开命令行工具（如 Git Bash, CMD, PowerShell, Terminal），输入 node -v 和 npm -v 检查是否安装成功。

步骤 2：使用 Vite 创建 Vue 项目
在您希望创建项目的目录下，打开命令行工具，运行以下命令：

“`bash

创建一个新的 Vue 项目 (选择 Vue 作为框架)

npm create vue@latest

根据提示操作：

Project name: my-vue-app

Add TypeScript? No

Add JSX Support? No

Add Vue Router? No

Add Pinia? No

Add Vitest? No

Add Cypress? No

Add ESLint? No

进入项目目录

cd my-vue-app

安装依赖

npm install

运行开发服务器

npm run dev
“`

成功运行后，您会在命令行中看到一个本地开发服务器的地址（通常是 http://localhost:5173/）。在浏览器中打开此地址，您将看到一个默认的 Vue 欢迎页面。

项目结构概览 (Vite 创建的项目)

my-vue-app/
├── public/ # 静态资源目录
├── src/ # 源代码目录
│ ├── assets/ # 静态资源 (图片、字体等)
│ ├── components/ # Vue 组件目录
│ │ └── HelloWorld.vue # 示例组件
│ ├── App.vue # 根组件
│ ├── main.js # 应用入口文件
│ └── style.css # 全局样式
├── index.html # 项目的入口 HTML 文件
├── package.json # 项目依赖和脚本配置
├── vite.config.js # Vite 配置文件
└── ...

main.js 是应用的入口文件，它负责创建 Vue 应用实例并将其挂载到 index.html 中的 #app 元素上：

“`javascript
// src/main.js
import { createApp } from ‘vue’
import ‘./style.css’
import App from ‘./App.vue’

createApp(App).mount(‘#app’)
“`

App.vue 是根组件，所有的应用内容都将从这里开始。

第二章：核心概念

本章将深入探讨 Vue.js 的核心构建块。

1. Vue 应用实例 (createApp)

每个 Vue 应用都是通过 createApp 函数创建一个应用实例开始的：

javascript
import { createApp } from 'vue'
const app = createApp({
// 选项，如 data, methods, components 等
})
app.mount('#app') // 将应用挂载到 DOM 元素

在 Vue 3 中，我们通常使用 Composition API (setup 函数) 来组织组件逻辑。

2. 响应式数据 (ref 和 reactive)

Vue.js 的核心特性之一是其响应式系统。当数据发生变化时，视图会自动更新。

• ref：用于包装原始值（字符串、数字、布尔值等）或复杂类型，使其成为响应式对象。通过 .value 访问和修改其内部值。

  javascript
import { ref } from 'vue';
const count = ref(0); // 创建一个响应式数字
console.log(count.value); // 0
count.value++; // 修改值，视图会更新

• reactive：用于创建响应式的对象或数组。

  javascript
import { reactive } from 'vue';
const state = reactive({
count: 0,
name: 'Vue'
});
console.log(state.count); // 0
state.count++; // 修改值，视图会更新

  通常，ref 用于原始值，reactive 用于对象。在 setup 函数中，我们一般将 ref 和 reactive 返回，供模板使用。

3. 方法 (methods 或 setup 函数中的函数)

方法用于封装业务逻辑，处理用户交互等。

在 Composition API 中，您直接在 setup 函数中定义函数即可：

“`vue

“`

4. 计算属性 (computed)

计算属性是基于它们的响应式依赖进行缓存的。只有当依赖的响应式数据发生变化时，它才会重新求值。这在需要对现有数据进行复杂计算或组合时非常有用。

“`vue

“`

5. 侦听器 (watch 和 watchEffect)

侦听器允许您在响应式数据发生变化时执行副作用（如执行异步操作、修改 DOM 等）。

• watch：明确指定要侦听的数据源。

  “`vue
  
  

  
  “`

• watchEffect：自动追踪其回调函数内部所有响应式依赖。当依赖的任何一个发生变化时，回调函数都会重新执行。

  javascript
import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => console.log(count.value)); // 0
count.value++; // 打印 1

第三章：模板语法

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

1. 文本插值 ({{ }})

最基本的数据绑定，用于显示数据。

“`html

消息：{{ message }}

“`

2. 属性绑定 (v-bind:attribute 或 :attribute)

用于动态绑定 HTML 属性，例如 id, class, src 等。

“`html

“`

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

根据条件决定元素是否渲染或显示。

• v-if / v-else-if / v-else：条件为假时，元素及其子组件会被销毁。

  html
<h1 v-if="awesome">Vue 很棒!</h1>
<h1 v-else>哦不!</h1>

• v-show：条件为假时，元素仍然会被渲染，只是 CSS display 属性会被设置为 none。

  html
<h1 v-show="awesome">Vue 很棒!</h1>

4. 列表渲染 (v-for)

基于源数据多次渲染元素或模板块。

“`html

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

“`

key 属性非常重要，它帮助 Vue 追踪每个节点的身份，从而高效地复用和重新排序现有元素。

5. 事件处理 (v-on:event 或 @event)

监听 DOM 事件，并在触发时执行 JavaScript。

“`html
点击我

点击我
“`

可以传递参数：

html
<button @click="greet('Hello Vue')">打招呼</button>

事件修饰符：

“`html

“`

6. 双向数据绑定 (v-model)

主要用于表单输入元素，实现数据和视图之间的双向绑定。

“`html

消息是: {{ message }}

“`

第四章：组件

组件是 Vue.js 应用的基石。它们是可复用的 Vue 实例，带有预定义的选项。

1. 定义与注册组件

在 Vue CLI/Vite 项目中，我们通常使用 .vue 单文件组件 (SFC)。

“`vue

“`

在父组件中使用它：

“`vue

“`

2. Props (父组件向子组件传值)

Props 允许父组件向子组件传递数据。

“`vue

“`

父组件：

“`vue

“`

3. Emits (子组件向父组件通信)

子组件可以通过 $emit 触发自定义事件，父组件通过 v-on 监听这些事件。

“`vue

“`

父组件：

“`vue

“`

4. 插槽 (Slots)

插槽是 Vue 实现内容分发机制。它允许父组件在子组件内部的指定位置插入任意内容。

“`vue

“`

父组件使用 LayoutComponent：

“`vue

“`

第五章：深入进阶 (简要提及)

当您掌握了上述核心概念后，可以进一步探索 Vue.js 的更高级特性。

1. 生命周期钩子

每个 Vue 组件从创建到销毁都经历一系列的阶段，每个阶段都提供了钩子函数供您在特定时机执行代码。

常用的生命周期钩子：

• onMounted()：组件挂载到 DOM 后。
• onUpdated()：组件响应式数据更新，导致 DOM 重新渲染后。
• onUnmounted()：组件从 DOM 卸载后。

“`vue

“`

2. Vue Router (路由)

用于构建单页面应用的路由解决方案，实现不同 URL 路径对应不同视图的切换。

3. Vuex / Pinia (状态管理)

当应用变得复杂，组件之间需要共享和管理大量状态时，Vuex（Vue 2 时代主流）或 Pinia（Vue 3 推荐）提供了一个集中式的状态管理模式。

4. 动画与过渡

Vue 提供了 <Transition> 和 <TransitionGroup> 组件，可以轻松地为元素或组件的进入/离开、列表排序等添加过渡效果。

5. Teleport (传送)

可以将组件的一部分模板渲染到 DOM 中当前组件层级之外的其他位置，例如模态框、通知等。

结论与下一步

恭喜您！通过本教程的学习，您已经掌握了 Vue.js 的基本概念、模板语法和组件化开发。这为您的前端开发之路打下了坚实的基础。

下一步您可以：

1. 实践：动手尝试构建一些小项目，例如一个待办事项列表、一个简单的计算器或一个天气应用。
2. 阅读官方文档：Vue.js 官方文档 是最权威、最详细的学习资源。
3. 学习 Vue Router 和 Pinia：掌握路由和状态管理，这将帮助您构建更复杂的单页面应用。
4. 学习 Vue 生态系统工具：如 Vite、ESLint、Prettier 等，以提高开发效率和代码质量。
5. 参与社区：在 Vue 社区中提问、回答问题，与其他开发者交流学习经验。

祝您在 Vue.js 的学习和开发旅程中一切顺利！