Javaweb学习之Vue事件处理（六）
目录
前期回顾
认识事件处理
1. 事件监听
1.1. 基本用法
1.2. 事件对象
2. 事件修饰符
2.1事件修饰符
2.2. 使用场景
2.3. 自定义修饰符
3.事件处理函数
3.1定义事件处理函数
3.2绑定事件处理函数
3.3传递参数给事件处理函数
前期回顾
Javaweb学习之Vue数据绑定（五）-CSDN博客
认识事件处理
Vue 事件监听是 Vue.js 框架中一个非常核心且强大的功能，它主要用于监听 DOM 事件并在这些事件发生时执行相应的 JavaScript 代码。这个功能使得 Vue 应用能够响应用户的各种操作，比如点击、输入、键盘事件等，从而根据用户的操作来更新数据或执行其他逻辑。
1. 事件监听
事件监听（Event Handling）允许你在 Vue 模板中处理用户交互和其他事件。主要通过 v-on 指令来实现。
1.1. 基本用法
<button v-on:click="handleClick">Click me</button>
<script>
new Vue({
el: '#app',
methods: {
handleClick() {
alert('Button clicked!');
}
}
});
</script>
这里，点击按钮会触发 handleClick 方法。
-
简写：
v-on可以简写为@。<button @click="handleClick">Click me</button>
1.2. 事件对象
- 传递事件对象：可以在事件处理方法中接收原生事件对象。
<button @click="handleClick($event)">Click me</button> <script> new Vue({ el: '#app', methods: { handleClick(event) { console.log(event); // 原生事件对象 } } }); </script>
2. 事件修饰符
事件修饰符是 Vue 提供的一个特性，用于简化事件处理的常见操作。
2.1事件修饰符
-
.stop：调用event.stopPropagation()阻止事件冒泡。<button @click.stop="handleClick">Click me</button> -
.prevent：调用event.preventDefault()阻止默认行为。<form @submit.prevent="handleSubmit">Submit</form> -
.capture：使用事件捕获模式（在事件冒泡前触发）。<button @click.capture="handleClick">Click me</button> -
.self：只在事件目标是当前元素时触发事件处理器。<button @click.self="handleClick">Click me</button> -
.once：事件处理函数只执行一次。<button @click.once="handleClick">Click me</button> -
.passive：标记事件处理函数为被动，表明不会调用event.preventDefault()，可优化滚动性能。<button @scroll.passive="handleScroll">Scroll me</button>
2.2. 使用场景
-
表单提交：使用
.prevent防止表单默认提交。 - 停止事件冒泡：使用
.stop防止事件冒泡到父元素。 - 单次事件：使用
.once处理单次点击事件。
2.3. 自定义修饰符
- 组合修饰符：可以组合使用多个修饰符。
<button @click.stop.prevent="handleClick">Click me</button>这里
handleClick既会阻止事件冒泡，也会阻止默认行为。
3.事件处理函数
在Vue中，事件处理函数是绑定到模板中的DOM元素上，用于响应用户的操作（如点击、输入等）的JavaScript函数。这些函数可以在Vue组件的methods选项中定义，然后通过v-on指令（或其简写形式@）绑定到模板中的元素上。
3.1定义事件处理函数
在Vue组件的methods对象中定义事件处理函数。这个对象包含了所有你希望在组件的模板中使用的函数。
export default {
methods: {
// 事件处理函数
handleClick() {
console.log('按钮被点击了！');
},
// 另一个事件处理函数，可能带有参数
handleInput(event) {
console.log(event.target.value); // 打印输入框的值
}
}
}3.2绑定事件处理函数
在Vue模板中，你可以使用v-on指令来监听DOM事件，并调用上面定义的方法。v-on指令后面可以跟随事件名称（无需on前缀），并指向你想要在事件发生时调用的方法。
<template>
<div>
<!-- 使用v-on指令绑定点击事件 -->
<button v-on:click="handleClick">点击我</button>
<!-- 使用简写形式@绑定点击事件 -->
<button @click="handleClick">点击我（简写）</button>
<!-- 绑定输入框的input事件 -->
<input type="text" @input="handleInput" />
</div>
</template>3.3传递参数给事件处理函数
当需要向事件处理函数传递参数时，可以直接在模板中传递。如果同时需要事件对象，可以通过$event特殊变量来访问它。
<template>
<div>
<!-- 传递参数给handleClick函数 -->
<button @click="handleClick('Hello Vue!')">点击我</button>
<!-- 同时传递自定义参数和事件对象 -->
<button @click="handleInputWithEvent('额外信息', $event)">点击我</button>
</div>
</template>
<script>
export default {
methods: {
handleClick(message) {
console.log(message); // 输出: Hello Vue!
},
handleInputWithEvent(info, event) {
console.log(info); // 输出: 额外信息
console.log(event.target.value); // 如果绑定在输入框上，则输出其值
}
}
}
</script>