Rendering-Funktion und JSX-Details

1. Grundlagen

Vue empfiehlt in den meisten Fällen die Verwendung von Vorlagen zum Erstellen Ihres HTML. In einigen Szenarien benötigen Sie jedoch wirklich die volle Programmierleistung von JavaScript. Zu diesem Zeitpunkt können wir die Rendering-Funktion verwenden, die dem Compiler näher ist als die Vorlage

Sehen wir uns ein einfaches Beispiel an, bei dem die Renderfunktion nützlich ist. Angenommen, wir möchten einige Überschriften mit Ankern generieren:

<h1>
  <a name="hallo-welt" href="#hallo-welt" rel="external nofollow" >
    Hallo Welt!
  </a>
</h1>

Für das obige HTML haben wir beschlossen, die Komponentenschnittstelle wie folgt zu definieren:

<anchored-heading :level="1">Hallo Welt!</anchored-heading>

Wenn Sie mit dem Schreiben einer Komponente beginnen, die eine heading nur über level prop dynamisch generieren kann, denken Sie vielleicht schnell an eine Implementierung wie diese:

<script Typ="text/x-template" id="anchored-heading-template">
  <h1 v-if="Ebene === 1">
    <Steckplatz></Steckplatz>
  </h1>
  <h2 v-else-if="Ebene === 2">
    <Steckplatz></Steckplatz>
  </h2>
  <h3 v-else-if="Ebene === 3">
    <Steckplatz></Steckplatz>
  </h3>
  <h4 v-else-if="Ebene === 4">
    <Steckplatz></Steckplatz>
  </h4>
  <h5 v-else-if="Ebene === 5">
    <Steckplatz></Steckplatz>
  </h5>
  <h6 v-else-if="Ebene === 6">
    <Steckplatz></Steckplatz>
  </h6>
</Skript>

Vue.component('ankerte Überschrift', {
  Vorlage: „#anchored-heading-template“,
  Requisiten: {
    Ebene:
      Typ: Nummer,
      erforderlich: true
    }
  }
})

Die Verwendung einer Vorlage ist hier nicht die beste Wahl: Der Code ist nicht nur lang, sondern <slot></slot>， und muss beim Einfügen des Ankerelements erneut wiederholt werden.

Obwohl Vorlagen in den meisten Komponenten gut funktionieren, sind sie hier eindeutig nicht geeignet. Versuchen wir also, das obige Beispiel mithilfe der render neu zu schreiben:

Vue.component('ankerte Überschrift', {
  rendern: Funktion (ErstelleElement) {
    returniere Element erstellen(
      „h“ + this.level, // Tag-Name this.$slots.default // untergeordnetes Knoten-Array)
  },
  Requisiten: {
    Ebene:
      Typ: Nummer,
      erforderlich: true
    }
  }
})

Sieht viel einfacher aus! Dies vereinfacht den Code erheblich, erfordert jedoch, dass Sie mit property von Vue sehr vertraut sind. In diesem Beispiel müssen Sie wissen, dass wenn Sie untergeordnete Knoten ohne die v-slot-Direktive an eine Komponente übergeben, wie z. B. Hello world !“ in anchored-heading , diese untergeordneten Knoten in $slots.default in der Komponenteninstanz gespeichert werden. Sofern Sie dies noch nicht getan haben, empfehle ich Ihnen, sich vor dem Eintauchen in die Renderfunktionen über die API für Instanzeigenschaften zu informieren.

2. Knoten, Bäume und virtueller DOM

Bevor wir uns mit den Renderfunktionen befassen, ist es wichtig, ein wenig darüber zu verstehen, wie Browser funktionieren. Nehmen Sie das folgende HTML als Beispiel:

<div>
  <h1>Mein Titel</h1>
  Einige Textinhalte
  <!-- TODO: Slogan hinzufügen -->
</div>

Wenn der Browser diesen Code liest, erstellt er einen Baum aus „DOM-Knoten“, um den Überblick zu behalten, genau so, wie Sie einen Stammbaum zeichnen würden, um die Entwicklung der Familienmitglieder zu verfolgen.

Der dem obigen HTML entsprechende DOM-Knotenbaum wird unten angezeigt:

Jedes Element ist ein Knoten. Jeder Textabsatz ist auch ein Knoten. Sogar Kommentare sind Knoten. Ein Knoten ist ein Abschnitt einer Seite. Genau wie bei einem Stammbaum kann jeder Knoten untergeordnete Knoten haben (d. h., jeder Teil kann andere Teile enthalten).

