vue基本语法

以下为你用表格形式呈现 Vue 3 基本语法：

类别	语法示例	说明
模板语法
文本插值	<div>{{ message }}</div>	使用双大括号将数据显示在模板中
属性绑定	<img :src="imageUrl" alt="示例图片">	:src 是 v-bind:src 的简写，用于动态绑定属性值
事件绑定	<button @click="handleClick">点击</button>	@click 是 v-on:click 的简写，用于绑定 DOM 事件
响应式数据
ref	const count = ref(0);	用于创建单个响应式数据，访问时需通过 .value
reactive	const user = reactive({ name: '张三' });	用于创建响应式对象，可直接访问属性
方法定义	function handleClick() { count.value++; }	在 setup 函数中定义方法，可在模板中调用
条件渲染
v-if	<p v-if="count > 5">计数大于 5</p>	当条件为真时渲染元素，否则不渲染
v-show	<p v-show="isVisible">显示内容</p>	通过 CSS 的 display 属性控制元素显示与隐藏
列表渲染	<ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul>	使用 v-for 指令遍历数组或对象，key 用于提高渲染效率

以上表格涵盖了 Vue 3 中常见的基础语法，能帮助你快速了解并在开发中使用这些功能。