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: 'red', fontSize: '14px' }}
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!
