Advanced Vue.js - Directives, Plugins, and Render Functions Chapter 17msg: 'Hello World'
}
})The highlighted line is the weird bit if you have never seen JSX. Just note that we didn't use
the arrow function in the render option in the preceding code. That's because we are using
this inside and we want it to be bound to the component.
You can already see your page working using the npm run dev command.
How it works...
The babel plugin will turn the JSX code into a JavaScript render function.
I wouldn't recommend using JSX with Vue. The only time I can see it being useful is
whenever you need to intermix render functions with JavaScript and you need a quick
and readable way of defining templates. Other than that, there are not many advantages
to using JSX.
There's more...
Let's complicate the code a little bit to at least have a flavor of how JSX plays with props.
Define a new component before the main Vue instance:
const myComp = {
render (h) {
return <p>{this.myProp}</p>
},
props: ['myProp']
}Let's use this component in our Vue instance and pass the msg variable via props:
new Vue({
el: '#app',
render (h) {
return <div>
<myComp myProp={this.msg}/>
</div>
},
data: {
msg: 'Hello World'
},