Vue.js
Modificateurs
Recherche…
Introduction
Il existe des opérations fréquemment utilisées, telles que event.preventDefault() ou event.stopPropagation() dans les gestionnaires d’événements. Bien que nous puissions faire cela facilement à l’intérieur des méthodes, il serait préférable que les méthodes concernent uniquement la logique des données plutôt que d’avoir à gérer les détails des événements DOM.
Modificateurs d'événement
Vue fournit des modificateurs d'événement pour v-on en appelant des postfixes de directive désignés par un point.
-
.stop -
.prevent -
.capture -
.self -
.once
Pour des exemples:
<!-- 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>
Modificateurs de clés
Lors de l'écoute d'événements de clavier, nous avons souvent besoin de rechercher des codes de clé communs. La mémorisation de tous les keyCodes est un problème, et Vue fournit des alias pour les clés les plus utilisées:
-
.enter -
.tab -
.delete(capture les touches “Delete” et “Backspace”) -
.esc -
.space -
.up -
.down -
.left -
.right
Pour des exemples:
<input v-on:keyup.enter="submit">
Modificateurs d'entrée
-
.trim
Si vous souhaitez que les entrées utilisateur soient automatiquement ajustées, vous pouvez ajouter le modificateur trim à vos entrées gérées par v-model :
<input v-model.trim="msg">
-
.number
Si vous souhaitez que l'entrée utilisateur soit automatiquement convertie en un nombre, vous pouvez procéder comme suit:
<input v-model.number="age" type="number">
-
.lazy
Généralement, v-model synchronise l'entrée avec les données après chaque événement d'entrée, mais vous pouvez ajouter le modificateur lazy à la place de la synchronisation après les événements de modification:
<input v-model.lazy="msg" >