So rendern Sie in Vue

Vue.js ist ein beliebtes Frontend-Framework. Seine Hauptaufgabe besteht darin, Daten und Ansichten zu binden und automatisch den richtigen Inhalt darzustellen.

In Vue.js werden Ansichten normalerweise mit den folgenden Methoden gerendert:

1. Verwendung von Interpolationsausdrücken {{}} für die Datenbindung

Vue.js unterstützt die Verwendung von Interpolationsausdrücken für die Datenbindung in Vorlagen. Interpolationsausdrücke sind eine der grundlegendsten Anweisungen von Vue.js und werden zum Binden von Daten in Vorlagen verwendet. Vue.js verwendet die Mustache-Syntax (d. h. doppelte geschweifte Klammern), um Ausdrücke in HTML-Vorlagen einzufügen.

Die folgende Vorlage rendert beispielsweise eine einfache Nachricht:

<div>
    {{ message }}
</div>

In der Vue.js-Instanz können Sie einen Wert für das Nachrichtenattribut festlegen, der in der Vorlage dynamisch gerendert wird:

new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue.js!'
    }
});

Dies rendert a div-Tag, das die Nachricht „Hallo, Vue.js!“ enthält.

2. Verwenden Sie die v-bind-Direktive für die Attributbindung.

Die v-bind-Direktive wird verwendet, um Daten an Attribute von HTML-Elementen zu binden. Im folgenden Code bindet v-bind beispielsweise das Titelattribut an die Zeichenfolgenvariable msg:

<div v-bind:title="msg">
    Hover your mouse to see the title
</div>

In einer Vue.js-Instanz können Sie einen Wert für das msg-Attribut festlegen, der dynamisch in der Vorlage gerendert wird:

new Vue({
    el: '#app',
    data: {
        msg: 'Hello, Vue.js!'
    }
});

Wenn der Benutzer mit dem Mauszeiger über dieses Element fährt, zeigt der Browser einen Tooltip mit dem Wert des msg-Attributs an.

3. Verwenden Sie die v-for-Direktive für das Schleifenrendering

Vue.js verwendet die v-for-Direktive, um das Listenrendering zu implementieren, das wiederholt ein HTML-Fragment basierend auf jedem Element in der Datenquelle rendert. Im folgenden Code stellt die v-for-Direktive beispielsweise jede Zeichenfolge im Nachrichtenarray als li-Element dar:

<ul>
    <li v-for="message in messages">{{ message }}</li>
</ul>

In einer Vue.js-Instanz können Sie ein Array für das Nachrichtenattribut festlegen, das angezeigt wird in der Vorlage Dynamisch gerendert in:

new Vue({
    el: '#app',
    data: {
        messages: ['Hello', 'Vue', 'JS']
    }
});

Dadurch wird eine ungeordnete Liste von drei Nachrichten gerendert.

4. Rendern Sie Elemente bedingt mit den Anweisungen v-if und v-show.

Sowohl die Anweisungen v-if als auch v-show können zum bedingten Rendern von Elementen in Vorlagen verwendet werden. Die v-if-Direktive rendert ein Element bedingt basierend auf der Auswertung eines Ausdrucks, während die v-show-Direktive ein Element über CSS ein- oder ausblendet, anstatt es vollständig zu rendern oder zu zerstören.

Im folgenden Code wird beispielsweise das h1-Element auf der Seite abhängig vom Wert der showHeading-Variablen bedingt gerendert:

<h1 v-if="showHeading">This is the heading</h1>

In der Vue.js-Instanz können Sie einen Wert für das showHeading-Attribut festlegen. was in der Vorlage angezeigt wird. Dynamisch gerendert in:

new Vue({
    el: '#app',
    data: {
        showHeading: true
    }
});

Wenn der showHeading-Wert wahr ist, wird das h1-Element gerendert, andernfalls wird es nicht gerendert.

Zusammenfassung

Das Obige sind einige grundlegende Rendering-Techniken in Vue.js. Das Verstehen und Beherrschen der Rendering-Funktionsprinzipien und -Techniken von Vue.js ist der Schlüssel zur Entwicklung effizienter und wartbarer Webanwendungen. Vue.js bietet eine Fülle von Anweisungen und Optionen, um die Verarbeitung von Datenbindung und -rendering zu vereinfachen und gleichzeitig die Entwicklungseffizienz zu verbessern.

Das obige ist der detaillierte Inhalt vonSo rendern Sie in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!