Vues Render-Funktion

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

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

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

returniere createElement('h1', dieser.BlogTitel)

// @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"
      }
    })
  ]
)

{
  // 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
}

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

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

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

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.')
  }
}

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)
      }
    }
  })
}

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

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()
    // ...
  }
}

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

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

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)
        }
      }
    })
  ])
}

importiere { CreateElement, RenderContext } aus 'vue/types/umd'

Standard exportieren {
  funktional: wahr,
  Requisiten: {
    Zeile: Objekt,
    rendern: Funktion,
    Index: Nummer,
    Spalte: {
      Typ: Objekt,
      Standard: null
    }
  },
  rendern: (h: ErstelleElement, ctx: RenderContext) => {
    Konstante Parameter: beliebig = {
      Zeile: ctx.props.row,
      Index: ctx.props.index
    }
    wenn (ctx.props.column) params.column = ctx.props.column
    returniere ctx.props.render(h, Parameter)
  }
}