Das effiziente Aktualisieren aller dieser Knoten kann schwierig sein, aber glücklicherweise müssen Sie dies nicht manuell tun. Sie müssen Vue lediglich mitteilen, wie das HTML auf der Seite aussehen soll. Dies kann in einer Vorlage erfolgen:

<h1>{{ Blogtitel }}</h1>

Oder in einer Renderfunktion:

rendern: Funktion (ErstelleElement) {
  returniere createElement('h1', dieser.BlogTitel)
}

In beiden Fällen hält Vue die Seite automatisch auf dem neuesten Stand, auch wenn sich der Blogtitel ändert.

1. Virtueller DOM

Vue erstellt einen virtuellen DOM, um zu verfolgen, wie sich der reale DOM ändert. Bitte schauen Sie sich diese Codezeile genau an:

returniere createElement('h1', dieser.BlogTitel)

Was genau gibt createElement zurück? Eigentlich kein echtes DOM-Element. Ein genauerer Name wäre möglicherweise createNodeDescription , da die darin enthaltenen Informationen Vue mitteilen, welche Art von Knoten auf der Seite gerendert werden muss, einschließlich der Beschreibungsinformationen seiner untergeordneten Knoten. Wir bezeichnen solche Knoten als „virtuelle Knoten“, die oft als „VNode“ abgekürzt werden. „Virtual DOM“ ist die Bezeichnung für den gesamten VNode-Baum, der vom Vue-Komponentenbaum erstellt wird.

3. createElement-Parameter

Als Nächstes müssen Sie wissen, wie Sie diese Funktionen in der Vorlage in der Funktion createElement verwenden. Dies sind die Parameter, die createElement akzeptiert:

// @returns {VNode}
Element erstellen(
  // {String | Objekt | Funktion}
  // Ein HTML-Tagname, ein Komponentenoptionsobjekt oder // eine asynchrone Funktion, die zu einem der oben genannten Ergebnisse führt. Pflichtfeld.
  'div',

  // {Objekt}
  // Ein Datenobjekt, das dem Attribut in der Vorlage entspricht. Optional.
  {
    // (Einzelheiten siehe nächsten Abschnitt)
  },

  // {Zeichenfolge | Array}
  // Untergeordnete virtuelle Knoten (VNodes), erstellt durch `createElement()`,
  // Sie können auch Zeichenfolgen verwenden, um „virtuelle Textknoten“ zu generieren. Optional.
  [
    'Schreiben Sie zuerst einen Text',
    createElement('h1', 'Eine Überschrift'),
    createElement(MeineKomponente, {
      Requisiten: {
        einigeProp: "foobar"
      }
    })
  ]
)

1. Tauchen Sie ein in Datenobjekte

Dabei ist Folgendes zu beachten: So wie v-bind:class und v-bind:style in der Vorlagensyntax speziell behandelt werden, verfügen sie auch über entsprechende Felder der obersten Ebene im VNode-Datenobjekt. Mit diesem Objekt können Sie auch normale HTML attribute sowie DOM property wie innerHTML (das die v-html-Direktive überschreibt) binden.

