Vue.js
modifiers
Zoeken…
Invoering
Er zijn enkele veelgebruikte bewerkingen zoals event.preventDefault() of event.stopPropagation() in gebeurtenishandlers. Hoewel we dit gemakkelijk binnen methoden kunnen doen, zou het beter zijn als de methoden puur om gegevenslogica kunnen gaan, in plaats van te moeten omgaan met DOM-gebeurtenisdetails.
Event Modifiers
Vue biedt event-modificaties voor v-on door richtlijn-postfixes v-on te roepen die worden aangegeven met een punt.
-
.stop -
.prevent -
.capture -
.self -
.once
Bijvoorbeeld:
<!-- 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>
Key Modifiers
Bij het luisteren naar toetsenbordgebeurtenissen moeten we vaak controleren op algemene sleutelcodes. Het onthouden van alle keyCodes is een gedoe, dus Vue biedt aliassen voor de meest gebruikte sleutels:
-
.enter -
.tab -
.delete(legt zowel de toetsen "Verwijderen" als "Backspace" vast) -
.esc -
.space -
.up -
.down -
.left -
.right
Bijvoorbeeld:
<input v-on:keyup.enter="submit">
Invoermodificaties
-
.trim
Als u wilt dat gebruikersinvoer automatisch wordt getrimd, kunt u de trim toevoegen aan uw beheerde ingangen van het v-model :
<input v-model.trim="msg">
-
.number
Als u wilt dat gebruikersinvoer automatisch wordt getypt als een nummer, kunt u het volgende doen:
<input v-model.number="age" type="number">
-
.lazy
Over het algemeen synchroniseert v-model de invoer met de gegevens na elke invoergebeurtenis, maar u kunt de lazy modificator toevoegen om in plaats daarvan te synchroniseren na wijzigingsgebeurtenissen:
<input v-model.lazy="msg" >