vue绑定事件
在Vue中，绑定事件是通过v-on指令（或其缩写@）来实现的。这个指令允许你监听DOM事件，并在触发时执行一些JavaScript代码。这对于处理用户输入、触发动画或执行任何类型的DOM操作都非常有用。
使用v-on指令
你可以直接在模板中的元素上使用v-on指令来监听DOM事件。例如，要监听一个按钮的点击事件，你可以这样做：
html复制代码
<button v-on:click="doSomething">点击我</button> |
或者，使用@作为v-on的简写：
html复制代码
<button @click="doSomething">点击我</button> |
绑定事件处理函数
在上面的例子中，doSomething是Vue实例中定义的一个方法。当按钮被点击时，这个方法会被调用。
javascript复制代码
new Vue({ | |
el: '#app', | |
methods: { | |
doSomething: function () { | |
// 在这里编写点击事件的处理逻辑 | |
alert('按钮被点击了！'); | |
} | |
} | |
}); |
传递参数给事件处理函数
你也可以向事件处理函数传递参数。例如，如果你有一个列表，并希望点击列表项时显示该项的索引或数据，你可以这样做：
html复制代码
<ul> | |
<li v-for="(item, index) in items" :key="index" @click="handleClick(index, item)"> | |
{{ item.text }} | |
</li> | |
</ul> |
然后在Vue实例中定义handleClick方法：
javascript复制代码
methods: { | |
handleClick: function (index, item) { | |
console.log('点击了索引为 ' + index + ' 的项，内容是 ' + item.text); | |
} | |
} |
修饰符
Vue还提供了事件修饰符，这些修饰符是.开头的指令后缀，用于指示事件应该在何时触发。例如，.prevent修饰符可以阻止事件的默认行为：
html复制代码
<form @submit.prevent="onSubmit">...</form> |
这里，.prevent修饰符会阻止表单提交的默认行为，允许你通过onSubmit方法处理表单提交，而不是让浏览器执行默认的表单提交操作。
Vue提供了多种修饰符，如.stop（阻止事件冒泡）、.capture（使用事件捕获模式）、.self（只当事件在该元素本身（而不是子元素）触发时触发回调）、.once（事件只触发一次）等，这些修饰符可以单独使用，也可以串联使用。