Vue3 Eingebaute Direktiven

Vue.js verfügt über mehrere eingebaute Direktiven (Directives), um spezifisches reaktives Verhalten hinzuzufügen oder das DOM in Templates zu manipulieren.

Die folgenden sind häufig verwendete eingebaute Direktiven in Vue.js:

Direktive Anwendungsbeispiel Beschreibung
v-text <p v-text="message"></p> Aktualisiert den Textinhalt des ElementstextContent, ähnlich wie Interpolation{{ }}, aber es ist eine Einweg-Bindung.
v-html <div v-html="htmlContent"></div> Aktualisiert den Textinhalt des ElementsinnerHTML, wird zur Ausgabe von HTML verwendet.
v-model <input v-model="value"> Erstellt eine Zwei-Wege-Datenbindung bei Formularsteuerelementen und synchronisiert Eingabefelder mit Daten-Eigenschaften.
v-show <div v-show="isVisible"></div> Schaltet die Anzeige und Sichtbarkeit eines Elements basierend auf dem Wahrheitswert eines Ausdrucks um, unter Verwendung der CSS-EigenschaftdisplayEigenschaft.
v-if <p v-if="isVisible">Visible</p> Rendert ein Element bedingt basierend auf dem Wahrheitswert eines Ausdrucks; wenn die Bedingung falsch ist, wird das Element aus dem DOM entfernt.
v-else <p v-if="isVisible">Visible</p><p v-else>Not Visible</p> v-ifEine ergänzende Direktive zum Anzeigen von Fallback-Inhalten, wenn die Bedingung falsch ist.
v-else-if <template v-if="type === 'A'"><p>Type A</p></template><template v-else-if="type === 'B'"><p>Type B</p></template> Wird direkt nachv-ifundv-elsenach, zur Mehrfachbedingungsprüfung.
v-for <li v-for="(item, index) in items" :key="index">{{ item }}</li> Iteriert über jedes Element eines Arrays oder Objekts und generiert eine entsprechende Anzahl von Elementen.
v-on <button v-on:click="handleClick">Click me</button> Bindet einen Event-Listener, um DOM-Ereignisse abzuhören; kann abgekürzt werden als@。
v-bind <img v-bind:src="imageSrc.html"> Bindet HTML-Attribute dynamisch; kann abgekürzt werden als:。
v-slot <template v-slot:header><h2>Header</h2></template> Syntax für benannte Slots, bietet eine Stelle zum Einfügen von Inhalten von Kindkomponenten.
v-pre <div v-pre>{{ message }}</div> Überspringt den Kompilierungsprozess für dieses Element und alle seine untergeordneten Elemente, wird verwendet, um rohe Mustache-Tags anzuzeigen.
v-cloak [v-cloak] { display: none; } Verbirgt den Vorlageninhalt, bis die Vue-Instanz mit dem Kompilieren fertig ist, und verhindert so, dass nicht kompilierte Mustache-Tags angezeigt werden.
v-once <p v-once>{{ message }}</p> Rendert das Element und die Komponente nur einmal und wird bei späteren Datenänderungen nicht aktualisiert.
v-memo 
<div v-memo="[valueA, valueB]">
  ...
</div>

Speichert einen Teilbaum der Vorlage zwischen.

Wenn die Komponente erneut rendert, fallsvalueAundvalueBalle unverändert bleiben, dies<div>und alle Aktualisierungen seiner Kinder werden übersprungen. Tatsächlich wird sogar die Erstellung von virtuellen DOM-Vnodes übersprungen, weil eine zwischengespeicherte Kopie des Teilbaums wiederverwendet werden kann.

v-text

  • Nutzung: <p v-text="message"></p>
  • Beschreibung: Aktualisiert die des ElementstextContent, ähnlich wie Interpolation{{ }}, aber es ist eine einseitige Bindung. Es kann verwendet werden, um den reinen Textinhalt eines Elements festzulegen.

Beispiel

<p v-text="message"></p>

Beispiel

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-html

  • Nutzung: <div v-html="htmlContent"></div>
  • Beschreibung: Aktualisiert die des ElementsinnerHTML, wird verwendet, um Inhalte auszugeben, die HTML-Struktur enthalten. Auf Sicherheit sollte geachtet werden, um XSS-Angriffe zu vermeiden.

Beispiel

<div v-html="htmlContent"></div>

Beispiel

data() {
    return {
        htmlContent: '<strong>Vue.js</strong> ist großartig!'
    };
}

v-model

  • Nutzung: <input v-model="value">
  • Beschreibung: Erstellt eine bidirektionale Datenbindung für Formularsteuerelemente, synchronisiert Eingabefelder mit Dateneigenschaften und unterstützt mehrere Formularsteuerelementtypen.