{
  // Gleiche API wie `v-bind:class`,
  // Akzeptiert einen String, ein Objekt oder ein Array aus Strings und Objekten 'class': {
    foo: wahr,
    Balken: falsch
  },
  // Gleiche API wie `v-bind:style`,
  // Akzeptiert einen String, ein Objekt oder ein Array von Objekten style: {
    Farbe: 'rot',
    Schriftgröße: '14px'
  },
  // Normales HTML-Attribut
  Attribute: {
    ID: "foo"
  },
  // Komponenteneigenschaft
  Requisiten: {
    myProp: "Balken"
  },
  // DOM-Eigenschaften
  domProps: {
    innerHTML: 'baz'
  },
  // Der Ereignislistener befindet sich innerhalb von „on“,
  // Aber Modifikatoren wie „v-on:keyup.enter“ werden nicht mehr unterstützt.
  // Der Schlüsselcode muss in der Verarbeitungsfunktion manuell überprüft werden.
  An: {
    Klicken Sie auf: this.clickHandler
  },
  // Wird nur für Komponenten verwendet, um auf native Ereignisse zu hören, nicht auf Ereignisse, die durch // „vm.$emit“ innerhalb von Komponenten ausgelöst werden.
  nativeOn: {
    Klicken Sie auf: this.nativeClickHandler
  },
  // Benutzerdefinierte Anweisungen. Beachten Sie, dass Sie `oldValue` nicht in `binding` verwenden können.
  // Zuweisung, da Vue es automatisch für Sie synchronisiert hat.
  Anweisungen: [
    {
      Name: "Meine benutzerdefinierte Direktive",
      Wert: '2',
      Ausdruck: '1 + 1',
      Argument: "foo",
      Modifikatoren:
        Balken: wahr
      }
    }
  ],
  // Das Format eines Slots mit Gültigkeitsbereich ist // { name: props => VNode | Array<VNode> }
  Bereichsslots: {
    Standard: Requisiten => createElement('span', Requisiten.text)
  },
  // Wenn die Komponente eine Unterkomponente einer anderen Komponente ist, müssen Sie einen Namen für den Slot angeben: „Name des Slots“,
  // Andere spezielle Eigenschaften der obersten Ebene
  Schlüssel: 'myKey',
  Referenz: „myRef“,
  // Wenn Sie den gleichen Ref-Namen auf mehrere Elemente in der Rendering-Funktion anwenden,
  // Dann wird „$refs.myRef“ zu einem Array.
  refInFor: wahr
}

2. Vollständiges Beispiel

Mit diesem Wissen können wir nun die Komponente fertigstellen, die wir ursprünglich implementieren wollten:

var getChildrenTextContent = Funktion (Kinder) {
  returniere untergeordnete Elemente.map(Funktion (Knoten) {
    node.children zurückgeben
      ? getChildrenTextContent(node.children)
      : Knoten.Text
  }).verbinden('')
}

Vue.component('ankerte Überschrift', {
  rendern: Funktion (ErstelleElement) {
    // Erstelle eine Kebab-Case-ID
    var ÜberschriftId = getChildrenTextContent(this.$slots.default)
      .toLowerCase()
      .replace(/\W+/g, '-')
      .replace(/(^-|-$)/g, '')

    returniere Element erstellen(
      'h' + diese.Ebene,
      [
        Element erstellen('a', {
          Attribute: {
            Name: Überschriften-ID,
            href: '#' + Überschriften-ID
          }
        }, dies.$slots.default)
      ]
    )
  },
  Requisiten: {
    Ebene:
      Typ: Nummer,
      erforderlich: true
    }
  }
})

3. Einschränkungen

VNode muss eindeutig sein

Alle VNodes in einem Komponentenbaum müssen eindeutig sein. Dies bedeutet, dass die folgende Renderfunktion unzulässig ist:

rendern: Funktion (ErstelleElement) {
  var meinParagraphVNode = createElement('p', 'hi')
  returniere createElement('div', [
    // Fehler – Doppelter VNode
    meinParagraphVNode, meinParagraphVNode
  ])
}

Wenn Sie ein Element/eine Komponente wirklich oft wiederholen müssen, können Sie dazu eine Factory-Funktion verwenden. Beispielsweise rendert die folgende Renderfunktion 20 identische Absätze auf völlig legale Weise:

rendern: Funktion (ErstelleElement) {
  returniere createElement('div',
    Array.apply(null, { Länge: 20 }).map(Funktion () {
      gibt createElement('p', 'hallo') zurück
    })
  )
}

4. Verwenden Sie JavaScript, um Vorlagenfunktionen zu ersetzen

1. v-wenn und v-für

Solange etwas problemlos in nativem JavaScript erledigt werden kann, bieten die Renderfunktionen von Vue keine proprietären Alternativen. Beispielsweise werden v-if und v-for in Vorlagen verwendet:

<ul v-if="Artikel.Länge">
  <li v-for="Artikel in Artikeln">{{ Artikel.name }}</li>
</ul>
<p v-else>Keine Elemente gefunden.</p>

Diese können alle in der Renderfunktion mit JavaScript if/ else und map neu geschrieben werden:

Requisiten: ['Artikel'],
rendern: Funktion (ErstelleElement) {
  wenn (diese.Artikel.Länge) {
    returniere createElement('ul', this.items.map(Funktion (Element) {
      returniere createElement('li', item.name)
    }))
  } anders {
    return createElement('p', 'Keine Elemente gefunden.')
  }
}

2. V-Modell

Es gibt kein direktes Gegenstück zum v-model in der Renderfunktion - Sie müssen die entsprechende Logik selbst implementieren:

