Обработка событий, директива v-on в Vue

Значение обработчика может быть одним из следующих:

1. Обработчик события в виде инлайн-кода: код JavaScript будет выполняться при срабатывании события, аналогично как в нативном атрибуте onclick
2. Обработчик события в виде метода: имя свойства или путь, указывающий на метод, объявленный в компоненте

Обработчик события в виде метода

Давайте запустим метод по какому-нибудь событию. Для того, чтобы навесить событие на какой-нибудь DOM элемент, нужно использовать директиву v-on.

В этой директиве после двоеточия нужно указывать имя события, а значением — имя метода, который нужно вызвать по наступлению этого события.

App.vuemethods: {
    show: function () {
        alert('!');
    }
}

Давайте сделаем так, чтобы по клику на кнопку вызывался метод show:

App.vue<template>
<button v-on:click="show">text</button>
</template>

Обычно все пользуются сокращенным вариантом v-on. Он представляет собой символ @ перед именем события:

App.vue<template>
<button @click="show">text</button>
</template>

Обработчик события в виде инлайн-кода

Обычно подобный подход используют лишь в очень простых случаях, например:

const count = ref(0)
Добавить 1
Счётчик: {{ count }}

Event, элемент на котором произошло событие

Метод обработчика автоматически получает аргументом нативное событие DOM, которое его вызвало — например, в примере выше можно получить доступ к элементу, на котором произошло событие, через event.target.

App.vue<template>
<button v-on:click="this.show($event)">text</button>
</template>

App.vuemethods: {
    show: function (event) {
        console.log(event.target);
    }
}

Модификаторы событий

Часто необходимо вызвать event.preventDefault() или event.stopPropagation() внутри обработчиков события. Хотя это и легко можно делать внутри методов, но лучше когда методы содержат в себе только логику и не имеют дела с деталями реализации событий DOM.

Vue для решения этой задачи предоставляет модификаторы событий для v-on. Вспомните, что модификаторы — это постфиксы директивы, отделяемые точкой:

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

App.vue<template>
<a href="/" v-on:click.prevent="this.show($event)">text</a>
</template>

App.vuemethods: {
    show: function (event) {
        console.log(event.target);
    }
}