Vue.js
modificatori
Ricerca…
introduzione
Ci sono alcune operazioni usate frequentemente come event.preventDefault() o event.stopPropagation() all'interno dei gestori di eventi. Anche se possiamo farlo facilmente all'interno dei metodi, sarebbe meglio se i metodi potessero essere puramente basati sulla logica dei dati piuttosto che dover gestire i dettagli dell'evento DOM.
Modificatori di eventi
Vue fornisce i modificatori di eventi per v-on chiamando i suffissi di direttive denotati da un punto.
-
.stop -
.prevent -
.capture -
.self -
.once
Per esempio:
<!-- 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>
Modificatori chiave
Quando si ascoltano eventi di tastiera, spesso è necessario verificare i codici chiave comuni. Ricordare tutti i keycode è una seccatura, quindi Vue fornisce alias per le chiavi più comunemente usate:
-
.enter -
.tab -
.delete(cattura entrambi i tasti "Cancella" e "Backspace") -
.esc -
.space -
.up -
.down -
.left -
.right
Per esempio:
<input v-on:keyup.enter="submit">
Modificatori di input
-
.trim
Se si desidera che l'input dell'utente venga ritagliato automaticamente, è possibile aggiungere il modificatore di trim agli input gestiti del v-model :
<input v-model.trim="msg">
-
.number
Se vuoi che l'input dell'utente venga automaticamente tipizzato come un numero, puoi fare come segue:
<input v-model.number="age" type="number">
-
.lazy
Generalmente, v-model sincronizza l'input con i dati dopo ogni evento di input, ma è possibile aggiungere il modificatore lazy per sincronizzarsi dopo gli eventi di modifica:
<input v-model.lazy="msg" >