Detaillierte Erläuterung der Schritte zur Verwendung der jsx-Syntax der Vue-Komponente

Dieses Mal werde ich Ihnen die Schritte zur Verwendung der jsx-Syntax der Vue-Komponente ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung der jsx-Syntax der Vue-Komponente? Fall, werfen wir einen Blick darauf.

Konfiguration

Babel-Plugin erforderlich

Installation

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

.babelrc-Konfiguration

Transform-vue-jsx in Plugins hinzufügen

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

Grundlegendes Beispiel

Vor dem Escapezeichen

<p id="foo">{this.text}</p>

Übersetzung nachher

h('p', {
 attrs: {
  id: 'foo'
 }
}, [this.text])

Hinweis: Die Funktion h ist die Methode $createElement der Vue-Instanz. Sie muss im Bereich von jsx vorhanden sein und als erster Parameter in der Rendering-Funktion übergeben werden, z. B.

render (h) { // <-- h 函数必须在作用域内
 return <p id="foo">bar</p>
}

fügt ab 3.4.0 automatisch h-Funktionen

in Methoden und getter Accessoren ein, die mit der ES2015-Syntax deklariert wurden (unter Verwendung von function >Mit Ausnahme von Schlüsselwörtern oder Pfeilfunktionen fügt babel automatisch die Funktion h (const h = this.$createElement) ein, sodass der Parameter (h) weggelassen werden kann.

Vue.component('jsx-example', {
 render () { // h 会自动注入
  return <p id="foo">bar</p>
 },
 myMethod: function () { // h 不会注入
  return <p id="foo">bar</p>
 },
 someOtherMethod: () => { // h 不会注入
  return <p id="foo">bar</p>
 }
})
@Component
class App extends Vue {
 get computed () { // h 会自动注入
  return <p id="foo">bar</p>
 }
}

Vergleich zwischen Vue JSX und React JSX

Erstens unterscheidet sich das Vnode-Format von Vue2.0 von React, und das Sekunde der Funktion createElement Jeder Parameter ist ein Datenobjekt, das ein verschachteltes Objekt akzeptiert. Jedes verschachtelte Objekt verfügt über ein entsprechendes Modul zur Verarbeitung.

Vue2.0-Rendersyntax

render (h) {
 return h('p', {
  // 组件props
  props: {
   msg: 'hi'
  },
  // 原生HTML属性
  attrs: {
   id: 'foo'
  },
  // DOM props
  domProps: {
   innerHTML: 'bar'
  },
  // 事件是嵌套在`on`下面的，所以将不支持修饰符，如：`v-on:keyup.enter`，只能在代码中手动判断keyCode
  on: {
   click: this.clickHandler
  },
  // For components only. Allows you to listen to
  // native events, rather than events emitted from
  // the component using vm.$emit.
  nativeOn: {
   click: this.nativeClickHandler
  },
  // class is a special module, same API as `v-bind:class`
  class: {
   foo: true,
   bar: false
  },
  // style is also same as `v-bind:style`
  style: {
   color: 'red',
   fontSize: '14px'
  },
  // other special top-level properties
  key: 'key',
  ref: 'ref',
  // assign the `ref` is used on elements/components with v-for
  refInFor: true,
  slot: 'slot'
 })
}

entsprechende Vue2.0 JSX-Syntax

render (h) {
 return (
  <p
   // normal attributes or component props.
   id="foo"
   // DOM properties are prefixed with `domProps`
   domPropsInnerHTML="bar"
   // event listeners are prefixed with `on` or `nativeOn`
   onClick={this.clickHandler}
   nativeOnClick={this.nativeClickHandler}
   // other special top-level properties
   class={{ foo: true, bar: false }}
   style={{ color: &#39;red&#39;, fontSize: &#39;14px&#39; }}
   key="key"
   ref="ref"
   // assign the `ref` is used on elements/components with v-for
   refInFor
   slot="slot">
  </p>
 )
}

JSX-ErweiterungOperator

unterstützt die JSX-Erweiterung. Das Plug-in führt Datenattribute intelligent zusammen, wie zum Beispiel:

const data = {
 class: ['b', 'c']
}
const vnode = <p class="a" {...data}/>

Die zusammengeführten Daten sind:

{ class: ['a', 'b', 'c'] }

Vue-Anweisungen

JSX unterstützt die meisten in Vue integrierten Befehle nicht. Die einzige Ausnahme ist v-show, das die Syntax v-show={value} verwenden kann. Die meisten Anweisungen können programmgesteuert implementiert werden, zum Beispiel ist v-if ein ternärer -Ausdruck , v-for ist ein array.map() usw.

Wenn es sich um eine benutzerdefinierte Anweisung handelt, können Sie die Syntax v-name={value} verwenden, die geänderte Syntax unterstützt jedoch nicht die Parameter arguments und den Modifikator modifier der Anweisung. Es gibt zwei Lösungen:

Übergeben Sie den gesamten Inhalt als Objekt, wie zum Beispiel: v-name={{ value, modifier: true }}

Verwenden Sie das native Vnode-Anweisungsdatenformat, wie zum Beispiel:

const directives = [
 { name: 'my-dir', value: 123, modifiers: { abc: true } }
]
return <p {...{ directives }}/>

Ich glaube Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS implementiert den einfachsten Such-, Sortier- und Deduplizierungsalgorithmus

So verwenden Sie jQuery, um dies zu erreichen Erwerb Zufällige Farbe

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung der jsx-Syntax der Vue-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!