Що робить директива `v-on`?

VueJunior~1 хв читання

Директива v-on використовується для прослуховування подій і виклику методів у відповідь на дії користувача або події браузера.

Простіше кажучи:

v-on зв'язує подію (click, input, change, keyup тощо) з обробником у компоненті.

Це основний механізм обробки подій у Vue.

Базове використання

html

<button v-on:click="handleClick">Клік</button>

Скорочення (використовується майже завжди):

html

<button @click="handleClick">Клік</button>

Що робить `v-on` під капотом?

Воно:

знаходить DOM-елемент
підписується на подію (addEventListener)
викликає метод компонента, коли подія спрацьовує

Приклад

vue

<template>
  <input @input="onInput">
</template>

<script>
export default {
  methods: {
    onInput(e) {
      console.log("Введено:", e.target.value)
    }
  }
}
</script>

Що можна передавати в обробник?

Виклик методу

html

<button @click="increase">+</button>

Inline-вираз

html

<button @click="count++">+</button>

Аргументи

html

<button @click="sayHello('Vue')">Привіт</button>

Об'єкт події

html

<button @click="handle($event)">Click</button>

Модифікатори v-on

Vue підтримує безліч модифікаторів для роботи з подіями:

Керування спливанням:

html

@click.stop     <!-- event.stopPropagation() -->
@click.prevent  <!-- event.preventDefault() -->
@click.stop.prevent

Одноразове виконання:

html

@click.once

Тригер лише при кліку по самому елементу:

html

@click.self

Фаза захоплення (capturing):

html

@click.capture

Passive-слухачі:

html

@scroll.passive

Модифікатори клавіш (key modifiers):

html

@keyup.enter
@keyup.esc
@keyup.ctrl.enter

Використання з компонентами

Можна слухати події, які компонент сам "емітить":

html

<MyButton @click="submit" />

Якщо компонент усередині викликає:

this.$emit('click')

то v-on спрацює.

Динамічне ім'я події

Можна підписатися на подію, назва якої обчислюється:

html

<button v-on:[dynamicEvent]="onEvent">

dynamicEvent = "dblclick"

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.