Requisiten: ['Wert'],
rendern: Funktion (ErstelleElement) {
  var selbst = dies
  returniere createElement('Eingabe', {
    domProps: {
      Wert: selbst.Wert
    },
    An: {
      Eingabe: Funktion (Ereignis) {
        self.$emit('Eingabe', Ereignis.Ziel.Wert)
      }
    }
  })
}

Das ist der Preis dafür, auf eine niedrige Ebene zu gehen, aber Sie haben dadurch eine viel feinere Kontrolle über die Einzelheiten der Interaktion als beim V-Modell.

3. Ereignisse und Schlüsselmodifikatoren

Für Ereignismodifikatoren wie .passive , .capture und .once stellt Vue entsprechende Präfixe bereit, die für Folgendes verwendet werden können:

Zum Beispiel:

An: {
  '!klick': dies.macheDiesImAufnahmemodus,
  '~keyup': dies.macheDiesEinmal,
  '~!mouseover': dies.macheDiesEinmalImAufnahmemodus
}

Für alle anderen Modifikatoren ist das Präfix „private“ nicht erforderlich, da Sie die Ereignismethode innerhalb des Ereignishandlers verwenden können:

Hier ist ein Beispiel mit allen Modifikatoren:

An: {
  keyup: Funktion (Ereignis) {
    // Wenn das Element, das das Ereignis auslöst, nicht das Element ist, an das das Ereignis gebunden ist, // dann returniere if (event.target !== event.currentTarget) returniere
    // Wenn die Eingabetaste nicht gedrückt wurde oder // die Umschalttaste nicht gleichzeitig gedrückt wurde // dann return if (!event.shiftKey || event.keyCode !== 13) return
    // Stoppen Sie das Aufsteigen des Ereignisses event.stopPropagation()
    // Verhindern Sie das Standard-Keyup-Ereignis des Elements event.preventDefault()
    // ...
  }
}

4. Spielautomaten

Sie können auf den Inhalt statischer Slots über this.$slots zugreifen, wobei jeder Slot ein Array von VNodes ist:

rendern: Funktion (ErstelleElement) {
  // `<div><slot></slot></div>`
  returniere createElement('div', this.$slots.default)
}

Sie können auch über this.$scopedSlots auf Bereichsslots zugreifen. Jeder Bereichsslot ist eine Funktion, die eine Anzahl von VNodes zurückgibt:

Requisiten: ['Nachricht'],
rendern: Funktion (ErstelleElement) {
  // `<div><slot :text="Nachricht"></slot></div>`
  returniere createElement('div', [
    dies.$scopedSlots.default({
      Text: diese.Nachricht
    })
  ])
}

Wenn Sie mithilfe einer Renderfunktion Slots mit Gültigkeitsbereich an untergeordnete Komponenten übergeben möchten, können Sie das Feld scopedSlots im VNode-Datenobjekt verwenden:

rendern: Funktion (ErstelleElement) {
  // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
  returniere createElement('div', [
    Element erstellen('Kind', {
      // Übergeben Sie `scopedSlots` im Datenobjekt
      // Das Format ist { name: props => VNode | Array<VNode> }
      Bereichsslots: {
        Standard: Funktion (Eigenschaften) {
          returniere createElement('span', props.text)
        }
      }
    })
  ])
}

5. JSX

Wenn Sie viele render schreiben, kann es für Sie mühsam sein, Code wie den folgenden zu schreiben:

Element erstellen(
  'verankerte Überschrift', {
    Requisiten: {
      Stufe: 1
    }
  }, [
    createElement('span', 'Hallo'),
    ' Welt!'
  ]
)

Vor allem, wenn die entsprechende Vorlage so einfach ist:

<ankerte Überschrift: Ebene="1">
  Hallo Welt!
</ankerte-Überschrift>

Aus diesem Grund gibt es ein Babel-Plugin für die Verwendung der JSX-Syntax in Vue, das es uns ermöglicht, zu einer Syntax zurückzukehren, die näher an Vorlagen liegt.

importiere AnchoredHeading aus './AnchoredHeading.vue'

neuer Vue({
  el: '#demo',
  rendern: Funktion (h) {
    zurückkehren (
      <AnchoredHeading-Ebene={1}>
        Hallo Welt!
      </AnchoredHeading>
    )
  }
})

