Gestire gli eventi di base

29 agosto 2017

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.

Tutte le lezioni

1 ... 7 8 9 ... 13

Se vuoi aggiornamenti su Gestire gli eventi di base inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su Gestire gli eventi di base

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy