Поиск…


Вступление

Существуют некоторые часто используемые операции, такие как 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" >


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow