Explication détaillée de la façon dont Vue prend en charge la syntaxe JSX

Habituellement, nous utilisons la syntaxe des modèles pour développer Vue. En fait, il existe la même syntaxe que React, qui est la fonction de rendu, qui prend également en charge la syntaxe jsx. Cet article présente principalement une explication détaillée de la façon dont Vue prend en charge la syntaxe JSX. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Le modèle de Vue est en fait compilé dans une fonction de rendu.

1. La méthode traditionnelle createElement

createElement(
 'anchored-heading', {
  props: {
   level: 1
  }
 }, [
  createElement('span', 'Hello'),
  ' world!'
 ]
)

est rendue comme suit

<anchored-heading :level="1">
　　<span>Hello</span> world!
</anchored-heading>

2. Utiliser la syntaxe jsx

C'est pourquoi un plugin Babel est utilisé pour utiliser la syntaxe JSX dans Vue. syntaxe plus proche des modèles.

1. Installer

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

2. Modifier le fichier .babelrc

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

Le code est édité comme suit

Vue.component('jsx-example', {
 render (h) { // <-- h must be in scope
  return <p id="foo">bar</p>
 }
})

L'utilisation de h comme alias pour createElement est une convention courante dans l'écosystème Vue et est en fait requise par JSX si dans la portée h n'a aucun effet et déclenchera une erreur dans l'application.

Recommandations associées :

Les différences entre JSX et HTML

Commencez à utiliser React et JSX_html/css_WEB-ITnose

Tutoriel d'introduction à l'apprentissage de la syntaxe JSX dans React Framework_Basic Knowledge de JavaScript

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!