Introduction à l'utilisation de la syntaxe jsx des composants vue

Cet article présente principalement l'utilisation spécifique de la syntaxe jsx des composants vue. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Si vous utilisez la fonction render pour écrire des composants vue plus complexes, cela ne sera pas convivial pour la lisibilité et la maintenabilité, et l'utilisation de jsx nous ramènera à une syntaxe plus proche des modèles. Le traducteur babel traduira jsx en fonction de rendu pour le rendu.

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 la traduction

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

Remarque : La fonction h est la méthode $createElement de l'instance vue et doit exister dans la portée de jsx. Dans la fonction de rendu, elle. doit être Le premier paramètre est transmis, tel que :

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

La fonction H est automatiquement injectée

À partir de la version 3.4.0, dans les méthodes et getter accesseurs déclarés avec la syntaxe ES2015 (sauf en utilisant le mot-clé function ou les fonctions fléchées), babel injectera automatiquement les fonctions h (const h = this.$createElement), donc le paramètre (h) peut ê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, Vue2.0 Le format vnode est différent de React. Le deuxième paramètre de la fonction createElement est un objet de données, qui accepte un 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>
 )
}

L'opérateur d'expansion JSX

prend en charge l'expansion JSX, et 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'] }

Directives Vue

JSX ne prend pas en charge la plupart des commandes intégrées de Vue, la seule exception est v-show, qui peut utiliser 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 }}/>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au chinois PHP. site web!

Recommandations associées :

Introduction au plug-in de chargement paresseux basé sur Vue vue-view-lazy

composant vue name Présentation

jquery pour obtenir l'effet de défilement horizontal des images

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!