vue 3 中绑定点击事件用 @click（等价于 v-on:click），推荐使用；可绑定函数引用、内联表达式、带 $event 的参数调用，或用对象语法绑定多个鼠标事件。
在 Vue 3 中绑定点击事件，核心就是用 v-on:click 或它的简写 @click，两者功能完全一样，只是写法更短。推荐统一用 @click，更简洁、可读性高，也符合社区主流习惯。
基础写法：绑定函数名
事件处理器必须是已定义的函数，且在 <script setup></script> 中声明并可用：
- 在
<script setup></script>中定义函数，比如function handleClick() { ... } - 模板中直接写
<button>点我</button> - 注意：不加括号，表示“传函数引用”，而不是立即执行
内联表达式：适合简单操作
如果逻辑非常简单（比如仅修改一个响应式变量），可以直接写表达式：
<button>+1</button><button>切换状态</button>- 这种写法不用提前定义函数，但不适合复杂逻辑或需要复用的场景
带参数和原生事件：用 $event 显式传递
当既要传自定义参数，又要访问原生事件对象时，必须显式写出 $event：
- 函数定义：
function handleClick(name: string, e: Event) { ... } - 模板调用：
<button>传参点击</button> - 漏掉
$event就拿不到点击事件的 target、preventDefault 等能力
一次绑定多个鼠标事件
支持对象语法，把多个事件一次性绑定到同一个元素上：
<button mousedown: handledown mouseup: handleup>按住再松开</button>- 适合需要精细控制交互节奏的场景，比如拖拽、长按等
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
