Kapitel 11: Vue Directive (Teil 4) - Weitere Directive

📗 Lernziel: v-once, v-html, v-pre, v-cloak meistern!

---

11.1 v-once - Einmalige Rendering

v-once rendert Element und untergeordnete Elemente nur einmal.

Verwendung:

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

const message = ref('Hallo Vue!')
</script>

<template>
  <!-- Wird nur einmal gerendert -->
  <div v-once>
    {{ message }}
  </div>
  
  <!-- Normal (wird aktualisiert) -->
  <div>
    {{ message }}
  </div>
  
  <button @click="message = 'Aktualisiert!'">Aktualisieren</button>
</template>

Anwendungsfall:

• Statische Inhalte (Performance-Optimierung)
• Überschriften, die sich nie ändern

---

11.2 v-html - HTML einfügen

v-html fügt HTML-Inhalt in ein Element ein.

⚠️ Achtung: XSS-Gefahr! Nur für vertrauenswürdige Inhalte verwenden!

Beispiel:

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

const htmlContent = ref('<strong style="color: red;">Wichtiger Text</strong>')
const unsafeContent = ref('<script>alert("XSS")</script>')
</script>

<template>
  <!-- ✅ Sicher (vertrauenswürdig) -->
  <div v-html="htmlContent"></div>
  
  <!-- ❌ Gefährlich (unsicher) -->
  <!-- NIEMALS Benutzereingaben mit v-html rendern! -->
  <div v-html="unsafeContent"></div>
</template>

Besser: Verwende Vue-Komponenten oder ( automatische Escaping)!

---

11.3 v-pre - Überspringen der Kompilierung

v-pre verhindert die Vue-Kompilierung für dieses Element und seine untergeordneten Elemente.

Verwendung:

<template>
  <!-- Vue ignoriert diesen Bereich -->
  <div v-pre>
    {{ Dies wird als normaler Text angezeigt }}
    <span v-if="false">Wird nicht ausgewertet</span>
  </div>
  
  <!-- Normal (Vue kompiliert) -->
  <div>
    {{ message }}
  </div>
</template>

Anwendungsfall:

• Anzeigen von Vue-Code-Beispielen in Dokumentation
• Performance-Optimierung für statische Bereiche

---

11.4 v-cloak - Vermeidung von Flackern

v-cloak versteckt Elemente, bis Vue vollständig geladen ist.

Verwendung:

<!-- index.html oder Komponente -->
<style>
  [v-cloak] {
    display: none;
  }
</style>

<div id="app">
  <!-- Versteckt, bis Vue geladen ist -->
  <div v-cloak>
    {{ message }}
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp, ref } = Vue
  
  createApp({
    setup() {
      const message = ref('Hallo Vue!')
      return { message }
    }
  }).mount('#app')
</script>

Hinweis: Bei modernen Build-Tools (Vite, webpack) ist v-cloak meist nicht mehr nötig!

---

11.5 v-memo - Performance-Optimierung (Neu in Vue 3)

v-memo verhindert die Neurendering eines Elements, wenn sich die angegebenen Abhängigkeiten nicht ändern.

Beispiel:

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

const items = ref([
  { id: 1, name: 'Apfel', price: 1.0 },
  { id: 2, name: 'Banane', price: 0.5 },
  { id: 3, name: 'Orange', price: 0.8 }
])

const selectedId = ref(1)
</script>

<template>
  <ul>
    <li 
      v-for="item in items" 
      :key="item.id"
      v-memo="[item.id === selectedId]"
    >
      {{ item.name }} - {{ item.price }}€
      <span v-if="item.id === selectedId">← Ausgewählt</span>
    </li>
  </ul>
</template>

Anwendungsfall:

• Große Listen mit komplexen Inhalten
• Performance-Optimierung

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ v-once - Einmalige Rendering
• ✅ v-html - HTML einfügen (Vorsicht XSS!)
• ✅ v-pre - Überspringen der Kompilierung
• ✅ v-cloak - Vermeidung von Flackern
• ✅ v-memo - Performance-Optimierung

🎯 Nächster Schritt: In Kapitel 12 lernst du Computed Properties!

---

← Zurück zu Kapitel 10: v-for (Listen)Weiter zu Kapitel 12: Computed Properties →