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>
这里的 v-on:[eventName] 表示动态绑定事件，eventName 的值是 click，所以效果等同于 v-on:click。
七、总结
v-on是 Vue 中用来绑定事件的指令，简写形式是@，两者完全等价。- 支持传递参数和使用
$event获取原生事件对象。 - 提供了丰富的事件修饰符，比如
.stop、.prevent、.once等，极大地简化了事件处理逻辑。 - 支持动态事件绑定，适用于更灵活的场景。
总之，事件绑定是 Vue 的核心功能之一，灵活又好用。试试在你的项目中用起来吧，相信你会感受到它的强大！