Die Verwendung von h als Alias ​​für createElement ist eine gängige Konvention im Vue-Ökosystem und wird von JSX tatsächlich benötigt. Ab Version 3.4.0 des Vue Babel -Plugin fügen wir automatisch const h = this.$createElement in alle mit ES2015 Syntax deklarierten Methoden und Getter ein (keine Funktionen oder Pfeilfunktionen), die JSX haben, sodass Sie den Parameter (h) loswerden können. Bei früheren Versionen des Plug-Ins gibt die Anwendung einen Fehler aus, wenn h im aktuellen Bereich nicht verfügbar ist.

6. Funktionale Komponenten

Die zuvor erstellte Ankertitelkomponente ist relativ einfach. Sie verwaltet keinen Status, hört nicht auf an sie übergebene Status und hat keine Lebenszyklusmethoden. In Wirklichkeit ist es nur eine Funktion, die einige Requisiten akzeptiert. In solchen Szenarien können wir die Komponente als funktional markieren, was bedeutet, dass sie zustandslos ist (keine reaktiven Daten) und keine Instanz hat (kein this-Kontext). Eine funktionsfähige Komponente sieht folgendermaßen aus:

Vue.component('meine-Komponente', {
  funktional: wahr,
  // Requisiten sind optionale Requisiten: {
    // ...
  },
  // Um ​​das Fehlen einer Instanz auszugleichen // geben Sie ein zweites Argument als Kontext an render: function (createElement, context) {
    // ...
  }
})

Hinweis: In Versionen vor 2.3.0 war die Option „Props“ erforderlich, wenn eine Funktionskomponente Props empfangen wollte. In Version 2.3.0 und höher können Sie die Props-Option weglassen und alle Attribute der Komponente werden automatisch und implizit als Props aufgelöst.

Bei der Verwendung funktionaler Komponenten erfolgt die Referenz auf HTMLElement, da diese zustands- und instanzenlos sind.

Wenn Sie in Version 2.5.0 und höher Einzeldateikomponenten verwenden, können vorlagenbasierte Funktionskomponenten wie folgt deklariert werden:

<funktionale Vorlage>
</Vorlage>

Alles, was eine Komponente benötigt, wird als context übergeben. Dabei handelt es sich um ein Objekt mit den folgenden Feldern:

• props： ein Objekt, das alle Requisiten bereitstellt
• children： Array von VNode-Unterknoten
• slots： Eine Funktion, die ein Objekt zurückgibt, das alle Slots enthält
• scopedSlots : (2.6.0+) Ein Objekt, das die übergebenen Scoped Slots verfügbar macht. Stellt auch normale Slots als Funktionen bereit.
• data： Das gesamte an die Komponente übergebene Datenobjekt, das der Komponente als zweiter Parameter von createElement übergeben wird
• parent : Ein Verweis auf die übergeordnete Komponente
• listeners : (2.3.0+) Ein Objekt, das alle von übergeordneten Komponenten für diese Komponente registrierten Ereignis-Listener enthält. Dies ist ein Alias ​​für data.on.
• injections : (2.3.0+) Wenn die Injektionsoption verwendet wird, enthält dieses Objekt Eigenschaften, die injiziert werden sollen.
  

Nachdem wir functional : true hinzugefügt haben, müssen wir die Renderfunktion unserer Ankertitelkomponente aktualisieren, um ihr einen Kontextparameter hinzuzufügen, this.$slots.default auf context.children aktualisieren und dann this.level auf context.props.level aktualisieren.

Da funktionale Komponenten lediglich Funktionen sind, ist der Rendering-Overhead viel geringer.

Sie sind auch als Wrapper-Komponenten sehr nützlich. Wenn Sie beispielsweise Folgendes tun müssen:

• Wählen Sie programmgesteuert eine von mehreren Komponenten aus, die in Ihrem Namen gerendert werden soll.
• Bearbeiten Sie untergeordnete Elemente, Eigenschaften und Daten, bevor Sie sie an untergeordnete Komponenten weitergeben.
  

Dies ist ein Beispiel für eine smart-list -Komponente, die basierend auf dem Wert der übergebenen Eigenschaft eine spezifischere Komponente rendern kann:

var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }

