Подписка на события

Во vue как и в обычном js можно подписаться на событие
Для подписки на события DOM и выполнения JavaScript-кода по их наступлении используйте директиву v-on

Обработчики событий

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

Методы и inline-обработчики

роме указания имени метода, можно использовать и JavaScript-выражения
Иногда в inline-обработчиках необходим доступ к оригинальному событию DOM. Его можно передать в метод, используя специальную переменную $event

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

Очень часто возникает необходимость вызывать event.preventDefault() или event.stopPropagation() в обработчике события. Несмотря на то, что это легко сделать внутри метода, лучше сохранять чистоту логики и абстрагироваться от деталей реализации событий DOM.
Для решения этой задачи Vue предоставляет модификаторы событий для v-on, которые указываются как постфиксы и отделяются точкой
  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
Обрати внимание
При использовании модификаторов порядок имеет значение, потому что код генерируется в том же порядке. Поэтому v-on:click.prevent.self будет предотвращать все клики, в то время как v-on:click.self.prevent будет предотвращать клики только на самом элементе.
В отличие от остальных модификаторов, которые поддерживают только нативные события DOM, модификатор .once может использоваться и в пользовательских событиях компонентов. Если вы ещё не читали о компонентах, не беспокойтесь об этом сейчас.
Vue также предоставляет модификатор .passive, соответствующий опции passive в addEventListener
Модификатор .passive особенно полезен для повышения производительности на мобильных устройствах.
Важно
Не используйте вместе .passive и .prevent, потому что .prevent будет проигнорирован и браузер возможно покажет предупреждение. Помните, что .passive сообщает браузеру, что вы не хотите предотвращать поведение по умолчанию для события.

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

При обработке событий клавиатуры нас часто интересуют конкретные клавиши. Vue позволяет использовать модификаторы клавиш при использовании v-on для отслеживания событий от клавиатуры
Можно также использовать любые допустимые имена клавиш, предоставляемые через KeyboardEvent.key в качестве модификаторов, именуя их в kebab-case
В примере выше обработчик будет вызываться только если $event.key будет 'PageDown'

Коды клавиш

Устаревший материал
Использование значения keyCode событий — устаревшая практика и может не поддерживаться в новых браузерах.
Использование значений keyCode также разрешено
Vue предоставляет псевдонимы для наиболее часто используемых клавиш, когда это необходимо для поддержки устаревших браузеров
  • .enter
  • .tab
  • .delete (ловит как «Delete», так и «Backspace»)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
Обратите внимание
Некоторые клавиши (.esc и все клавиши со стрелками) имеют несогласованные значения в IE9, поэтому их встроенные псевдонимы должны быть предпочтительными, если необходимо поддерживать IE9.
Можно также определить пользовательские псевдонимы клавиш через глобальную опцию config.keyCodes

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

Можно использовать следующие модификаторы для отслеживания событий мыши или клавиатуры с зажатой клавишей-модификатором
  • .ctrl
  • .alt
  • .shift
  • .meta
"Особенные" платформы
Примечание: На клавиатурах Apple клавиша meta отмечена знаком ⌘. На клавиатурах Windows клавиша meta отмечена знаком ⊞. На клавиатурах Sun Microsystems клавиша meta отмечена символом ромба ◆. На некоторых клавиатурах, особенно MIT и Lisp machine и их преемников, таких как Knight или space-cadet клавиатуры, клавиша meta отмечена словом «META». На клавиатурах Symbolics, клавиша meta отмечена словом «META» или «Meta».
Обратите внимание
Клавиши-модификаторы отличаются от обычных клавиш и при отслеживании событий keyup они должны быть нажаты, когда событие генерируется. Другими словами, keyup.ctrl сработает только тогда, когда вы отпустите клавишу, удерживая нажатой ctrl. Это не сработает, если вы отпустите только клавишу ctrl. Если вы хотите такое поведение, используйте keyCode для ctrl вместо keyup.17

Модификатор .exact

Модификатор .exact позволяет контролировать точную комбинацию системных модификаторов, необходимых для запуска события.

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

Эти модификаторы ограничивают обработчик события только вызовами определённой кнопкой мыши
  • .left
  • .right
  • .middle

Почему подписчики указываются в HTML?

Может показаться, что такой подход к отслеживанию событий нарушает старое доброе правило «разделения мух и котлет». Не беспокойтесь — поскольку все обработчики во Vue связываются с ответственным за текущее представление экземпляром vm, трудностей в поддержке не возникает.
На практике есть даже несколько преимуществ при использовании v-on
  • 1. Легче получить представление об имеющихся обработчиках, просто пробежав глазами по HTML-коду шаблона.
  • 2. Поскольку нет необходимости вручную привязывать обработчики событий в JS, код vm остаётся независимым от DOM и содержит только необходимую логику. Это облегчает тестирование.
  • 3. Когда vm уничтожается, все слушатели событий автоматически удаляются. Нет необходимости волноваться, что придётся прибираться за собой.
Отрисовка списковТестРабота с формами