See how Vue supports JSX syntax

Usually developed Vue We use template syntax, in fact, the same syntax as react, that is, the render function, also supports JSX syntax.

The template for VUE is actually compiled into a render function.

1. Traditional CreateElement method

CreateElement (‘Anchored-Heading’, {Props: {level: 1}} [CreateElement (‘Span’, ‘Hello’), ‘World!’])

Rendered to the following
Hello World!

2. Use JSX syntax
 This is the use of a Babel Plugin plug-in for use in Vue, which allows us to return to the syntax closer to the template.       NPM INSTALL \ Babel-Plugin-syntax-jsx \ babel-plugin-transform-vue-jsx \ Babel-Helper-Vue -JSX-Merge-props \ Babel-Preset-ES2015 \ - Save-Dev 
2. Edit .babelrc file

{“PRESETS”: [“ES2015 “],” plugins “: [” Transform-Vue-JSX “]}

Code editing is as follows

  Vue.component ('JSX-EXAMPLE', {RENDER (H) {//  BAR 

will hide the alias for CreateElement It is a general practice in the VUE ecosystem. It is actually required by JSX. If h is lost in the scope, the error is triggered in the application.
 Official website Description Document: https: // CN. The above is all the content of this article, I hope to help everyone, I hope everyone supports Tumi Cloud. 
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment