AI夹克

Vue 3 快速入门：最友好的前端框架

什么是 Vue

Vue 是一个前端框架，帮你更高效地构建用户界面。

为什么用 Vue

  • 📦 组件化：页面拆成独立的小块，每个块有自己的逻辑和样式
  • 🔄 响应式：数据变了，页面自动更新
  • 🧩 生态好：Vue Router、Pinia、Vite 无缝配合
  • 📖 文档友好：中文文档非常完善
  • 🤖 AI 友好：AI 对 Vue 的支持非常好

Vue 文件结构 (.vue)

<script setup>
// JavaScript 逻辑
import { ref } from 'vue';
const message = ref('你好 Vue！');
</script>

<template>
  <!-- HTML 模板 -->
  <h1>{{ message }}</h1>
  <button @click="message = '变了！'">点击</button>
</template>

<style scoped>
/* CSS 样式（scoped = 只影响当前组件） */
h1 { color: purple; }
</style>

一个 .vue 文件 = 逻辑 + 模板 + 样式 三合一。

核心概念速览

响应式数据 ref()

const count = ref(0);
count.value++;  // 修改数据 → 页面自动更新！

计算属性 computed()

const doubled = computed(() => count.value * 2);
// count 变了 → doubled 自动重新计算

条件渲染 v-if

<div v-if="isLoggedIn">欢迎回来！</div>
<div v-else>请先登录</div>

列表渲染 v-for

<li v-for="item in todos" :key="item.id">
  {{ item.task }}
</li>

事件处理 @click

<button @click="handleSubmit">提交</button>

双向绑定 v-model

<input v-model="username" />
<!-- 输入框的值和 username 变量实时同步 -->

Props：父传子

<!-- 父组件 -->
<ChildComponent :name="username" />

<!-- 子组件 -->
<script setup>
const props = defineProps(['name']);
</script>
<template>
  <p>你好，{{ name }}</p>
</template>

Emit：子传父

<!-- 子组件 -->
<script setup>
const emit = defineEmits(['submit']);
function handleClick() {
  emit('submit', { id: 1 });
}
</script>

<!-- 父组件 -->
<ChildComponent @submit="handleChildSubmit" />

Vue Router：页面跳转

// router/index.js
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];
<!-- 导航 -->
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>

<!-- 页面渲染位置 -->
<router-view />

用 AI 写 Vue

“用 Vue 3 + Composition API 帮我做一个计数器组件，支持增加、减少、重置功能。用 Tailwind CSS 写样式。”

→ AI 会生成完整的 .vue 文件。

小结

Vue 3 的核心就 6 个概念：

  • ref() = 响应式数据
  • v-if = 条件显示
  • v-for = 列表循环
  • @click = 事件处理
  • props/emit = 组件通信
  • <router-link> = 页面跳转

下一篇我们实战做一个完整的博客项目。