Explain how Vue supports JSX syntax and VueJSX syntax

Explain how Vue supports JSX syntax and VueJSX syntax

We usually use the template syntax for vue development. In fact, there is also the same syntax as react, that is, the render function, which also supports the jsx syntax.

The Vue template is actually compiled into the render function.

1. Traditional createElement Method

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

Rendering as below

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

2. Use jsx syntax

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

1. Install

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

Edit the Code as follows:

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

Using h as the alias of createElement is a common practice in the Vue ecosystem and is actually required by JSX. If h is ineffective in the scope, an error will be reported in the application.

Official Website instructions: https://cn.vuejs.org/v2/guide/render-function.html#JSX

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.