Einführung in die Verwendung der jsx-Syntax von Vue-Komponenten

In diesem Artikel wird hauptsächlich die spezifische Verwendung der jsx-Syntax von Vue-Komponenten vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

Wenn Sie die Render-Funktion verwenden, um komplexere Vue-Komponenten zu schreiben, beeinträchtigt dies die Lesbarkeit und Wartbarkeit, und die Verwendung von jsx führt uns zurück zu einer Syntax, die näher an Vorlagen liegt. Der Babel-Übersetzer übersetzt jsx zum Rendern in eine Renderfunktion.

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 der Flucht

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

Nach der Übersetzung

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 :

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

H-Funktion automatisch injizieren

Ab 3.4.0 im Einsatz In Methoden, die in der ES2015-Syntax und getter-Accessoren deklariert sind (außer bei Verwendung des Schlüsselworts function oder der Pfeilfunktion), 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

Zuerst der Vnode von Vue2 .0 Das Format unterscheidet sich von „React“. Der zweite Parameter der Funktion createElement ist ein Datenobjekt, das ein verschachteltes Objekt zur Verarbeitung akzeptiert.

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-Erweiterungsoperator

unterstützt die JSX-Erweiterung und 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-Befehl

JSX unterstützt die meisten integrierten Vue-Anweisungen nicht, die einzige Ausnahme ist v-show, das die v-show={value}-Syntax verwenden kann. Die meisten Anweisungen können programmgesteuert implementiert werden. Beispielsweise ist v-if ein ternärer Ausdruck, v-for 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, z. B.: v-name={{ value, modifier: true }}

Verwenden Sie das native Vnode-Anweisungsdatenformat, z. B.:

const directives = [
 { name: 'my-dir', value: 123, modifiers: { abc: true } }
]

return <p {...{ directives }}/>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in das Vue-basierte Lazy-Loading-Plug-in vue-view-lazy

Vue-Komponente Name Einführung

jquery, um den Effekt des horizontalen Scrollens von Bildern zu erzielen

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung der jsx-Syntax von Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!