Vue.js События

• Что такое Vue.js события
• Доступ к исходному объекту события
• Модификаторы событий

Что такое Vue.js события

Vue.js позволяет нам перехватывать любое событие DOM с помощью директивы von для элемента.

Если мы хотим что-то сделать, когда в этом элементе произойдет событие щелчка:

мы добавляем директиву von :

Vue также предлагает очень удобный альтернативный синтаксис для этого:

Вы можете выбрать, использовать круглые скобки или нет. @click="handleClick" эквивалентно @click="handleClick()" .

handleClick – это метод, прикрепленный к компоненту:

Методы более подробно описаны в моем учебнике по методам Vue.

Здесь вам нужно знать, что вы можете передавать параметры из событий: @click="handleClick(параметр)" и они будут получены внутри метода.

Доступ к исходному объекту события

Во многих случаях вам потребуется выполнить действие над объектом события или просмотреть в нем какое-либо свойство. Как вы можете получить к нему доступ?

Используйте специальную директиву $event :

и если вы уже передаете переменную:

Оттуда вы могли бы вызвать event.preventDefault() , но есть лучший способ: модификаторы событий

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

Вместо того, чтобы возиться с “вещами” DOM в ваших методах, скажите Vue, чтобы он справился с этим за вас:

• @нажмите.предотвратить вызов событие.предотвратить дефолт()
• @нажмите.остановить вызов событие.остановить распространение()
• @click.passive использует пассивную опцию addEventListener
• @click.capture использует захват событий вместо пузырьков событий
• @click.self убедитесь, что событие щелчка не было вызвано дочерним событием, а произошло непосредственно в этом элементе
• @click.once событие будет запущено только один раз

Все эти параметры можно объединить, добавив один модификатор за другим.

Подробнее о распространении, пузырении/захвате см. В моем руководстве по событиям JavaScript.

Оригинал: “https://flaviocopes.com/vue-events/”