Vue3 快速入门 使用 Vite 快速搭建 Vue 3 项目创建项目：npm create vite@latest my-vue-app --template vue cd my-vue-app npm install npm run dev目录结构：src/: 主代码目录main.js: 应用入口文件Setup 语法糖与响应式对象在 Vue 3 的 <script setup> 中，ref 和 reactive 是核心的响应式 API：ref: 用于定义单个值的响应式数据。<script setup> import { ref } from 'vue'; const count = ref(0); const increment = () => { count.value++; }; </script> <template> <button @click="increment">{{ count }}</button> </template>注意：访问或更新 ref 的值需要通过 .value。reactive: 用于定义复杂对象的响应式数据。<script setup> import { reactive } from 'vue'; const state = reactive({ count: 0, message: 'Hello Vue 3' }); const increment = () => { state.count++; }; </script> <template> <button @click="increment">{{ state.count }} - {{ state.message }}</button> </template>注意：reactive 不需要 .value，直接操作对象属性即可。区别ref 更适合简单的标量值。reactive 更适合复杂的嵌套对象。常用指令条件与循环v-if 和 v-else: 条件渲染。<template> <p v-if="isLoggedIn">欢迎回来！</p> <p v-else>请登录</p> </template>v-show: 控制元素显示。<template> <p v-show="isVisible">这是一条可见信息</p> </template>v-for: 列表渲染。<script setup> const items = [1, 2, 3, 4]; </script> <template> <ul> <li v-for="item in items" :key="item">{{ item }}</li> </ul> </template>事件绑定@click: 点击事件。<template> <button @click="handleClick">点击我</button> </template> <script setup> const handleClick = () => { alert('按钮被点击了！'); }; </script>@input 和 v-model: 双向绑定。<template> <input v-model="text" /> <p>{{ text }}</p> </template> <script setup> import { ref } from 'vue'; const text = ref(''); </script>@mouseenter 和 @mouseleave: 鼠标事件。<template> <div @mouseenter="onHover" @mouseleave="onLeave">悬停我！</div> </template> <script setup> const onHover = () => { console.log('鼠标进入'); }; const onLeave = () => { console.log('鼠标离开'); }; </script>属性绑定v-bind: 动态绑定属性。<template> <img :src="imageUrl" alt="动态图片" /> </template> <script setup> const imageUrl = 'https://example.com/image.jpg'; </script>v-once: 一次性渲染。<template> <p v-once>{{ message }}</p> </template> <script setup> const message = '这段文字只渲染一次'; </script>自定义组件子组件定义一个简单的按钮组件：<script setup> import { defineProps } from 'vue'; defineProps({ label: String }); </script> <template> <button>{{ label }}</button> </template>父组件父组件传递 label 属性：<script setup> import MyButton from './MyButton.vue'; </script> <template> <MyButton label="Click Me" /> </template>父子组件数据传递父传子通过 props 传递数据：<!-- 子组件 --> <script setup> import { defineProps } from 'vue'; defineProps({ message: String }); </script> <template> <p>{{ message }}</p> </template><!-- 父组件 --> <script setup> import ChildComponent from './ChildComponent.vue'; </script> <template> <ChildComponent message="Hello from Parent" /> </template>子传父通过 emit 通知父组件：<!-- 子组件 --> <script setup> import { defineEmits } from 'vue'; const emit = defineEmits(['updateMessage']); const notifyParent = () => { emit('updateMessage', 'Message from Child'); }; </script> <template> <button @click="notifyParent">Notify Parent</button> </template><!-- 父组件 --> <script setup> import ChildComponent from './ChildComponent.vue'; const handleUpdateMessage = (message) => { console.log(message); }; </script> <template> <ChildComponent @updateMessage="handleUpdateMessage" /> </template>