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, и мы добавим вас в качестве автора.
