Explication détaillée des étapes pour utiliser la syntaxe jsx du composant vue

Cette fois, je vais vous apporter une explication détaillée des étapes d'utilisation de la syntaxe jsx du composant vue Quelles sont les précautions pour utiliser la syntaxe jsx du composant vue. Ce qui suit est un exemple pratique. cas, jetons un coup d'oeil.

Configuration

Nécessite le plug-in babel

Installation

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

Configuration .babelrc

Ajouter transform-vue-jsx dans les plugins

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

Exemple de base

avant de s'échapper

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

Après traduction

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

Remarque : La fonction h est la méthode $createElement de l'instance vue. Elle doit exister dans la portée de jsx et doit être le premier paramètre du rendu. Transmettez-le, tel que :

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

Injecter automatiquement la fonction h

À partir de la version 3.4.0, dans les méthodes déclarées à l'aide d'ES2015. syntaxe et Dans l'accesseur getter (sauf lors de l'utilisation du mot-clé function ou de la fonction flèche), babel injectera automatiquement la fonction h (const h = this.$createElement), de sorte que le paramètre (h) puisse être omis.

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

Comparaison entre Vue JSX et React JSX

Tout d'abord, le format vnode de Vue2.0 est différent de React, la fonction createElement Le deuxième paramètre est un objet de données qui accepte un objet imbriqué. Chaque objet imbriqué aura un module correspondant pour le traitement.

Syntaxe de rendu Vue2.0

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'
 })
}

syntaxe JSX Vue2.0 correspondante

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>
 )
}

Extension JSXopérateur

prend en charge l'expansion JSX. Le plug-in fusionnera intelligemment les attributs de données, tels que :

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

Les données fusionnées sont :

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

Commande Vue

JSX ne prend pas en charge la plupart des commandes intégrées de Vue, la seule exception est v-show, qui peut être utilisée avec la syntaxe v-show={value}. La plupart des instructions peuvent être implémentées par programme. Par exemple, v-if est une expression ternaire , v-for est un array.map(), etc.

S'il s'agit d'une instruction personnalisée, vous pouvez utiliser la syntaxe v-name={value}, mais la syntaxe modifiée ne prend pas en charge les paramètres arguments et le modificateur modifier de l'instruction. Il existe deux solutions :

Transmettre tout le contenu en tant qu'objet, tel que : v-name={{ value, modifier: true }}

Utiliser le format de données d'instruction natif de vnode, tel que :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

JS implémente l'algorithme de recherche, de tri et de déduplication le plus simple

Comment utiliser jQuery pour réaliser acquisition Couleur aléatoire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!