Detailed explanation of how Vue supports JSX syntax

Usually we use template syntax to develop vue. In fact, there is the same syntax as react, that is, the render function, which also supports jsx syntax. This article mainly introduces the detailed explanation of how Vue supports JSX syntax. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Vue’s template is actually compiled into a render function.

1. The traditional createElement method

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

is rendered as follows

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

2. Use jsx syntax

This is why a Babel plugin is used to use JSX syntax in Vue. It allows us to return As for the syntax that is closer to the template.

1.Installation

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

2.Edit the .babelrc file

##

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

The code is edited as follows

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

Using h as an alias for createElement is a common convention in the Vue ecosystem, and is actually required by JSX. If h loses its role in the scope, in An error message will be triggered in the application.

Related recommendations:

The differences between JSX and HTML

Start using React and JSX_html/css_WEB-ITnose

Introductory Tutorial for Learning JSX Syntax in JavaScript’s React Framework_Basic Knowledge

The above is the detailed content of Detailed explanation of how Vue supports JSX syntax. For more information, please follow other related articles on the PHP Chinese website!