1. 简单的点击事件
<button v-on:click="handleClick">Click me</button>
var app = new Vue({
el: '#app',
methods: {
handleClick: function () {
alert('Button clicked!');
}
}
});
在这个例子中，当按钮被点击时，handleClick 方法会被调用，弹出一个警告框。
2. 传递参数
你可以使用 v-on 传递事件参数给方法：
<button v-on:click="handleClick('Hello', $event)">Click me</button>
var app = new Vue({
el: '#app',
methods: {
handleClick: function (greeting, event) {
alert(greeting + ', Button clicked!');
console.log(event);
}
}
});
在这个例子中，handleClick 方法接受两个参数，第一个是字符串 "Hello"，第二个是事件对象 $event。
3. 事件修饰符
Vue.js 提供了一些事件修饰符，用于处理常见的事件操作。例如：
- .stop 阻止事件冒泡。
- .prevent 阻止默认事件。
- .capture 使用事件捕获模式。
- .self 只在事件是从触发元素自身触发时触发。
<form v-on:submit.prevent="handleSubmit">
<!-- 阻止表单默认提交行为 -->
<button type="submit">Submit</button>
</form>
var app = new Vue({
el: '#app',
methods: {
handleSubmit: function () {
alert('Form submitted!');
}
}
});
4. 按键修饰符
你可以使用按键修饰符来监听键盘事件：
<input v-on:keyup.enter="handleEnter">
var app = new Vue({
el: '#app',
methods: {
handleEnter: function () {
alert('Enter key pressed!');
}
}
});
在这个例子中，handleEnter 方法只会在按下 Enter 键时触发。
这些都是 Vue.js 中事件处理器的基本用法，你可以根据实际需求使用不同的事件修饰符和键盘修饰符。
转载请注明出处：http://www.zyzy.cn/article/detail/4802/Vue