Vue.js
Modificadores
Buscar..
Introducción
Hay algunas operaciones de uso frecuente como event.preventDefault() o event.stopPropagation() dentro de los controladores de eventos. Aunque podemos hacer esto fácilmente dentro de los métodos, sería mejor si los métodos fueran puramente lógicos de datos en lugar de tener que lidiar con los detalles del evento DOM.
Modificadores de eventos
Vue proporciona modificadores de eventos para v-on llamando a las directivas postfixes denotadas por un punto.
-
.stop -
.prevent -
.capture -
.self -
.once
Por ejemplo:
<!-- 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>
Modificadores clave
Cuando escuchamos eventos de teclado, a menudo necesitamos verificar códigos de teclas comunes. Recordar todos los keyCodes es una molestia, por lo que Vue proporciona alias para las claves más utilizadas:
-
.enter -
.tab -
.delete(captura las teclas "Eliminar" y "Retroceso") -
.esc -
.space -
.up -
.down -
.left -
.right
Por ejemplo:
<input v-on:keyup.enter="submit">
Modificadores de entrada
-
.trim
Si desea que las entradas del usuario se recorten automáticamente, puede agregar el modificador de trim a las entradas administradas de su v-model :
<input v-model.trim="msg">
-
.number
Si desea que la entrada del usuario se escriba automáticamente como un número, puede hacer lo siguiente:
<input v-model.number="age" type="number">
-
.lazy
En general, v-model sincroniza la entrada con los datos después de cada evento de entrada, pero puede agregar el modificador lazy para sincronizar en su lugar después de los eventos de cambio:
<input v-model.lazy="msg" >