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. Vuejs.org/v2/guide/render-function.html#jsx The above is all the content of this article, I hope to help everyone, I hope everyone supports Tumi Cloud. 
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment