以下是以资深软件开发工程师的视角，对“Vue.js 教程”的专业回答。我将全面讲解 Vue.js 的基础知识、使用方法及其核心特性，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 15 日的最新信息，使用 Vue.js 3.x（最新稳定版）为参考。

Vue.js 教程

目录

  1. 引言
  2. Vue.js 基础
  1. Vue.js 入门
  1. 核心功能详解
  1. 高级特性
  1. 最佳实践与注意事项
  1. 结论

1. 引言

Vue.js 是一个简单而强大的前端框架，适合从小型项目到大型应用的开发。本教程将带你从零开始学习 Vue.js，通过实例掌握其核心功能，帮助你在实际项目中快速应用。

2. Vue.js 基础

2.1 什么是 Vue.js？

  • 定义：Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面，核心特点是响应式数据绑定和组件化。
  • 版本：Vue 3.x（推荐），提供更好的性能和 TypeScript 支持。
  • 参考：Vue.js 官方网站

2.2 核心特性

  • 响应式：数据变化自动更新视图。
  • 组件化：将 UI 拆分为可复用的组件。
  • 轻量级：核心库约 20KB，易于集成。

3. Vue.js 入门

3.1 安装与配置

  • 通过 CDN（快速上手）：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  • 使用 Vue CLI（推荐项目开发）：
  1. 安装 Node.js 和 npm。
  2. 全局安装 Vue CLI：
    bash npm install -g @vue/cli
  3. 创建项目：
    bash vue create my-project cd my-project npm run serve

3.2 基本用法：Hello Vue

  • 代码：
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Hello Vue</title>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <input v-model="message" placeholder="输入内容">
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          message: "Hello Vue!"
        };
      }
    }).mount("#app");
  </script>
</body>
</html>
  • 效果：输入框内容与标题同步更新。

4. 核心功能详解

4.1 响应式数据与绑定

  • 语法：使用 data 定义响应式数据，双向绑定通过 v-model。
data() {
  return {
    count: 0
  };
}

<p>{{ count }}</p>
<button @click="count++">加 1</button>

4.2 组件化开发

  • 定义组件：
const MyComponent = {
  template: "<p>这是一个组件</p>"
};
createApp({
  components: { "my-component": MyComponent }
}).mount("#app");

<my-component></my-component>

4.3 指令与事件

  • 常用指令：
  • v-if：条件渲染。
  • v-for：列表渲染。
  • v-on（@）：事件绑定。
  • 示例：
<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
<button @click="addItem">添加</button>

data() {
  return {
    items: [{ id: 1, text: "任务 1" }]
  };
},
methods: {
  addItem() {
    this.items.push({ id: this.items.length + 1, text: "任务 " + (this.items.length + 1) });
  }
}

4.4 实例：Todo List

以下是一个简单的 Todo List 示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Vue Todo List</title>
  <style>
    .completed { text-decoration: line-through; color: gray; }
  </style>
</head>
<body>
  <div id="app">
    <h1>待办事项</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入新任务">
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed">
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
      </li>
    </ul>
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          newTodo: "",
          todos: [
            { id: 1, text: "学习 Vue", completed: false }
          ]
        };
      },
      methods: {
        addTodo() {
          if (this.newTodo.trim()) {
            this.todos.push({
              id: this.todos.length + 1,
              text: this.newTodo,
              completed: false
            });
            this.newTodo = "";
          }
        }
      }
    }).mount("#app");
  </script>
</body>
</html>
  • 效果：输入任务并按 Enter 添加，勾选标记完成。

5. 高级特性

5.1 路由（Vue Router）

  • 安装：
npm install vue-router@4
  • 配置（src/router/index.js）：
import { createRouter, createWebHistory } from "vue-router";
const routes = [
  { path: "/", component: { template: "<h1>首页</h1>" } },
  { path: "/about", component: { template: "<h1>关于</h1>" } }
];
const router = createRouter({
  history: createWebHistory(),
  routes
});
export default router;
  • 使用（main.js）：
import { createApp } from "vue";
import router from "./router";
const app = createApp({});
app.use(router).mount("#app");

5.2 状态管理（Vuex/Pinia）

  • Pinia（推荐）安装：
npm install pinia
  • 配置（src/store/index.js）：
import { defineStore } from "pinia";
export const useStore = defineStore("main", {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});
  • 使用：
<script>
import { useStore } from "./store";
export default {
  setup() {
    const store = useStore();
    return { store };
  }
};
</script>
<template>
  <p>{{ store.count }}</p>
  <button @click="store.increment">加 1</button>
</template>

6. 最佳实践与注意事项

6.1 代码组织与风格

  • 组件化：每个文件一个组件，文件名与组件名一致。
  • 目录结构：
  src/
  ├── components/
  ├── router/
  ├── store/
  ├── views/
  └── App.vue

6.2 性能优化与调试

  • 性能：使用 v-memo 或 v-once 优化渲染。
  • 调试：安装 Vue Devtools，检查组件状态。

7. 结论

Vue.js 以其简洁的 API 和强大的生态系统，成为前端开发的热门选择。本文通过基础到高级的内容，结合 Todo List 实例，帮助你快速掌握 Vue.js。如果想深入学习，可参考 实例：Todo List 或访问 Vue.js 官方文档。

回答特点

  • 结构：遵循示例格式，包含目录、带锚点的小标题和代码示例。
  • 实用性：从入门到高级，适合初学者和开发者。
  • 内部链接：通过 <a href="#ID"> 跳转，如 核心功能详解。
  • 出站链接：嵌入正文，如 Vue.js 官方文档。

如何运行

  1. 根据需要选择 CDN 或 CLI 方式。
  2. 复制实例代码，运行并测试功能。

请确认此回答是否符合你的期望，或者提出下一个问题，我将继续按此格式回答！