Vue.js
Модификаторы
Поиск…
Вступление
Существуют некоторые часто используемые операции, такие как event.preventDefault() или event.stopPropagation() внутри обработчиков событий. Хотя мы можем сделать это легко внутри методов, было бы лучше, если бы методы могли быть чисто логикой данных, а не иметь дело с деталями событий DOM.
Модификаторы событий
Vue предоставляет модификаторы событий для v-on , вызывая директивы postfixes, обозначенные точкой.
-
.stop -
.prevent -
.capture -
.self -
.once
Например:
<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
Модификаторы клавиш
При прослушивании событий клавиатуры нам часто приходится проверять наличие общих кодов клавиш. Помнить, что все ключевые коды - это проблема, поэтому Vue предоставляет псевдонимы для наиболее часто используемых ключей:
-
.enter -
.tab -
.delete(фиксирует клавиши «Delete» и «Backspace») -
.esc -
.space -
.up -
.down -
.left -
.right
Например:
<input v-on:keyup.enter="submit">
Модификаторы ввода
-
.trim
Если вы хотите, чтобы пользовательский ввод был обрезан автоматически, вы можете добавить модификатор trim к управляемым входам v-model :
<input v-model.trim="msg">
-
.number
Если вы хотите, чтобы пользовательский ввод автоматически определялся как число, вы можете сделать следующее:
<input v-model.number="age" type="number">
-
.lazy
Как правило, v-model синхронизирует вход с данными после каждого входного события, но вы можете добавить lazy модификатор вместо синхронизации после событий изменения:
<input v-model.lazy="msg" >