监听事件

使用 v-on 指令(简写为 @)来监听 DOM 事件。

用法：v-on:click="handler" 或者 @click="handler".

handler 可以是内联事件处理器，也可以是方法事件处理器。

内联事件处理器通常用于简单场景，例如：

<template><button @click="count++"> 加1 </button><p>Count 是 {{count}}</p>
</template><script>export default {data() {return {count:0}},}
</script><style></style>

方法事件处理器

<template><button @click="greet"> 打招呼 </button>
</template><script>export default {data() {return {name:'vue'}},methods: {greet(event) {//event 是 DOM 原生事件if (event) {alert(JSON.stringify(event.target))}}}}
</script><style></style>

在内联处理器中调用方法

除了直接绑定方法名，还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件：

<template><button @click="say('hello')"> 你好 </button><button @click="say('bye')"> 再见 </button>
</template><script>export default {data() {return {}},methods: {say(message) {alert(message)}}}
</script><style></style>

在内联事件处理器中访问事件参数

有时我们需要在内联事件处理器中访问原生 DOM 事件。那么可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数：

<template><!-- 使用特殊的 $event 变量 --><button @click="warn('警报',$event)"> 警报 </button><!-- 使用内联箭头函数 --><button @click="(event) => warn('箭头警报', event)"> 箭头警报 </button>
</template><script>export default {data() {return {}},methods: {warn(message,event) {//这里可以访问 DOM 原生事件if (event) {//阻止事件的默认行为event.preventDefault()}alert(message)}}}
</script><style></style>

事件修饰符

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包括 stop、prevent、self、capture、once、passive。

stop

阻止事件冒泡，例如你有一个按钮，当点击时，想阻止这个点击事件冒泡到父元素，可以这样：

<template><div @click="divClick"><button @click.stop="buttonClick">点击</button></div>
</template><script>export default {data() {return {}},methods: {divClick() {console.log("Div 点到了");},buttonClick() {console.log("Button 点了");}}}
</script><style></style>

prevent

@submit 监听表单的 submit 事件，prevent 告诉 Vue 在触发事件时调用 event.preventDefault() 方法，这意味着当表单尝试提交时，浏览器默认的提交行为(例如刷新页面或跳转到另一个页面)将被阻止。

self

当你想要确保事件处理函数只在特定元素上触发，而不是在其子元素上触发时，可以使用 .self 修饰符。

capture

用于指定使用 DOM 的事件捕获阶段来触发事件处理函数。在 DOM 事件流中，事件捕获是从最外层元素(即 document 对象)开始，然后逐层向下到目标元素的过程。这与冒泡阶(从目标元素开始，然后逐层向上到最外层元素)相反。

once

确保事件处理器只被触发一次。这在某些场景下非常有用，比如当你只想执行一个初始化操作或只在第一次点击时显示一个弹窗等。

怎么点都只执行一次。

<template><div><button @click.once="initialize">初始化</button></div>
</template><script>
export default {methods: {initialize() {// 发送初始化请求或其他一次性操作console.log('初始化操作只执行一次');}}
}
</script><style></style>

如果需要再次触发事件，可能需要重新绑定事件或者使用其他方式来实现。例如，可以在方法内部手动触发事件:

methods: {initialize() {console.log('初始化操作');// 手动触发事件（在某些情况下可能需要）this.$emit('click'); // 如果是在子组件中，并且你想让父组件监听到这个事件再次触发。}
}

对于组件的事件监听，如果你想要在子组件中使用 once 修饰符确保事件只被触发一次，你可以在父组件中设置监听器时使用 once 修饰符:

<ChildComponent @event-name.once="handler"/>

这样，无论子组件触发了多少次事件，父组件中的 handler 方法都只会响应一次。

ling'w

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a><!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用 @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。