Beispiel

<input type="text" v-model="message">

Beispiel

data() {
    return {
    message: ''
    };
}

v-show

  • Nutzung: <div v-show="isVisible"></div>
  • Beschreibung: Schaltet die Anzeige und Sichtbarkeit eines Elements basierend auf dem Wahrheitswert eines Ausdrucks um, unter Verwendung der CSS-displayEigenschaft, um die Sichtbarkeit des Elements zu steuern.

Beispiel

<div v-show="isVisible">Sichtbar, wenn true</div>

Beispiel

data() {
    return {
    isVisible: true
    };
}

v-if / v-else / v-else-if

  • Nutzung: <p v-if="isVisible">Visible</p><p v-else>Not Visible</p>
  • Beschreibung: Rendert ein Element bedingt basierend auf dem Wahrheitswert eines Ausdrucks.v-elseundv-else-ifJav-ifEine ergänzende Direktive für die Prüfung mehrerer Bedingungen.

Beispiel

<p v-if="isVisible">Sichtbar</p>
<p v-else>Nicht sichtbar</p>

Beispiel

data() {
    return {
        isVisible: true
    };
}

v-for

  • Nutzung: <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  • Beschreibung: Iteriert über jedes Element eines Arrays oder Objekts, erzeugt eine entsprechende Anzahl von Elementen und unterstützt die Angabe eines Schlüssels zur Verbesserung der Rendering-Effizienz.

Beispiel

<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

Beispiel

data() {
    return {
        items: ['Apple', 'Banana', 'Cherry']
    };
}

v-on (@)

  • Nutzung: <button v-on:click="handleClick">Click me</button>
  • Beschreibung: Bindet einen Event-Listener, um DOM-Ereignisse zu überwachen; kann abgekürzt werden als@. Unterstützt Modifikatoren und dynamische Ereignisnamen.

Beispiel

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

Beispiel

methods: {
    handleClick() {
    alert('Button geklickt');
    }
}

v-bind ( : )

  • Nutzung: <img v-bind:src="imageSrc.html">
  • Beschreibung: Bindet HTML-Attribute dynamisch; kann abgekürzt werden als:. Wird verwendet, um Elementattribute dynamisch festzulegen, zum Beispielsrc、hrefusw.

Beispiel

<img v-bind:src="imageSrc" alt="Vue Logo">

Beispiel

data() {
    return {
    imageSrc: 'https://vuejs.org/images/logo.png'
    };
}

v-slot

  • Nutzung: <template v-slot:header><h2>Header</h2></template>
  • Beschreibung: Syntax für benannte Slots, bietet eine Stelle zum Einfügen von Inhalten von Kindkomponenten, verwendet für die Inhaltsverteilung in benutzerdefinierten Komponenten.

Beispiel

<BaseLayout>
    <template v-slot:header>
    <h2>Header-Inhalt</h2>
    </template>
    <template v-slot:footer>
    <p>Footer-Inhalt</p>
    </template>
</BaseLayout>

Beispiel

// Definition der BaseLayout-Komponente
Vue.component('BaseLayout', {
    template: `
    <div>
        <header><slot name="header"></slot></header>
        <main><slot></slot></main>
        <footer><Slot-Name="footer"></Slot></footer>
    </div>
    `
});

v-pre

  • Nutzung: <div v-pre>{{ message }}</div>
  • Beschreibung: Überspringt den Kompilierungsprozess für dieses Element und alle seine untergeordneten Elemente, wird verwendet, um rohe Mustache-Tags anzuzeigen und zu verhindern, dass Vue den Inhalt kompiliert.

Beispiel

<div v-pre>{{ message }}</div>

Beispiel

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-cloak

  • Nutzung: [v-cloak] { display: none; }
  • Beschreibung: Versteckt den Template-Inhalt, bis die Vue-Instanz die Kompilierung abgeschlossen hat, und verhindert so, dass unkompilierte Mustache-Tags angezeigt werden.

Beispiel

<div v-cloak>{{ message }}</div>

Beispiel

[v-cloak] { display: none; }

Beispiel

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-once

  • Nutzung: <p v-once>{{ message }}</p>
  • Beschreibung: Rendert das Element und die Komponente nur einmal und wird nicht bei nachfolgenden Datenänderungen aktualisiert; wird für statischen Inhalt oder Inhalt verwendet, der nicht häufig aktualisiert wird.

Beispiel

<p v-once>{{ message }}</p>

Beispiel

data() {
    return {
    message: 'Hello, Vue!'
    };
}
Andere Erweiterungen