Руководство
Основы
- Установка
- Введение
- Экземпляр Vue
- Синтаксис шаблонов
- Вычисляемые свойства и слежение
- Работа с классами и стилями
- Условная отрисовка
- Отрисовка списков
- Обработка событий
- Работа с формами
- Основы компонентов
Продвинутые компоненты
- Регистрация компонентов
- Входные параметры
- Пользовательские события
- Слоты
- Динамические и асинхронные компоненты
- Обработка крайних случаев
Переходы и анимации
- Анимирование списков и появления/исчезновения
- Анимирование переходов между состояниями
Переиспользование и композиция
- Примеси
- Пользовательские директивы
- Render-функции и JSX
- Плагины
- Фильтры
Инструментарий
- Однофайловые компоненты
- Тестирование
- Поддержка TypeScript
- Публикация на production
Масштабирование
- Роутинг
- Управление состоянием приложения
- SSR. Отрисовка на стороне сервера
- Безопасность
Продвинутые темы
- Подробно о реактивности
Вопросы миграции
- Миграция с Vue 1.x
- Миграция с Vue Router 0.7.x
- Миграция с Vuex 0.6.x на 1.0
Мета
- Сравнение с другими фреймворками
- Присоединяйтесь к сообществу Vue.js!
- Познакомьтесь с командой
Эта документация для версий v2.x и ранее. Для v3.x, документация на русском здесь.
Обработка событий
Подписка на события
Для подписки на события DOM и выполнения JavaScript-кода по их наступлении используйте директиву v-on
.
Например:
|
|
Результат:
Кнопка выше была нажата {{ counter }} раз
Обработчики событий
Логика обработчика события может быть довольно сложной, поэтому оставлять 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
будет предотвращать клики только на самом элементе.
Добавлено в версии 2.1.4+
|
В отличие от остальных модификаторов, которые поддерживают только нативные события DOM, модификатор .once
может использоваться и в пользовательских событиях компонентов. Если вы ещё не читали о компонентах, не беспокойтесь об этом сейчас.
Добавлено в версии 2.3.0+
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
:
|
Системные модификаторы клавиш
Добавлено в версии 2.1.0+
Можно использовать следующие модификаторы для отслеживания событий мыши или клавиатуры с зажатой клавишей-модификатором:
.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
Добавлено в версии 2.5.0+
Модификатор .exact
позволяет контролировать точную комбинацию системных модификаторов, необходимых для запуска события.
|
Модификаторы клавиш мыши
Добавлено в версии 2.2.0+
.left
.right
.middle
Эти модификаторы ограничивают обработчик события только вызовами определённой кнопкой мыши.
Почему подписчики указываются в HTML?
Может показаться, что такой подход к отслеживанию событий нарушает старое доброе правило «разделения мух и котлет». Не беспокойтесь — поскольку все обработчики во Vue связываются с ответственным за текущее представление экземпляром vm, трудностей в поддержке не возникает. На практике есть даже несколько преимуществ при использовании v-on
:
Легче получить представление об имеющихся обработчиках, просто пробежав глазами по HTML-коду шаблона.
Поскольку нет необходимости вручную привязывать обработчики событий в JS, код vm остаётся независимым от DOM и содержит только необходимую логику. Это облегчает тестирование.
Когда vm уничтожается, все слушатели событий автоматически удаляются. Нет необходимости волноваться, что придётся прибираться за собой.