Kapitel 8: Vue Directive (Teil 1)

📗 Lernziel: Vue Directive meistern - v-bind, v-model, v-on!

---

8.1 v-bind - Attributbindung

v-bind bindet HTML-Attribute an Daten.

Syntax:

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

const imageUrl = ref('https://via.placeholder.com/150')
const isDisabled = ref(true)
const buttonText = ref('Klick mich')
</script>

<template>
  <!-- Vollständige Syntax -->
  <img v-bind:src="imageUrl" />
  <button v-bind:disabled="isDisabled">{{ buttonText }}</button>
  
  <!-- Kurzform (Doppelpunkt `:`) -->
  <img :src="imageUrl" />
  <button :disabled="isDisabled">{{ buttonText }}</button>
  
  <!-- Klassenbindung -->
  <div :class="{ active: isActive, 'text-red': hasError }">Inhalt</div>
  
  <!-- Stylebindung -->
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">Inhalt</div>
</template>

Klassenbindung (erweitert):

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

const isActive = ref(true)
const error = ref(null)

const classObject = reactive({
  active: true,
  'text-danger': false
})
</script>

<template>
  <!-- Objekt-Syntax -->
  <div :class="{ active: isActive, 'text-danger': error }">Inhalt</div>
  
  <!-- Array-Syntax -->
  <div :class="[isActive ? 'active' : '', 'text-danger']">Inhalt</div>
  
  <!-- Computed Property -->
  <div :class="classObject">Inhalt</div>
</template>

---

8.2 v-model - Zwei-Wege-Datenbindung

v-model synchronisiert Daten zwischen Input und State.

Beispiele:

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

const message = ref('')
const checked = ref(false)
const picked = ref('')
const selected = ref('')
const multiSelected = ref([])
</script>

<template>
  <!-- Text Input -->
  <input v-model="message" placeholder="Nachricht eingeben" />
  <p>Nachricht: {{ message }}</p>
  
  <!-- Checkbox -->
  <input type="checkbox" v-model="checked" />
  <label>{{ checked ? 'Aktiviert' : 'Deaktiviert' }}</label>
  
  <!-- Radio Buttons -->
  <input type="radio" v-model="picked" value="Eins" /> Eins
  <input type="radio" v-model="picked" value="Zwei" /> Zwei
  <p>Gewählt: {{ picked }}</p>
  
  <!-- Select -->
  <select v-model="selected">
    <option value="" disabled>Wählen...</option>
    <option value="A">Option A</option>
    <option value="B">Option B</option>
  </select>
  <p>Ausgewählt: {{ selected }}</p>
  
  <!-- Multi-Select -->
  <select v-model="multiSelected" multiple>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <p>Ausgewählt: {{ multiSelected }}</p>
</template>

Modifikatoren:

<!-- .lazy - Nach blur event (nicht bei input) -->
<input v-model.lazy="msg" />

<!-- .number - Automatisch in Zahl umwandeln -->
<input v-model.number="age" type="number" />

<!-- .trim - Leerzeichen entfernen -->
<input v-model.trim="msg" />

---

8.3 v-on / @ - Ereignisbindung

v-on bindet Ereignisse (Events) an Funktionen.

Syntax:

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

const count = ref(0)

const increment = () => {
  count.value++
}

const greet = (message) => {
  alert(message)
}
</script>

<template>
  <!-- Vollständige Syntax -->
  <button v-on:click="increment">Klick mich</button>
  
  <!-- Kurzform (`@`) -->
  <button @click="increment">Klick mich</button>
  
  <!-- Mit Parametern -->
  <button @click="greet('Hallo!')">Grüßen</button>
  
  <!-- Ereignis-Objekt -->
  <button @click="event => console.log(event)">Event anzeigen</button>
</template>

Ereignismodifikatoren:

<!-- .stop - Event-Bubbling stoppen -->
<button @click.stop="doSomething">Stop</button>

<!-- .prevent - Standardverhalten verhindern -->
<form @submit.prevent="onSubmit">
  <button type="submit">Absenden</button>
</form>

<!-- .once - Nur einmal ausführen -->
<button @click.once="doSomething">Einmalig</button>

<!-- .self - Nur wenn Event auf eigenem Element ausgelöst -->
<div @click.self="doSomething">...</div>

<!-- Tasten-Modifikatoren -->
<input @keyup.enter="submit" />
<input @keyup.esc="cancel" />

Häufige Events:

<!-- Maus-Events -->
<button @click="handler">Klick</button>
<button @dblclick="handler">Doppelklick</button>
<div @mouseover="handler">Maus über</div>
<div @mouseout="handler">Maus weg</div>

<!-- Tastatur-Events -->
<input @keydown="handler" />
<input @keyup="handler" />
<input @keypress="handler" />

<!-- Formular-Events -->
<form @submit="handler">...</form>
<input @input="handler" />
<input @change="handler" />

<!-- Andere -->
<div @scroll="handler">...</div>
<video @play="handler">...</video>

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ v-bind (:) - Attributbindung
• ✅ v-model - Zwei-Wege-Datenbindung
• ✅ v-on (@) - Ereignisbindung
• ✅ Modifikatoren für Directive

🎯 Nächster Schritt: In Kapitel 9 lernst du weitere Directive!

---

← Zurück zu Kapitel 7: Vue GrundlagenWeiter zu Kapitel 9: Weitere Directive →