Vue.js 教程

本教程是 Vue.js 的完整 13 篇入门系列,面向零基础初学者。从环境搭建、模板语法一路讲到组件、路由与状态管理,每一篇都配有可运行的代码示例。Vue 3 + <script setup> 是当下最推荐的写法,本系列全部基于此讲解。

Vue.js 是华裔工程师尤雨溪在 2014 年创建的渐进式前端框架。它的核心思想是:把数据"包装"成响应式对象,改数据时视图自动更新,你永远不用手动碰 DOM。2020 年发布的 Vue 3 用 TypeScript 重写了内核、引入了 Composition API,性能与可维护性都大幅提升。Vue 在国内特别流行,中文资料丰富,是入门前端框架的首选。

先看一个 Vue 程序

下面是最简单的 Vue 单文件组件(SFC),先感受一下它的样子:

<template>
  <div class="app">
    <h1>{{ title }}</h1>
    <button @click="count++">点击 {{ count }} 次</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
const title = ref("Hello, Vue!");
const count = ref(0);
</script>

<style scoped>
.app { text-align: center; padding: 40px; }
h1 { color: #42b883; }
button { padding: 8px 16px; font-size: 16px; }
</style>

三块结构非常清晰:模板(<template>)管长什么样、脚本(<script setup>)管逻辑、样式(<style>)管外观。点击按钮时 count 自增,视图自动刷新——你完全不需要写 document.querySelector 这种代码。

全部 13 篇子教程

建议按顺序学习,每天 1~2 篇,两周即可入门。

Vue.js 简介 — 历史、特点、与其他框架的对比
Vue 环境搭建 — CDN 快速体验与 Vite 脚手架
Vue 模板语法 — 插值、指令、缩写
Vue 响应式数据 — ref、reactive、methods
Vue 计算属性与侦听器 — computed 与 watch
Vue 内置指令 — v-if、v-for、v-bind、v-on、v-model
Vue 事件处理 — @click、事件修饰符、按键修饰符
Vue 表单与 v-model — 文本、复选框、单选、选择器
Vue 组件基础 — 单文件组件、注册与复用
Vue Props 与 Emit — 父子组件通信
Vue 生命周期 — onMounted、onUnmounted 等钩子
Vue Router 路由 — 多页面 SPA 的核心
Vue 状态管理 — Pinia 与 Vuex 对比

开始学习

准备好了吗?从第一篇开始 → Vue.js 简介

✈️💬

Vue.js 教程

先看一个 Vue 程序

全部 13 篇子教程

推荐学习路径

开始学习