Javaweb学习之Vue事件处理（六）

<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>