Usually when developing vue, we use template syntax, and in fact there is also the same syntax as react, that is, the render function, which also supports jsx syntax.
Vue's template is actually compiled into a render function.
1. Traditional createElement method
createElement(
'anchored-heading', {
props: {
level: 1
}
}, [
createElement('span', 'Hello'),
' world!'
]
)
Rendered as follows
<anchored-heading :level="1"> <span>Hello</span> world! </anchored-heading>
2. Use jsx syntax
This is going to use oneBabel plugin Plugin, why you use JSX syntax in Vue, it can bring us back to syntax that is closer to templates.
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
('jsx-example', {
render (h) { // <-- h must be in scope
return <div >bar</div>
}
})
Taking h as an alias for createElement is a common convention in the Vue ecosystem, and it is actually required by JSX. If h loses its effect in scope, an error will be triggered in the application.
Official website description:/v2/guide/#JSX
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.