Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.
В этой статье мы рассмотрим, как обрабатывать различные события с помощью Vue.js и изменять поведение обработчика событий.
Ключевые модификаторы
При прослушивании событий клавиатуры мы часто хотим проверить наличие определенных клавиш. Для этого мы можем добавить имя ключа в качестве модификатора директивы v-on
.
Например, мы можем использовать его следующим образом:
src/index.js
:
new Vue({ el: "#app", data: { name: "" }, methods: { submit() { alert(this.name); } } });
index.html
:
<!DOCTYPE html> <html> <head> <title>App</title> <meta charset="UTF-8" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model="name" v-on:keyup.enter="submit" /> </div> <script src="src/index.js"></script> </body> </html>
Приведенный выше код будет следить за нажатием клавиши ввода, когда ввод сфокусирован. Затем, когда мы нажмем Enter и отпустим клавишу в это время, мы получим все, что введено в поле ввода, отображаемое в окне предупреждения.
v-on:keyup.enter=”submit”
проверяет, только когда отпущена клавиша Enter.
Для названий клавиш, состоящих из более чем одного слова, мы преобразуем его в регистр кебаба.
Например, если мы хотим прослушать событие keyup
клавиши перехода на страницу вверх, мы пишем:
<input v-on:keyup.page-up="onPageUp">
Затем, когда отпускается клавиша перехода на страницу вверх, вызывается onPageUp
.
Ключевые коды
Мы также можем передать ключевой код как модификатор v-on
. Например, если мы хотим прослушать событие, когда клавиша Enter отпускается после ее нажатия, мы можем написать следующее:
src/index.js
:
new Vue({ el: "#app", data: { name: "" }, methods: { submit() { alert(this.name); } } });
index.html
:
<!DOCTYPE html> <html> <head> <title>App</title> <meta charset="UTF-8" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model="name" v-on:keyup.13="submit" /> </div> <script src="src/index.js"></script> </body> </html>
Однако использование событий ofkeyCode
устарело, поэтому оно может не поддерживаться в новых браузерах.
Псевдонимы для часто используемых кодов клавиш включены в Vue. Они включают:
.enter
.tab
.delete
(захватывает клавиши «Удалить» и «Backspace»).esc
.space
.up
.down
.left
.right
Некоторые клавиши, такие как клавиши со стрелками и .esc
, имеют несовместимые значения в IE9, поэтому эти встроенные псевдонимы должны быть предпочтительнее, если наше приложение поддерживает IE9.
Мы также можем определить наши собственные псевдонимы ключевого кода следующим образом:
Vue.config.keyCodes.f3 = 114
Тогда мы можем использовать:
v-on:keyup.f3
в нашем приложении.
Клавиши системных модификаторов
Начиная с Vue 2.1.0 или новее, мы можем использовать клавиши-модификаторы для запуска обработчиков событий мыши или клавиатуры только при нажатии соответствующих клавиш-модификаторов:
.ctrl
.alt
.shift
.meta
Мета-клавиша - это командная клавиша на клавиатурах Macintosh. На клавиатурах Windows мета-клавиша - это клавиша Windows. На клавиатурах рабочих станций Sun это сплошная ромбовидная клавиша.
Например, если мы хотим, чтобы Alt-S была сочетанием клавиш для отображения предупреждения с тем, что мы набрали, мы можем написать следующее:
src/index.js
:
new Vue({ el: "#app", data: { name: "" }, methods: { submit() { alert(this.name); } } });
index.html
:
<!DOCTYPE html> <html> <head> <title>App</title> <meta charset="UTF-8" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model="name" @keyup.alt.83="submit" /> </div> <script src="src/index.js"></script> </body> </html>
Если мы хотим, чтобы при нажатии кнопки с нажатой клавишей Ctrl появлялось всплывающее окно, мы можем написать следующее:
src/index.js
:
new Vue({ el: "#app", data: {}, methods: { sayHi() { alert("hi"); } } });
index.html
:
<!DOCTYPE html> <html> <head> <title>App</title> <meta charset="UTF-8" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click.ctrl="sayHi">Say Hi</button> </div> <script src="src/index.js"></script> </body> </html>
Затем мы получаем предупреждение со словом «привет», когда, удерживая Ctrl, нажимаем кнопку «Сказать привет».
В обоих случаях при срабатывании события клавиши-модификаторы должны быть нажаты. Таким образом, в приведенных выше примерах необходимо нажимать Alt или Ctrl в дополнение к тому, что следует за ним.
Модификатор .exact
Начиная с Vue 2.5.0, мы можем использовать модификатор .exact
для управления точной комбинацией системных модификаторов, необходимых для запуска события.
Например:
<button @click.ctrl="onClick">A</button>
будет запускаться onClick
только при нажатии Ctrl, и если мы хотим запускать метод только при нажатии Ctrl и никаких других клавиш, мы можем написать:
<button @click.ctrl.exact="onCtrlClick">A</button>
Модификаторы кнопок мыши
Начиная с Vue 2.2.0, можно использовать следующие события модификатора мыши:
.left
.right
.middle
Они срабатывают при нажатии определенной кнопки мыши.
Заключение
Мы можем прослушивать одно ключевое действие или комбинацию ключевых действий с ключевыми модификаторами.
Мы можем ссылаться на них по ключевому коду или псевдонимам.
Имена клавиш, которые содержат более одного слова, должны быть преобразованы в регистр шашлыка.
Мы также можем прослушивать точные комбинации клавиш с .exact
и нажатия кнопок мыши с помощью модификаторов клавиш мыши.
Примечание от JavaScript In Plain English: Мы всегда заинтересованы в содействии продвижению качественного контента. Если у вас есть статья, которую вы хотите отправить в JavaScript In Plain English, отправьте нам электронное письмо по адресу [email protected] с вашим именем пользователя Medium, и мы добавим вас в качестве автора.