Vue Academy · Lezione

Modifier degli eventi v-on

.stop, .prevent, .self, .once, .capture, .passive — quando e perché usare ciascun modifier

Lezione 2 di 413 passaggi

Modifier degli eventi v-on è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Gestione più pulita degli eventi

La direttiva v-on (abbreviazione @) associa listener agli eventi. I modificatori degli eventi sono suffissi che gestiscono attività comuni del DOM, come interrompere la propagazione o impedire i comportamenti predefiniti, così i gestori restano concentrati sulla logica.

Il problema risolto dai modificatori

Senza modificatori, si dissemina il boilerplate del DOM nei gestori: chiamare event.preventDefault() o event.stopPropagation(). I modificatori spostano questa gestione nel template in modo dichiarativo.

.stop per stopPropagation

.stop impedisce all'evento di propagarsi agli elementi padre, come se si chiamasse event.stopPropagation().

<!-- inner click will not reach the outer handler -->
<div @click="onOuter">
  <button @click.stop="onInner">Click</button>
</div>

.prevent per preventDefault

.prevent chiama event.preventDefault(). L'uso classico consiste nell'impedire a un modulo di ricaricare la pagina al momento dell'invio.

<form @submit.prevent="onSubmit">
  <button type="submit">Save</button>
</form>

Combinare i modificatori

È possibile combinare i modificatori. L'ordine è importante: vengono applicati da sinistra verso destra.

<a @click.stop.prevent="onClick">Link</a>

.self: solo l'elemento stesso

.self attiva il gestore solo se il target dell'evento è l'elemento stesso, non un elemento figlio il cui evento si è propagato verso l'alto. È ideale per gli sfondi delle sovrapposizioni.

<!-- closes only when the backdrop itself is clicked -->
<div class="backdrop" @click.self="close">
  <div class="modal">...</div>
</div>

Modificatori dei tasti

Per gli eventi da tastiera, può ascoltare tasti specifici. @keyup.enter si attiva solo quando viene rilasciato il tasto Invio.

<input @keyup.enter="search" />

Altri modificatori dei tasti

Vue fornisce alias per i tasti comuni: .enter, .esc, .tab, .delete, .space e per i tasti freccia, come .up e .down.

<input @keyup.esc="cancel" @keyup.up="previous" />

.once: eseguire un gestore una sola volta

.once esegue il gestore al massimo una volta, poi rimuove il listener. È utile per azioni da eseguire una sola volta, come chiudere un messaggio di benvenuto.

<button @click.once="initialize">Start</button>

.passive per le prestazioni dello scorrimento

.passive comunica al browser che il gestore non chiamerà preventDefault(). In questo modo il browser può scorrere senza attendere, migliorando le prestazioni durante gli eventi touch e di scorrimento.

<div @scroll.passive="onScroll">...</div>

Scegliere il modificatore giusto

.stop — interrompere la propagazione.
.prevent — bloccare il comportamento predefinito.
.self — ignorare gli eventi propagati dagli elementi figlio.
.once — eseguire una volta.
.passive — non impedire mai il comportamento predefinito; migliorare le prestazioni dello scorrimento.

Nota: non combini mai .passive con .prevent: sono in contraddizione.

Verifica rapida

Scelga il modificatore giusto.

Rispondi nella lezione interattiva

Riepilogo

I modificatori degli eventi mantengono puliti i gestori:

.stop = stopPropagation, .prevent = preventDefault.
.self si attiva solo sull'elemento stesso.
I modificatori dei tasti, come .enter, si rivolgono a tasti specifici.
.once esegue un gestore una sola volta; .passive migliora le prestazioni dello scorrimento.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 42
Lezioni: 156

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Modifier degli eventi v-on» è gratuita?

Sì — il testo completo di «Modifier degli eventi v-on» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Modifier degli eventi v-on»?

.stop, .prevent, .self, .once, .capture, .passive — quando e perché usare ciascun modifier Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Modifier degli eventi v-on»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy