Detaillierte Erklärung, wie Vue die JSX-Syntax unterstützt

Normalerweise verwenden wir die Vorlagensyntax, um Vue zu entwickeln. Tatsächlich gibt es dieselbe Syntax wie bei React, nämlich die Renderfunktion, die auch die JSX-Syntax unterstützt. In diesem Artikel wird hauptsächlich ausführlich erläutert, wie Vue die JSX-Syntax unterstützt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Vues Vorlage ist tatsächlich in eine Renderfunktion kompiliert.

1. Die traditionelle createElement-Methode

createElement(
 'anchored-heading', {
  props: {
   level: 1
  }
 }, [
  createElement('span', 'Hello'),
  ' world!'
 ]
)

wird wie folgt gerendert

<anchored-heading :level="1">
　　<span>Hello</span> world!
</anchored-heading>

2. Verwenden Sie die JSX-Syntax

Aus diesem Grund wird ein Babel-Plugin verwendet, um die JSX-Syntax in Vue zu verwenden Syntax näher an Vorlagen.

1. Installieren

npm install\
 babel-plugin-syntax-jsx\
 babel-plugin-transform-vue-jsx\
 babel-helper-vue-jsx-merge-props\
 babel-preset-es2015\
 --save-dev

2. .babelrc-Datei bearbeiten

{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}

Der Code wird wie folgt bearbeitet

Vue.component('jsx-example', {
 render (h) { // <-- h must be in scope
  return <p id="foo">bar</p>
 }
})

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, wenn es sich im Bereich h befindet hat keine Auswirkung und löst einen Fehler in der Anwendung aus.

Verwandte Empfehlungen:

Die Unterschiede zwischen JSX und HTML

Beginnen Sie mit der Verwendung von React und JSX_html/css_WEB-ITnose

Einführungs-Tutorial zum Erlernen der JSX-Syntax im React Framework von JavaScript_Grundkenntnisse

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie Vue die JSX-Syntax unterstützt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!