Vue.component('Smart-Liste', {
  funktional: wahr,
  Requisiten: {
    Artikel: {
      Typ: Array,
      erforderlich: true
    },
    isOrdered: Boolescher Wert
  },
  rendern: Funktion (createElement, Kontext) {
    Funktion entsprechendeListComponent () {
      var Elemente = Kontext.Eigenschaften.Elemente

      wenn (items.length === 0) returniere EmptyList
      wenn (Typ der Elemente[0] === 'Objekt') gibt TableList zurück
      if (context.props.isOrdered) returniere OrderedList

      UngeordneteListe zurückgeben
    }

    returniere Element erstellen(
      entsprechendeListComponent(),
      Kontext.Daten,
      Kontext.Kinder
    )
  }
})

1. Übergeben Sie Attribute und Ereignisse an untergeordnete Elemente oder Komponenten

In normalen Komponenten werden Attribute, die nicht als Props definiert sind, automatisch zum Stammelement der Komponente hinzugefügt, wobei vorhandene Attribute mit demselben Namen ersetzt oder intelligent zusammengeführt werden.

Funktionale Komponenten erfordern jedoch, dass Sie dieses Verhalten explizit definieren:

Vue.component('mein-funktionaler-Button', {
  funktional: wahr,
  rendern: Funktion (createElement, Kontext) {
    // Alle Attribute, Ereignis-Listener, untergeordneten Knoten usw. vollständig transparent übertragen.
    returniere createElement('Schaltfläche', Kontext.Daten, Kontext.Kinder)
  }
})

Indem wir context.data als zweites Argument an createElement übergeben, geben wir alle Attribute und Ereignis-Listener an my-functional-button weiter. Tatsächlich ist dies so transparent, dass diese Ereignisse nicht einmal den Modifikator .native erfordern.

Wenn Sie vorlagenbasierte Funktionskomponenten verwenden, müssen Sie Attribute und Listener auch manuell hinzufügen. Da wir Zugriff auf seinen eigenen Kontext haben, können wir alle HTML attribute mit data.attrs und alle Ereignis-Listener mit listeners (einem Alias ​​für data.on) übergeben.

<funktionale Vorlage>
  <Schaltfläche
    Klasse="btn btn-primary"
    v-bind="Daten.attrs"
    v-on="Zuhörer"
  >
    <Steckplatz/>
  </button>
</Vorlage>

2. Vergleich zwischen Slots () und Kindern

Sie fragen sich vielleicht, warum sowohl slots() als auch children erforderlich sind. Ist slots().default nicht ähnlich wie children ? In manchen Fällen ja – aber was ist mit einer Funktionskomponente mit untergeordneten Elementen wie der folgenden?

<meine-funktionale-Komponente>
  <p v-Steckplatz:foo>
    Erste
  </p>
  <p>Sekunde</p>
</meine-funktionale-komponente>

Für diese Komponente erhalten Sie durch untergeordnete Elemente zwei Absatz-Tags, während slots().default nur das zweite anonyme Absatz-Tag übergibt und slots().foo das erste benannte Absatz-Tag übergibt. Es verfügt sowohl über children als auch über Slots(), sodass Sie Ihre Komponente auf einen Slot-Mechanismus aufmerksam machen oder ihn einfach durch Übergeben untergeordneter Elemente an andere Komponenten weitergeben können.

7. Vorlagenzusammenstellung

Vielleicht interessiert es Sie, dass Vue-Vorlagen tatsächlich in Renderfunktionen kompiliert werden. Dies ist ein Implementierungsdetail und normalerweise kein Grund zur Besorgnis. Wenn Sie jedoch sehen möchten, wie die Vorlagenfunktionalität zusammengestellt wird, könnte dies für Sie sehr interessant sein. Hier ist ein einfaches Beispiel für die Verwendung von Vue.compile zum schnellen Kompilieren einer Vorlagenzeichenfolge:

<div>
        <Kopfzeile>
          <h1>Ich bin eine Vorlage!</h1>
        </header>
        <p v-if="message">{{ Nachricht }}</p>
        <p v-else>Keine Nachricht.</p>
      </div>

machen:

Funktion anonym(
) {
  mit(diesem){return _c('div',[_m(0),(Nachricht)?_c('p',[_v(_s(Nachricht))]):_c('p',[_v("Keine Nachricht.")])])}
}

statischeRenderFns:

_m(0): Funktion anonym(
) {
  mit(diesem){return _c('header',[_c('h1',[_v("Ich bin eine Vorlage!")])])}
}

Dies ist das Ende dieses Artikels über Rendering-Funktionen und JSX-Details. Weitere relevante Rendering-Funktionen und JSX-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!