So verwenden Sie JSX in Vue

Was ist JSX

JSX ist eine Syntaxerweiterung von Javascript, JSX = Javascript + XML, d. h. XML wird in Javascript geschrieben. Aufgrund dieser Funktion von JSX verfügt es über die Flexibilität von Javascript und die Semantik und Intuitivierung von HTML.

Warum JSX in Vue verwenden?

Manchmal verwenden wir Renderfunktionen, um Komponenten zu abstrahieren. Renderfunktionen sind nicht sehr klar. Bitte beachten Sie die offizielle Dokumentation. Das Schreiben von Renderfunktionen ist manchmal sehr mühsam.

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

Die entsprechende Vorlage lautet wie folgt:

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

Dies ist offensichtlich eine undankbare Aufgabe, und hier kommt JSX ins Spiel. Um JSX in Vue zu verwenden, müssen Sie das Babel-Plugin verwenden, das es uns ermöglicht, zu einer Syntax zurückzukehren, die näher an der Vorlage liegt. Beginnen wir als Nächstes mit dem Schreiben von JSX in Vue.

Start

Erstellen Sie schnell ein Vue-Projekt und verwenden Sie vue-cli zum Erstellen eines Projekts:

# Drücken Sie einfach die Eingabetaste vue create vue-jsx

Installationsabhängigkeiten:

npm installiere @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

Konfigurieren Sie .babelrc:

modul.exporte = {
 Voreinstellungen: [
 '@vue/cli-plugin-babel/preset',
 ['@vue/babel-preset-jsx',
  {
  'injectH': falsch
  }]
 ]
}

Grundlegende Inhalte

Hier zeigen wir einige grundlegende Inhalte, die in Vue geschrieben wurden, darunter einfacher Text, dynamische Inhalte, die Verwendung von Beschriftungen und die Verwendung benutzerdefinierter Komponenten. Diese ähneln den Einzeldateikomponenten, die wir normalerweise verwenden, wie unten gezeigt:

rendern() {
 zurückkehren (
 <div>
  <h3>Inhalt</h3>
  {/* Klartext */}
  <p>Hallo, ich bin Gopal</p>
  {/* Dynamischer Inhalt */}
  <p>hallo { this.msg }</p>
  {/* Eingabefeld*/}
  <Eingabe />
  {/* Benutzerdefinierte Komponenten */}
  <meineKomponente></meineKomponente>
 </div>
 );
}

Attribute/Requisiten

Die Attributbindung ist die gleiche wie bei der normalen HTML-Struktur

rendern() {
 zurück <div><Eingabeplatzhalter="111" /></div>
}

Beachten Sie: Wenn das dynamische Attribut zuvor v-bind:placeholder="this.placeholderText" lautete, wird es zu placeholder={this.placeholderText}

rendern() {
 return <Eingabe
   Typ="E-Mail"
   Platzhalter={dieser.PlatzhalterText}
   />
}

Wir können ein Objekt auch erweitern

rendern (Element erstellen) {
 zurückkehren (
  <button {...this.largeProps}></button>
 )
}

Wie beim Eingabetag können Sie Attribute wie folgt stapelweise binden

const inputAttrs = {
 Typ: "E-Mail",
 Platzhalter: „Geben Sie Ihre E-Mail-Adresse ein“
};
rendern() {
 Rückgabewert <input {...{ attrs: inputAttrs }} /> 
}

Spielautomaten

Sehen wir uns an, wie benannte Slots und bereichsbezogene Slots implementiert werden.

Benannte Slots: Die übergeordnete Komponente wird ähnlich wie die Einzeldatei-Komponentenvorlage geschrieben und der einzufügende Speicherort wird durch slot="header" angegeben. Die Unterkomponente gibt den Namen des Slots über this.$slots.header an, wobei „Header“ der Name des Slots ist.

Übergeordnete Komponente:

rendern() {
 {/* benannter Slot */}
 <meineKomponente>
 <header slot="header">Kopfzeile</header>
 <header slot="content">Inhalt</header>
 <footer slot="footer">Fußzeile</footer>
 </meineKomponente>
}

Unterkomponenten:

rendern() {
 zurückkehren (
 <div>
  {/* Klartext */}
  <p>Ich bin eine benutzerdefinierte Komponente</p>
  {diese.$slots.header}
  {diese.$slots.content}
  {this.$slots.footer}
 </div>
 );
}

Scoped Slots: In der untergeordneten Komponente gibt {this.$scopedSlots.test({ user: this.user })} an, dass der Name des Slots „Test“ ist, und übergibt den Benutzer an die übergeordnete Komponente. Wenn die übergeordnete Komponente das Unterkomponenten-Tag schreibt, gibt sie die Einfügeposition über den Wert „scopedSlots“ als Test an und erhält den von der Unterkomponente in der Rückruffunktion übergebenen Benutzerwert.

Übergeordnete Komponente:

rendern() {
 {/* benannter Slot-Bereichsslot*/}
 <meineKomponente {
 ...{
  Bereichsslots: {
  Test: ({Benutzer}) => (
   <div>{Benutzername}</div>
  )
  }
 }
 }>
 </meineKomponente>

Unterkomponenten:

rendern() {
 zurückkehren (
 <div>
  {diese.$scopedSlots.test({
  Benutzer: dieser.Benutzer
  })}
 </div>
 );
}

Anweisung

Die allgemeinen Anweisungen lauten wie folgt:

rendern() {
 {/* Anweisungen */}
 {/* v-Modell */}
 <div><input vModel={this.newTodoText} /></div>
 {/* v-Modell und Modifikatoren*/}
 <div><Eingabe vModel_trim={this.tirmData} /></div>
 {/* v-on-Listener-Ereignis*/}
 <div><Eingabe vOn:Eingabe={dieser.EingabeText} /></div>
 {/* v-on-Listener-Ereignisse und -Modifikatoren*/}
 <div><input vOn:click_stop_prevent={this.inputText} /></div>
 {/* v-html */}
 <p domPropsInnerHTML={html} />
}

Funktionale Komponenten

Eine funktionale Komponente ist eine zustandslose, instanzlose Komponente. Weitere Einzelheiten finden Sie auf der offiziellen Website. Erstellen Sie eine neue Datei FunctionalComponent.js mit folgendem Inhalt:

export default ({ props }) => <p>hallo {props.message}</p>

Die übergeordnete Komponente wird wie folgt aufgerufen:

importiere funComponent aus './FunctionalComponent'

...

rendern() {
 return {/* Funktionale Komponente*/}
  <funComponent Nachricht="Gopal"></funComponent>
}

Oben finden Sie Einzelheiten zur Verwendung von JSX in Vue. Weitere Informationen zur Verwendung von JSX in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!