0Pricing
Vue Academy · Lektion

v-on-Ereignismodifikatoren

.stop, .prevent, .self, .once, .capture, .passive — wann und warum Sie die einzelnen Modifikatoren verwenden.

v-on-Ereignismodifikatoren ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Sauberere Ereignisbehandlung

Die v-on-Direktive (Kurzform @) fügt Event-Listener hinzu. Event-Modifikatoren sind Suffixe, die typische DOM-Aufgaben wie das Unterbinden der Weitergabe oder das Verhindern von Standardaktionen erledigen, sodass Ihre Handler auf die Logik konzentriert bleiben.

Das Problem, das Modifikatoren lösen

Ohne Modifikatoren verteilen Sie DOM-Boilerplate auf die Handler: Sie rufen event.preventDefault() oder event.stopPropagation() auf. Modifikatoren verlagern das deklarativ ins Template.

.stop für stopPropagation

.stop verhindert, dass das Ereignis zu übergeordneten Elementen aufsteigt — es entspricht dem Aufruf von event.stopPropagation().

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

.prevent für preventDefault

.prevent ruft event.preventDefault() auf. Der klassische Anwendungsfall ist, ein Neuladen der Seite beim Absenden eines Formulars zu verhindern.

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

Modifikatoren verketten

Sie können Modifikatoren kombinieren. Die Reihenfolge ist wichtig — sie werden von links nach rechts angewendet.

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

.self: Nur das Element selbst

.self löst den Handler nur aus, wenn das Ereignisziel das Element selbst ist, nicht ein untergeordnetes Element, dessen Ereignis nach oben weitergeleitet wurde. Ideal für Overlay-Hintergründe.

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

Tastenmodifikatoren

Bei Tastaturereignissen können Sie auf bestimmte Tasten lauschen. @keyup.enter wird nur ausgelöst, wenn die Eingabetaste losgelassen wird.

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

Weitere Tastenmodifikatoren

Vue stellt Aliase für häufig verwendete Tasten bereit: .enter, .esc, .tab, .delete, .space und Pfeiltasten wie .up und .down.

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

.once: Handler nur einmal ausführen

.once führt den Handler höchstens einmal aus und entfernt danach den Listener. Nützlich für einmalige Aktionen wie das Schließen einer Willkommensnachricht.

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

.passive für bessere Scroll-Performance

.passive teilt dem Browser mit, dass der Handler nicht preventDefault() aufrufen wird. Dadurch kann der Browser ohne Wartezeit flüssig scrollen, was die Leistung bei Touch- und Scroll-Ereignissen verbessert.

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

Den richtigen Modifikator auswählen

  • .stop — Weitergabe unterbinden.
  • .prevent — Standardverhalten verhindern.
  • .self — weitergeleitete Ereignisse untergeordneter Elemente ignorieren.
  • .once — einmal ausführen.
  • .passive — niemals das Standardverhalten verhindern; bessere Scroll-Performance.

Hinweis: Kombinieren Sie .passive niemals mit .prevent — die beiden widersprechen sich.

Kurzer Test

Wählen Sie den richtigen Modifikator aus.

Zusammenfassung

Event-Modifikatoren halten Handler übersichtlich:

  • .stop = stopPropagation, .prevent = preventDefault.
  • .self wird nur für das Element selbst ausgelöst.
  • Tastenmodifikatoren wie .enter zielen auf bestimmte Tasten.
  • .once führt einen Handler einmal aus; .passive verbessert die Scroll-Performance.

Häufig gestellte Fragen

Ist die Lektion „v-on-Ereignismodifikatoren“ kostenlos?

Ja — der vollständige Text von „v-on-Ereignismodifikatoren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „v-on-Ereignismodifikatoren“?

.stop, .prevent, .self, .once, .capture, .passive — wann und warum Sie die einzelnen Modifikatoren verwenden. Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „v-on-Ereignismodifikatoren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. v-model: Interna der bidirektionalen Bindung
  2. v-on-Ereignismodifikatoren
  3. Dynamische und mehrere Bindings mit v-bind
  4. Benutzerdefinierte Direktiven schreiben
← Zurück zu Vue Academy