Gestione degli Eventi ​

Ascolto degli Eventi ​

Possiamo utilizzare la direttiva v-on, che di solito abbreviamo con il simbolo @, per ascoltare gli eventi del DOM e eseguire del codice JavaScript quando vengono attivati. L'utilizzo nella forma estesa sarebbe v-on:click="handler" o con la scorciatoia, @click="handler".

Il valore dell'handler può essere uno dei seguenti:

1. Handler in linea: Codice JavaScript, scritto in linea, da eseguire quando l'evento viene innescato (simile all'attributo nativo onclick).

2. Handler di un Metodo: Un nome di una proprietà o un percorso che punta a un metodo definito nel componente.

Handler In Linea ​

Gli handler in linea (Inline handlers) sono usati in genere per casi semplici, ad esempio:

const count = ref(0)

data() {
  return {
    count: 0
  }
}

<button @click="count++">Aggiungi 1</button>
<p>Il conteggio è: {{ count }}</p>

Handler del Metodo ​

Per molti Handler di eventi, però, la logica sarà più complessa e, molto probabilmente, non sarà fattibile con gli handler in linea. Ecco perché v-on può accettare anche il nome, o il percorso, di un metodo del componente che si desidera utilizzare (Method Handlers).

Ad esempio:

const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  // `event` è l'Evento nativo del DOM
  if (event) {
    alert(event.target.tagName)
  }
}

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // `this` all'interno dei metodi punta all'istanza attiva corrente
    alert(`Hello ${this.name}!`)
    // `event` è l'Evento nativo del DOM
    if (event) {
      alert(event.target.tagName)
    }
  }
}

<!-- `greet` è il nome del metodo definito sopra -->
<button @click="greet">Saluta</button>

Un handler del metodo riceve automaticamente l'oggetto Evento nativo del DOM che lo innesca. Nell'esempio sopra, possiamo accedere all'elemento che dispaccia l'evento tramite event.target.tagName.

Rilevamento di codice Inline o del Metodo ​

Il compilatore del template rileva gli handler dei metodi verificando che la stringa del valore v-on sia un identificatore JavaScript valido o un percorso di accesso alla proprietà. Ad esempio: foo, foo.bar e foo['bar'] sono trattati come handler del metodo, mentre foo() e count++ sono trattati come handler inline.

Usare i Metodi negli Handler Inline ​

Invece di collegarsi direttamente a un nome di un metodo, possiamo chiamare metodi anche in un handler inline. Ciò ci consente di passare al metodo degli argomenti personalizzati invece dell'evento nativo:

function say(message) {
  alert(message)
}

methods: {
  say(message) {
    alert(message)
  }
}

<button @click="say('ciao')">Dì ciao</button>
<button @click="say('arrivederci')">Dì arrivederci</button>

Accesso all'Argomento dell'Evento negli Handler Inline ​

A volte in un handler inline abbiamo bisogno di accedere anche all'evento originale del DOM. Puoi passarlo a un metodo utilizzando la variabile speciale $event, o utilizzare una funzione arrow inline:

<!-- utilizzando la variabile speciale $event -->
<button @click="warn('Il Form non può essere ancora inviato.', $event)">
  Invia
</button>

<!-- utilizzando la funzione arrow inline -->
<button @click="(event) => warn('Il Form non può essere ancora inviato.', event)">
  Invia
</button>

function warn(message, event) {
  // ora abbiamo accesso all'evento nativo
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

methods: {
  warn(message, event) {
    // ora abbiamo accesso all'evento nativo
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

Modificatori dell'Evento ​

In molti casi negli handler degli eventi c'è bisogno di usare event.preventDefault() o event.stopPropagation(). Anche se possiamo farlo facilmente nei metodi, sarebbe meglio se i metodi riguardassero esclusivamente la logica dei dati, invece di dover gestire i dettagli dell'evento del DOM.

Per risolvere questo problema, per v-on, Vue fornisce i modificatori dell'evento. Ricorda che i modificatori sono aggiunti alle direttive tramite un punto.

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

<!-- la propagazione dell'evento click verrà interrotta -->
<a @click.stop="doThis"></a>

<!-- l'evento submit non ricaricherà più la pagina -->
<form @submit.prevent="onSubmit"></form>

<!-- i modificatori possono essere concatenati -->
<a @click.stop.prevent="doThat"></a>

<!-- singolo modificatore -->
<form @submit.prevent></form>

<!-- attiva l'handler solo se event.target corrisponde all'elemento stesso -->
<!-- cioè non da un elemento figlio -->
<div @click.self="doThat">...</div>

I modificatori .capture, .once e .passive riflettono le opzioni del metodo nativo addEventListener:

<!-- usa la modalità di cattura quando aggiungi il listener dell'evento -->
<!-- cioè un evento che punta a un elemento interno viene gestito qui prima di essere gestito da quell'elemento -->
<div @click.capture="doThis">...</div>

<!-- l'evento click sarà attivato al massimo una volta -->
<a @click.once="doThis"></a>

<!-- il comportamento predefinito dell'evento di scorrimento (scrolling) avverrà -->
<!-- immediatamente, invece di aspettare che `onScroll` sia completato  -->
<!-- nel caso contenga `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

Il modificatore .passive è tipicamente usato con i listener degli eventi touch per migliorare le prestazioni sui dispositivi mobili.

Modificatori dei Tasti ​

Quando si ascoltano gli eventi della tastiera, spesso è necessario verificare specifici tasti. Vue permette di aggiungere i modificatori dei tasti per v-on o @ quando si ascoltano gli eventi dei tasti:

<!-- chiama `submit` solo quando la `key` è `Enter` -->
<input @keyup.enter="submit" />

Come modificatore è possibile utilizzare qualsiasi nome di tasto valido, esposto tramite KeyboardEvent.key, convertendolo in kebab-case.

<input @keyup.page-down="onPageDown" />

Nell'esempio sopra, l'handler verrà chiamato solo se $event.key è uguale a 'PageDown'.

Alias per i Tasti ​

Vue fornisce degli alias per i tasti utilizzati più di frequente:

• .enter
• .tab
• .delete (cattura sia il tasto "Delete" sia "Backspace")
• .esc
• .space
• .up
• .down
• .left
• .right

Tasti Modificatori di Sistema ​

Puoi utilizzare i seguenti modificatori per attivare i listener di eventi del mouse, o della tastiera, solo quando viene premuto il corrispondente tasto modificatore:

• .ctrl
• .alt
• .shift
• .meta

For example:

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

Modificatore .exact ​

Il modificatore .exact consente di controllare la combinazione esatta dei tasti modificatori di sistema necessari per attivare un evento.

<!-- questo handler si attiverà anche se vengono premuti Alt o Shift insieme a Ctrl -->
<button @click.ctrl="onClick">A</button>

<!-- questo handler si attiverà solo quando viene premuto Ctrl e nessun altro tasto -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- questo handler si attiverà solo se non vengono premuti tasti modificatori di sistema -->
<button @click.exact="onClick">A</button>

Modificatori dei Tasti del Mouse ​

• .left
• .right
• .middle

Questi modificatori limitano l'handler agli eventi attivati da un specifico tasto del mouse.