Modul 2: Vue Grundlagen

Event-Handling

Benutzerinteraktionen abfangen — von Klicks bis Tastatureingaben

Einführung

In jeder interaktiven Anwendung musst du auf Benutzeraktionen reagieren: Klicks, Tastatureingaben, Formulareingaben und mehr. Vue macht das mit der v-on-Direktive (Kurzform: @) einfach und deklarativ.

🛤️

Rails-Vergleich: Stimulus vs Vue Events

In Rails verwendest du Stimulus für clientseitige Interaktionen. Du definierst Controller, Targets und Actions in separaten JavaScript-Dateien und verbindest sie über data-*-Attribute. Vue integriert das Event-Handling direkt ins Template — kein separater Controller nötig.

Rails Stimulus

<!-- Stimulus: Separate JS-Datei + data-Attribute -->
<div data-controller="counter">
  <span data-counter-target="output">0</span>
  <button data-action="click->counter#increment">+1</button>
</div>

// counter_controller.js
import { Controller } from '@hotwired/stimulus'
export default class extends Controller {
  static targets = ['output']
  count = 0
  increment() {
    this.count++
    this.outputTarget.textContent = this.count
  }
}

Vue Event-Handling

<!-- Vue: Alles in einer Datei, reaktiv -->
<script setup>
const count = ref(0)
</script>

<template>
  <span>{{ count }}</span>
  <button @click="count++">+1</button>
</template>

Vue ist deutlich kompakter: kein Controller-Boilerplate, keine Targets, keine manuelle DOM-Manipulation.

v-on / @ — Events lauschen

Mit v-on (Kurzform @) kannst du auf jedes DOM-Event reagieren:

EventGrundlagen.vue

<template>
  <!-- Langform -->
  <button v-on:click="handleClick">Klick mich</button>

  <!-- Kurzform (bevorzugt) -->
  <button @click="handleClick">Klick mich</button>

  <!-- Verschiedene Events -->
  <input @input="onInput">        <!-- bei jeder Eingabe -->
  <input @change="onChange">       <!-- bei Fokusverlust nach Änderung -->
  <form @submit="onSubmit">       <!-- Formular absenden -->
  <div @mouseover="onHover">      <!-- Maus darüber -->
  <div @scroll="onScroll">        <!-- Scrollen -->
</template>

Inline-Handler vs Methoden-Handler

Du hast zwei Möglichkeiten, auf Events zu reagieren:

HandlerArten.vue

<script setup>
import { ref } from 'vue'

const count = ref(0)

// Methoden-Handler: Eine definierte Funktion
function increment() {
  count.value++
}

// Methoden-Handler mit Event-Objekt
function handleClick(event: MouseEvent) {
  console.log('Geklickt bei:', event.clientX, event.clientY)
}

// Methoden-Handler mit eigenen Parametern
function greet(name: string, event: MouseEvent) {
  console.log(\`

const codeExample5 =

💡

Wann welchen Handler verwenden?

Inline-Handler eignen sich für einfache Aktionen: @click="count++" oder @click="sichtbar = !sichtbar".

Methoden-Handler eignen sich für komplexere Logik: API-Aufrufe, Validierung, mehrstufige Abläufe.

Event-Modifikatoren

Vue bietet Modifikatoren, die häufige Event-Muster vereinfachen. Statt event.preventDefault() im Handler zu schreiben, hängst du einfach .prevent an die Direktive.

EventModifikatoren.vue

ℹ️

Warum Modifikatoren statt JavaScript?

Modifikatoren halten deinen Handler-Code sauber. Der Handler kümmert sich nur um die Geschäftslogik, nicht um DOM-Event-Details. Das macht den Code lesbarer und testbarer.

Tasten-Modifikatoren

Für Tastaturevents bietet Vue praktische Modifikatoren, damit du nicht manuell event.key prüfen musst:

TastenModifikatoren.vue

<template>
  <!-- Bestimmte Tasten -->
  <input @keyup.enter="absenden">       <!-- Enter-Taste -->
  <input @keyup.escape="abbrechen">     <!-- Escape-Taste -->
  <input @keyup.tab="naechstesFeld">    <!-- Tab-Taste -->
  <input @keyup.delete="loeschen">      <!-- Delete/Backspace -->
  <input @keyup.space="abspielen">      <!-- Leertaste -->

  <!-- Pfeiltasten -->
  <div @keyup.up="hoch">                <!-- Pfeil hoch -->
  <div @keyup.down="runter">            <!-- Pfeil runter -->
  <div @keyup.left="links">             <!-- Pfeil links -->
  <div @keyup.right="rechts">           <!-- Pfeil rechts -->

  <!-- System-Modifikatoren (Kombinationen) -->
  <input @keyup.ctrl.enter="speichern">  <!-- Strg + Enter -->
  <input @keyup.alt.s="speichern">       <!-- Alt + S -->
  <input @keyup.shift.tab="zurueck">     <!-- Shift + Tab -->
  <input @keyup.meta.k="suchen">         <!-- Cmd/Win + K -->

  <!-- .exact — NUR diese Kombination, keine zusätzlichen Tasten -->
  <button @click.ctrl.exact="nurCtrl">
    Nur Strg+Klick, nicht Strg+Shift+Klick
  </button>
</template>

Maus-Modifikatoren

Auch für Maus-Events gibt es spezielle Modifikatoren:

MausModifikatoren.vue

<template>
  <!-- Maustasten -->
  <div @click.left="linksKlick">Links-Klick</div>
  <div @click.right.prevent="rechtsKlick">Rechts-Klick (kein Kontextmenü)</div>
  <div @click.middle="mittelKlick">Mittel-Klick</div>
</template>

Interaktive Demo

Teste die verschiedenen Event-Handler und Modifikatoren selbst aus:

▶Event-Handling Live-Demo

Interaktiv

Klick-Zähler

.once Modifikator

.prevent auf Formular

Tipp: Escape leert das Feld (@keyup.escape)

.stop — Event Propagation

Äußeres DIV (klickbar)

Tasten-Modifikatoren

Zusammenfassung

💡

Das Wichtigste auf einen Blick

@event — Kurzform für v-on:event
Inline-Handler für einfache Aktionen, Methoden für komplexe Logik
.prevent — event.preventDefault()
.stop — event.stopPropagation()
.once — Event nur einmal auslösen
@keyup.enter, .escape, .space — Tasten-Modifikatoren
.ctrl, .alt, .shift, .meta — System-Modifikatoren
Modifikatoren sind verkettbar: @click.prevent.stop