Vue 3 中监听按钮点击事件最常用方式是 @click 绑定处理函数：基础写法为 配合 function handleClick() {}；支持传参和 $event；区分按键需用 @click.left、@contextmenu.prevent、@click.middle；内联表达式仅适用于简单场景。
Vue 3 中监听按钮点击事件，最常用、最直接的方式是用 @click 绑定处理函数。
基础写法：@click + 方法名
这是最推荐的写法，语义清晰、响应式安全、便于维护：
- 模板中写
- 在
<script setup></script>中定义函数：function handleClick() { console.log('按钮被点了'); } - 如果需要访问响应式数据，配合
ref或reactive即可：const count = ref(0);<br>function handleClick() { count.value++; }
支持传参和事件对象
点击时想传自定义参数或获取原生 DOM 事件，可以直接写：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 传固定值：
- 同时传参数和事件对象：
- 函数接收：
function handleClick(type, e) { console.log(type, e.target); }
区分鼠标按键（左/右/中）
默认 @click 只响应左键。如需区分不同按键，不能靠 @click.right（该写法无效）：
- 左键：用
@click.left（语义更明确，等价于@click） - 右键：监听
@contextmenu.prevent，阻止默认菜单并执行逻辑 - 中键（滚轮按下）：用
@click.middle
内联表达式（简单场景可用）
逻辑极简时，可直接写表达式，但不建议用于复杂操作：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
