vue点击方法实现

实现 Vue 点击事件的方法

在 Vue 中实现点击事件可以通过 v-on 指令或简写的 @ 符号绑定方法。以下是几种常见方式：

绑定内联表达式

<button v-on:click="count++">增加计数</button>

绑定方法名

<button @click="handleClick">点击触发</button>

methods: {
  handleClick() {
    console.log('按钮被点击');
  }
}

传递事件对象

<button @click="handleEvent($event)">传递事件</button>

methods: {
  handleEvent(event) {
    console.log(event.target); // 获取触发元素
  }
}

传递自定义参数

<button @click="sayHello('Vue')">打招呼</button>

methods: {
  sayHello(name) {
    alert(`Hello ${name}!`);
  }
}

同时传递参数和事件对象

<button @click="warn('表单未提交', $event)">警告</button>

methods: {
  warn(message, event) {
    if (event) {
      event.preventDefault();
    }
    alert(message);
  }
}

事件修饰符

Vue 提供特殊后缀实现常见事件处理需求：

<!-- 阻止默认行为 -->
<a @click.prevent="doSomething">链接</a>

<!-- 阻止事件冒泡 -->
<div @click.stop="doThis">...</div>

<!-- 事件只触发一次 -->
<button @click.once="doThis">单次触发</button>

<!-- 串联修饰符 -->
<form @submit.prevent.stop="onSubmit">...</form>

按键修饰符

<!-- 回车键触发 -->
<input @keyup.enter="submit">

<!-- 特定按键触发 -->
<input @keyup.page-down="onPageDown">

系统修饰键

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">组合键触发</div>

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear">

鼠标按钮修饰符

<!-- 左键点击 -->
<button @click.left="leftClick">左键</button>

<!-- 右键点击 -->
<div @click.right="showContextMenu">右键菜单</div>