Содержание цикла

1. Article 1
2. Article 2

Прослушка событий

Для обработки событий используется директива v-on, которая обычно сокращается до символа @. Далее идет имя события, например, @click. В качестве значения прикрепляется имя обработчика. Обработчиком может быть инлайн обработчик (это фрагмент кода, который будет запускаться каждый раз, когда событие будет срабатывать) или метод, который объявляется ранее. Инлайн обработчики обычно используются в простых случаях (обработка одного значения, например, счетчик). Логику для многочисленных обработчиков обычно выносят в методы, которые принимают значения в качестве параметров. В таких методах мы можем получить доступ к объекту события, передав в качестве параметра event.

Вызов методов в инлайн обработчиках

Можно передавать в инлайн обработчики методы. Это позволит передать в эти методы кастомные параметры, а не только нативный параметр event

function alertHello(text) {
  alert("Hello " + text)
}
<div @click="alertHello('World')">Say Hello</div>

Но в таком случае мы можем все равно получить доступ к параметру event, передав его следующим образом

<div @click="alertHello('World’, $event)">Say Hello</div>

или

<div @click="(event) => alertHello('World’, event)">Say Hello</div>

сам метод

function alertHello(text, event) {
  alert("Hello " + text + ‘ ‘ + event.target.tagName)
}

Модификаторы

Иногда бывает нужно вызвать метод события event.preventDefault(), например. Мы можем это сделать непосредственно в методе обработчике события. Но лучше отделить логику работы приложения от работы с DOM event. Для этих целей Vue предоставляет нам модификаторы. Вызываются они после директивы v-on, отделяясь точкой.

<div @click.prevent=»warn()»>Warning</div>

Список модификаторов

• stop // останавливает распространение события
• prevent // предотвращает обработку по умолчанию
• self // сработает только на элементе, который вызвал событие
• capture // перехватывает обработку события и ставит другого обработчика
• once // событие будет вызвано только один раз
• passive // обработка происходит мгновенно, не ожидая отмены события

Модификаторы клавиш

Когда мы получаем события клавиатуры, то часто мы хотим получать клавишу, на которой произошло событие. Для этого используются модификаторы клавиш. Можно брать любое название клавиши отсюда и использовать его в kebab-case формате. Но Vue предоставляет псевдонимы для некоторых частоиспользуемых клавиш.

• .enter
• .tab
• .delete (клавиши «Delete» и «Backspace»)
• .esc
• .space
• .up
• .down
• .left
• .right

Модификаторы для системных клавиш

• .ctrl
• .alt
• .shift
• .meta

Если нужно сочетание клавиш, то перечисляем названия клавиш через точку

Еще есть модификатор .exact, который работает следующим образом

// сработает при нажатии на ctrl, даже если одновременно нажата любая другая клавиша

<div @click.ctrl= «onClick»>Click me</div>

// сработает если нажат только ctrl

<div @click.ctrl.exact= «onClick»>Click me</div>

Модификаторы кнопок мыши

• .left
• .right
• .middle