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>