Vue 3 快速上手

Vue 3 简介

Vue 3 是一套用于构建用户界面的渐进式 JavaScript 框架。核心特性：响应式数据、模板语法、组件化。

相比 Vue 2，Vue 3 使用 Composition API（setup 语法糖），逻辑复用更灵活，性能更强。

快速开始

# 使用 Vite 创建项目（推荐）
npm create vue@latest my-app
cd my-app
npm install
npm run dev

一个最小的 Vue 组件：

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

const count = ref(0);
const add = () => count.value++;
</script>

<template>
  <button @click="add">计数：{{ count }}</button>
</template>

模板语法与响应式

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

const name = ref("小明");
const price = ref(100);
const discount = computed(() => price.value * 0.8);
</script>

<template>
  <!-- 文本插值 -->
  <p>你好，{{ name }}</p>

  <!-- 属性绑定 : 简写 v-bind -->
  <input v-model="name">

  <!-- 条件渲染 -->
  <p v-if="price > 50">折扣价：{{ discount }}</p>

  <!-- 列表渲染 -->
  <ul>
    <li v-for="(item, i) in items" :key="i">{{ item }}</li>
  </ul>
</template>