Vue教程 - 渐进式前端框架

Vue.js是一款用于构建用户界面的渐进式JavaScript框架。它易于上手、文档优秀、生态完善，是国内使用最广泛的前端框架之一。本教程将从基础语法到完整项目，助你全面掌握Vue 3开发。

一、Vue简介

Vue由尤雨溪于2014年发布，采用响应式数据绑定和组件化架构。Vue 3使用Composition API和TypeScript重写，性能更优、类型支持更好。"渐进式"意味着你可以按需使用Vue的功能，从页面增强到单页应用。

二、你将学到什么

• 基础语法：模板语法、指令、插值、计算属性、侦听器
• 组件开发：组件定义、Props、事件、插槽、生命周期
• Composition API：setup、ref、reactive、computed、watch
• 路由管理：Vue Router配置、动态路由、导航守卫
• 状态管理：Pinia状态管理、模块化
• 工程化：Vite构建、TypeScript集成、组件库使用

三、代码示例

Vue 3 Composition API 组件示例：

<template>
  <div class="todo-app">
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入待办事项" />
    <button @click="addTodo">添加</button>
    <ul>
      <li v-for="todo in filteredTodos" :key="todo.id">
        <input type="checkbox" v-model="todo.done" />
        <span :class="{ done: todo.done }">{{ todo.text }}</span>
        <button @click="removeTodo(todo.id)">删除</button>
      </li>
    </ul>
    <p>剩余: {{ remaining }} 项</p>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const todos = ref([
  { id: 1, text: "学习Vue3", done: false },
  { id: 2, text: "写项目", done: true }
]);
const newTodo = ref("");

function addTodo() {
  if (!newTodo.value.trim()) return;
  todos.value.push({
    id: Date.now(),
    text: newTodo.value,
    done: false
  });
  newTodo.value = "";
}

function removeTodo(id) {
  todos.value = todos.value.filter(t => t.id !== id);
}

const remaining = computed(() => {
  return todos.value.filter(t => !t.done).length;
});
</script>

<style scoped>
.done { text-decoration: line-through; color: #999; }
</style>

四、适合人群

• 有HTML/CSS/JS基础，想要学习前端框架的开发者
• 想要从事前端全栈开发的工程师
• 从Vue 2升级到Vue 3的开发者
• 后端转前端的工程师，Vue学习曲线平缓

五、学习建议

Vue是最容易上手的前端框架，官方文档质量极高，建议以官方文档为主学习。先掌握模板语法和组件基础，再学习Composition API。Vue 3推荐直接学习Composition API和script setup语法。学完基础后，结合Vue Router和Pinia搭建一个完整项目，巩固知识。

课程信息：
共 6 个章节