Vue.js 事件绑定：v-on 和 @

今天我们来聊聊 Vue.js 中一个超常用的功能——事件绑定。只需要写几行代码，你就能轻松让页面和用户的交互灵动起来。Vue 提供了一个指令叫 v-on，还有它的简写形式 @，两者都可以用来绑定事件。

什么是事件绑定？

所谓事件绑定，就是给页面上的元素（比如按钮、输入框）添加事件处理函数。比如点击一个按钮触发某个方法，或者在输入框输入内容时做点什么。

在 Vue.js 中，事件绑定使用 v-on 指令，语法是这样的：

v-on:事件名="方法名"

如果你懒得写太多，还可以用 @ 替代 v-on，语法是：

@:事件名="方法名"

接下来我们具体看看怎么用！

一、基础用法：绑定事件处理函数

来看一个最简单的例子，点击按钮触发一个方法：

<div id="app"><button v-on:click="sayHello">点击我</button>
</div><script>
new Vue({el: '#app',methods: {sayHello() {alert('你好，Vue！');}}
});
</script>

当你点击按钮时，页面会弹出一个提示框，上面写着“你好，Vue！”。这里的 v-on:click 就是绑定了一个点击事件。

更简洁的写法是用 @：

<button @click="sayHello">点击我</button>

两者效果完全一样，写哪个随你喜欢。

二、传递参数

有时候，我们需要在事件触发时传递一些参数。比如点击不同的按钮时，传递不同的信息：

<div id="app"><button @click="sayHello('小明')">小明</button><button @click="sayHello('小红')">小红</button>
</div><script>
new Vue({el: '#app',methods: {sayHello(name) {alert(`你好，${name}！`);}}
});
</script>

点击“小明”按钮时，会弹出“你好，小明！”，而点击“小红”按钮时，会弹出“你好，小红！”。
在这里，我们通过 @click="sayHello('小明')" 给方法传递了一个参数。

三、特殊对象 `$event`

如果你需要获取原生的事件对象（比如点击时鼠标的位置），Vue 提供了一个特殊对象叫 $event。

来看个例子：

<div id="app"><button @click="showEvent($event)">点我</button>
</div><script>
new Vue({el: '#app',methods: {showEvent(event) {console.log(event);alert(`点击位置：(${event.clientX}, ${event.clientY})`);}}
});
</script>

在这个例子中，$event 是一个原生的事件对象，它包含了鼠标点击时的位置等信息。你可以通过它获取很多有用的数据。

四、事件修饰符

Vue.js 提供了一些修饰符，让事件处理更方便。这些修饰符可以跟在事件名后面，用 . 分隔。比如：

@事件名.修饰符="方法名"

常用的修饰符有：

.stop：阻止事件冒泡
```
<div @click="parentClick"><button @click.stop="childClick">点我</button>
</div>
```
点击按钮时，parentClick 方法不会触发，因为 .stop 阻止了事件冒泡。
.prevent：阻止默认行为
```
<form @submit.prevent="handleSubmit"><button type="submit">提交</button>
</form>
```
默认情况下，表单提交会刷新页面，但 .prevent 阻止了这个默认行为。
.self：只有在事件直接发生在绑定的元素上时才触发
```
<div @click.self="onClick">点我</div>
```
点击 div 内部的其他元素时不会触发事件，只有直接点击 div 本身才会触发。
.once：事件只触发一次
```
<button @click.once="sayHello">点我</button>
```
无论你点击多少次，sayHello 方法只会触发一次。
.capture：使用捕获模式触发事件
```
<div @click.capture="parentClick"><button @click="childClick">点我</button>
</div>
```
在捕获模式下，父元素的事件会先触发，再触发子元素的事件。

五、组合修饰符

你还可以组合多个修饰符，比如：

<button @click.stop.prevent="handleClick">点我</button>

这个按钮的点击事件既阻止冒泡，又阻止默认行为。

六、动态事件绑定

有时候，我们不知道具体的事件名，需要动态地绑定事件。Vue 提供了动态事件的支持：

<div id="app"><button v-on:[eventName]="handleClick">点我</button>
</div><script>
new Vue({el: '#app',data: {eventName: 'click'},methods: {handleClick() {alert('事件触发了！');}}
});
</script>