Per associare un particolare comportamento ad un evento nativo del browser, usiamo la direttiva v-on o l'alias @ come abbiamo già visto nella quarta lezione di questa guida dedicato alle direttive. Guardiamo subito un esempio:
<button v-on:click="onClickButton">Click<button>
...
methods: {
onClickButton: function() {
alert('Button clicked!");
}
}
...
In questo caso abbiamo assegnato alla direttiva v-on:click il nome di un metodo definito all'interno dell'oggetto Vue. Oltre a questa modalità possiamo anche scrivere codice Javascript inline all'interno dell'attributo:
<button @click="alert('Button clicked!')">Click<button>In linea generale la prima modalità, ove possibile, è sempre da preferire alla seconda, in modo da suddividere in maniera più corretta i diversi compiti all'interno dell'applicazione web: layer presentazionale per l'HTML e layer di business per il Javascript.
Modificatori
Una delle principali comodità offerte dal framework in merito agli eventi sono i modificatori. Essi permettono di aggiungere dei comportamenti standard in maniera dichiarativa nel momento stesso in cui avviene l'associazione tra evento e la funzione callback, anche sfruttando la concatenazione di essi. I modificatori disponibili sono:
.stop: blocca la propagazione dell'evento all'interno della catena di bubbling;.prevent: previene il comportamento standard dell'elemento HTML (utile in caso di ancore o form);.capture: permette di invocare l'evento prima sull'elemento padre e solo successivamente su elementi figli;.self: permette di invocare l'evento solamente se il nodo corrente è il target (evita eventuali invocazioni nel caso l'evento scatti per esempio su elementi figli);.once: invoca la callback solamente una volta, rimuovendo il listener dopo la prima volta.
Ecco alcuni esempi:
<a href="#" @click.prevent="onClick">an anchor</a>
<div @click.self="onParent">
<a href="#" @click.prevent="onAnchor">anchor...</a>
</div>
Oltre a questi modificatori standard, esistono anche modificatori dedicati ai tasti della tastiera, da utilizzare insieme ad eventi keyboard-based come ad esempio keyup o keydown. Il loro funzionamento è similare ai modificatori precedenti:
<input @keyup.enter="submit">
I modificatori dedicati agli eventi basati sulla tastiera sono: .enter, .tab, .delete, .esc, .space, <code>.up, .down, .left, .right, .ctrl, code>.alt, .shift e .meta.
Sono disponibili anche modificatori speculari, ma basati sugli eventi del mouse: .left, .right e .middle.