Wie Vue.js das Rendern von Vorlagen im Browser implementiert

Dieser Artikel stellt vor, wie Vue.js das Rendern von Vorlagen im Browser implementiert. Jetzt kann ich es mit Ihnen teilen.

Rendering : Erhalten Sie die Back-End-Daten, laden Sie sie gemäß bestimmten Regeln in die geschriebene Vorlage und geben Sie sie in HTML aus, das im Browser angezeigt wird. vue.js ist ein Vorlagen-Rendering, das im Front-End (dh im Browser) durchgeführt wird. .

Vergleich von Front-End- und Back-End-Rendering

Back-End: Das Rendering wird auf der Serverseite durchgeführt, nachdem der Serverprozess Daten von erhalten hat In der Datenbank werden die Daten mithilfe der Front-End-Vorlagen-Engine geladen, über das Netzwerk an den Browser des Benutzers übertragen und anschließend vom Browser in sichtbare Seiten analysiert.

Frontend: Verwenden Sie JS, um Daten und HTML-Vorlagen im Browser zu kombinieren.

Die Vorteile des Front-End-Renderings sind:

1. Geschäftstrennung, das Back-End muss nur eine Datenschnittstelle bereitstellen, und das Front-End benötigt es während der Entwicklung nicht. Stellen Sie die entsprechende Back-End-Umgebung bereit und verwenden Sie einige Proxyserver-Tools, um remote auf die Back-End-Daten für die Entwicklung zuzugreifen, was die Entwicklungseffizienz verbessern kann.
2. Der Rechenaufwand wird übertragen. Die Aufgaben, die ursprünglich das Back-End-Rendering erforderten, werden an das Front-End übertragen, wodurch der Druck auf den Server verringert wird.

Vorteile des Backend-Renderings

1. Freundlich für Suchmaschinen.
2. Die Ladezeit der Homepage ist kurz. Der HTML-Code wird direkt nach dem Laden des Back-End-Renderings angezeigt, das Front-End-Rendering benötigt jedoch nach Abschluss des Ladevorgangs noch einige Zeit für das JS-Rendering.

Bedingtes Rendern

1.v-if/v-else

Bestimmen Sie anhand des Datenwerts, ob der DOM-Knoten ausgegeben werden soll , und Enthält untergeordnete Elemente.

    <p v-if="yes">yes</p> //若当前vm实例中包含data.yes = true，则模板引擎将会编译这个DOM节点，输出<p>yes</p>
    <p v-if="yes">yes</p>
    <p v-else>no</p>    //注：v-else必须紧跟v-if使用。v-if绑定的元素包含子元素则不影响和v-else的使用。

    <p v-if="yes">
        <p v-if="inner">inner</p>
        <p v-else>not inner </p>
    </p>
    <p v-else>no</p>    new Vue({
        data: {
            yes: true,
            inner :false
        }
    })

Das Ausgabeergebnis ist:

    <p>
        <p>not inner</p>
    </p>

2.v-show

    <p v-show="show">show</p>
    <p v-show="show">show</p>
    <p v-else>hidden</p>

Hinweis: v-show-Element, unabhängig vom Bindungswert wahr oder falsch ist, wird gerendert und im DOM gespeichert. Durch das Ändern des Bindungswerts wird nur die CSS-Attributanzeige des Elements geändert. v-if-Element, die Seite zeigt diese Beschriftung nicht an.

3.v-if vs v-show

1. Wenn v-if umgeschaltet wird, führt dies zu Änderungen in der Dom-Betriebsebene. v-show hat nur den Stil geändert. Aus Sicht des Umschaltens verbraucht V-Show daher weniger Leistung als V-IF.

2. Wenn v-if umgeschaltet wird, wird vue.js teilweise kompiliert/deinstalliert, da die Vorlage in v-if möglicherweise auch Datenbindungen oder Unterkomponenten enthält. v-show führt weiterhin normale Vorgänge aus und stellt dann den CSS-Stil auf display: none ein.

Im Allgemeinen hat v-if höhere Wechselkosten und v-show hat höhere anfängliche Renderingkosten. Daher ist es notwendig, die geeignete Anleitung basierend auf dem tatsächlichen Nutzungsszenario auszuwählen.

Listenwiedergabe

Die v-for-Anweisung wird hauptsächlich für die Listenwiedergabe verwendet. Sie rendert wiederholt das an v-for gebundene DOM-Element und die internen untergeordneten Elemente entsprechend das empfangene Array-Element, und Sie können die Daten im Array abrufen und sie in den Knoten rendern, indem Sie einen Alias ​​festlegen.

    v-for遍历数组：    <ul>
        <li v-for="item in items">
            <h3>{{ item.title}}</h3>
            <p>{{item.description}}</p>
        </li>
    </ul>
    var vm = new Vue({
        el: &#39;#app&#39;,        data: {
            items: [
                {_id:1,title:"title-1",description:"description-1"},
                {_id:2,title:"title-2",description:"description-2"},
                {_id:3,title:"title-3",description:"description-3"},
                {_id:4,title:"title-4",description:"description-4"},            ]
        }
    });

//items ist der Attributname in Daten und item ist ein Alias. Sie können item verwenden, um jedes vom aktuellen Array durchlaufene Element abzurufen.

v-for verfügt über eine integrierte $index-Variable, die innerhalb der v-for-Anweisung aufgerufen werden kann, um den Index des aktuellen Array-Elements auszugeben.
Darüber hinaus können wir auch einen eigenen Alias ​​für den Index erstellen:

    <li v-for="(index,item) in items">{{ index }} - {{ $index }} - {{ item.title }}</li>

Hinweis: vue.js kapselt die native Methode des Arrays in Daten, sodass es bei Änderungen eine Ansichtsaktualisierung auslösen kann Das Array, aber Ansichtsaktualisierungen können in den folgenden zwei Situationen nicht ausgelöst werden:
1. Array-Elemente direkt über den Index ändern, zum Beispiel: vm.items[0] = {title:'title-changed'}; 2. Die Länge des Arrays kann nicht direkt geändert werden, zum Beispiel: vm.items.length = 0

    vm.items.$set(0,{title:'title-changed'})  
 或者  vm.$set('items[0]',{title:'title-also-changed'});

    <li v-for="item in items" track-by="_id"></p>

    <li v-for="(key,value) in objectDemo">
        {{ key }} - {{ $key }} : {{ value }}    </li>
    var vm = new Vue({
        el:&#39;#app&#39;,        data: {
            objectDemo : {
                a:&#39;a-value&#39;,
                b:&#39;b-value&#39;,
                c:&#39;c-value&#39;
            }
        }
    })

    <li v-for="n in 5">{{ n }}</li>

Vorlagen-Tag-Verwendung

    <template v-if="yes">
        <p>this is first dom</p>
        <p>this is second dom</p>
    </template>
    //输出结果    <p>this is first dom</p>
    <p>this is second dom</p>template标签也支持使用v-for指令，用来渲染同级的多个兄弟元素。    <template v-for="item in items">
        <p>{{ item.name }}</p>
        <p>{{ item.desc }}</p>
    </template>

Verwandte Empfehlungen:

Front-End-Vorlagen und Rendering

Detaillierte Verwendung der Template-Rendering-Engine von jquery jtemplates.js

Design und Implementierung des Template- und Datentrennungs-Renderings Methode

Flasche verwendet Rendering-Vorlage

WeChat Mini-Programm – Rendering komplexer Datenstrukturvorlagen

Das obige ist der detaillierte Inhalt vonWie Vue.js das Rendern von Vorlagen im Browser implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!