组件--事件处理

事件处理分类

内联事件处理：内联事件处理是指直接在 Vue 模板的 HTML 元素上写入 JavaScript 代码来处理事件。这种方式允许你在模板中直接定义事件响应逻辑，而不是在 Vue 实例的 methods 部分。这种方式适用于简单的逻辑，可以避免为了小功能而编写额外的方法

?

1	<button @click="console.log('Button clicked')">Click me</button>

 方法事件处理：这是一种更常见的处理方式，涉及在 Vue 实例的 methods 属性中定义一个方法，然后在模板中引用这个方法。这种方式使得代码更加模块化和可重用，特别是对于复杂的逻辑处理。它有助于保持模板的简洁和可维护性

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<template>   <button @click="handleClick">Click me</button> </template>   <script> export default {   methods: {     handleClick() {       console.log('Button clicked');     }   } } </script>

 

事件监听

可以使用 v-on 指令或其缩写 @ 来监听 DOM 事件。例如，v-on:click 或 @click 用于监听点击事件

 

事件处理器

将模板中的事件与 methods 中的方法相连接。例如，如果你有一个名为 handleClick 的方法，你可以在模板中通过 @click="handleClick" 来指定当用户点击时调用此方法

事件修饰符

提供了一系列的事件修饰符来进行常见的事件处理模式，例如 .prevent（阻止默认行为），.stop（停止事件冒泡），.once（事件只触发一次）等

按键修饰符

Vue 提供了按键修饰符（如 .enter, .esc），允许你只在特定键被按下时触发方法