Как работать с обработчиками событий во Vue?

По делу

Обработчики событий во Vue задают директивой v-on:event или сокращением @event. В шаблоне можно вызвать метод, передать аргументы или использовать короткое выражение.

<template>
  <button @click="save">Сохранить</button>
  <button @click="save(item.id)">С аргументом</button>
  <button @click="count++">Инлайн</button>
  <input @keyup.enter="submit" @input="onInput" />
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const item = { id: 42 }

function save(id) {
  console.log('save', id)
}
function onInput(e) {
  console.log(e.target.value)
}
function submit() { /* ... */ }
</script>

Нативное событие приходит первым аргументом метода. Если нужны свои параметры и event: @click="onClick($event, id)".

В Options API обработчики кладут в methods; в <script setup> — обычные функции попадают в шаблон автоматически. Предпочитайте именованные методы вместо огромных инлайн-выражений. Для типовых задач (preventDefault, stopPropagation) используйте event modifiers, а не копипасту в каждом хендлере.

Слушатели на компоненте по умолчанию слушаются как component emits; для нативного DOM-события на корне компонента в Vue 3 может понадобиться inheritAttrs / явное v-bind="$attrs". Для делегирования событий в списках иногда выгоднее один слушатель на родителе, чем тысяча @click на строках.