Vue.js
Modifikatoren
Suche…
Einführung
Es gibt einige häufig verwendete Vorgänge wie event.preventDefault() oder event.stopPropagation() in Event- event.stopPropagation() . Obwohl dies innerhalb von Methoden problemlos möglich ist, wäre es besser, wenn es sich bei den Methoden um reine Datenlogik handeln kann, anstatt sich mit DOM-Ereignisdetails zu befassen.
Event Modifiers
Vue stellt Ereignismodifizierer für v-on bereit, indem Direktive-Postfixes aufgerufen werden, die durch einen Punkt gekennzeichnet sind.
-
.stop -
.prevent -
.capture -
.self -
.once
Zum Beispiel:
<!-- 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>
Schlüsselmodifikatoren
Beim Abhören von Tastaturereignissen müssen wir häufig nach gängigen Tastencodes suchen. Das Erinnern an alle keyCodes ist umständlich, daher bietet Vue Aliasnamen für die am häufigsten verwendeten Schlüssel:
-
.enter -
.tab -
.delete(erfasst die Tasten "Löschen" und "Rücktaste") -
.esc -
.space -
.up -
.down -
.left -
.right
Zum Beispiel:
<input v-on:keyup.enter="submit">
Eingangsmodifikatoren
-
.trim
Wenn Sie Benutzereingaben automatisch getrimmt werden möchten, können Sie den hinzufügen trim Modifikator zu Ihrem v-model verwaltet Eingänge:
<input v-model.trim="msg">
-
.number
Wenn Sie möchten, dass die Benutzereingabe automatisch als Zahl typisiert wird, können Sie wie folgt vorgehen:
<input v-model.number="age" type="number">
-
.lazy
Im Allgemeinen synchronisiert v-model die Eingabe mit den Daten nach jedem Eingabeereignis. Sie können jedoch den Modifikator " lazy hinzufügen, statt nach Änderungsereignissen zu synchronisieren:
<input v-model.lazy="msg" >