Know what JSX is
Why use JSX in Vue? First we need to understand what JSX is, what problems it solves, and finally how to use it.
The definition of JSX
JSX is an XML-like extension to JavaScript syntax JSX is not implemented by engines or browsers. Instead, we’ll use a converter like Babel to convert JSX to regular JavaScript. Basically, JSX allows us to use HTML-like syntax in JavaScript.
The advantage of the JSX
- The template can be separated so that each part of the template is more independent and can be combined randomly for higher reusability. Finer granularity than composition with components
- Using JS to configure the DOM for each item to render, more dynamically configurable
summary
JSX is optional in BOTH Vue and React. Such as:
// React uses JSX class Hello extends React.Component {render() {
return<div>Hello {this.props.toWhat}</div>; }} class Hello extends React.Component {render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`); }}Copy the codeLearn about Vue components
When using a Vue, we typically create a root instance with new Vue(), and components are reusable Vue instances that receive the same options as new Vue, such as Data, computed, Watch, methods, and lifecycle hooks.
new Vue({
data: {
foo: 1
},
computed: {
bar: function() {/ *... */ } }, methods: { baz:function() {/ *... * /}}})Copy the codeTo handle multiple component mappings, the route instance object is passed as a parameter to the Vue constructor. New Vue() creates the root instance, and each page component instance is controlled through the Router. The structure is as follows:
export default {
name: ' ',
props:{},
data:{},
methods:{}
}
Copy the codeAs you can see, the component of the route map is also exposed as an object. In Vue, the component is described by an object. By default, we use template as the template. If we want to render a template using JSX, we will omit the template and return the template with the render method instead. And since everything else is optional, the Render method must return the template to render.
export default {
name: ' ',
props:{},
data:{
return {
text:'hello jsx'}},render() {return <div>{text}</div>
},
methods:{}
}
Copy the codeJSX is used in Vue
React students are familiar with the syntax of JSX. In fact, you can refer to the official document of React for many usages, such as the common syntax mentioned below
Js environment
How to render a variable in a Vue template
<div id="app">
{{ message }}
</div>
Copy the codeThis includes using V-bind to bind a variable value
<span v-bind:title="message"Hover your mouse for a few seconds to see the prompt for dynamic binding here! </span>Copy the codeThe same code represented by {} in JSX is shown below
render() {return (
<div id="app"> <div> {message} </div> <span title={message}> Hover the mouse for a few seconds to view the prompt message of dynamic binding here! </span> </div> ) }Copy the codeIt should be explained that in Vue “” represents a JS environment in which you can do some simple operations
and in JSX {} represents a JS environment.
{3+2}
V – if syntactic sugar
Vue often uses v-IF to control dom display and hiding, essentially dom rendering and unloading. So how do you do that in JSX
data() {return {
isShow:false}},render() {return<div> { this.isShow ? <span> : null} </div>}Copy the code{} in the code above represents a JS environment and controls the dom display by checking whether this.isShow is true or false
The binding event
Vue uses V-ON to bind the event abbreviation @
<button @click="onButtonClick"> button < / button >Copy the codeBinding events in JSX are prefixed with an on-
<button onClick={this.onButtonClick}>Copy the code- How do I pass parameters in JSX
<button onClick={this.onbuttonclick.bind (this,value)}>Copy the codeThe value above is the argument passed to the onButtonClick function. First set up the js environment with {}, then use this.onButtonClick to get the function defined in methods, pass a value to the current function through bind and return a new function to be executed. Finally, onClick binds the new function that bind returns.
- How to bind the emit event from a child component. Suppose a emit event is sent in child.vue. How to bind the listen event in JSX
// father.js
export default {
components:{
child
},
render() {return <div>
<child onCancel={this.onCancel} />
</div>
}
}
// child.vue
methods:{
onCancelClick(){
this.$emit('cancel')}}Copy the code- Other types of event bindings, such as onClick, are preceded by on-
<input onChange={this.onValueChange} />
Copy the codeV -for enumeration implementation
In Vue we can use the V-for directive to render a list based on an array.
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
Copy the codeIn JSX, a new array is generated by traversing the array in {} using the map method
<div>
{this.tagList.map(item => {
return <div>{item}</div>
})}
</div>
Copy the codeslot
The way in Vue to add content in the middle of a tag, passing content to a component, and slot location content to be replaced by incoming content
<alert-box> Something bad happened. <alert-box>'alert-box', {
template: `
<div class="demo-alert-box">
<slot></slot>
</div>
`
})
Copy the codeJSX uses the this.$slots object to get the contents of the component tag
<Temp>
123
<span>ccc</span>
</Temp>
// Temp.js
export default {
render() {return <h1>{this.$slots.default}</h1>
}
}
Copy the code- A named slot
<Temp>
123
<span slot="text">ccc</span>
</Temp>
// Temp.js
export default {
render() {return <h1>{this.$slots.text}</h1>
}
}
Copy the code- Deconstruction slot
export default {
data() {return {
list: [
{
"id": 11."name":"Insurance Encyclopedia"
}
],
propList: [
{
props: {
prop: "name",
label: "Category name"}},]}},render() {let slot = {
scopedSlots :{
default :props=>{
return <h1>{props.row.name}</h1>
}
}
}
return (
<el-Table data={this.list} >
{this.propList.map((item, index) =>{
return( <el-table-column {... item} {... slot} ></el-table-column> ) } )} </el-Table> ) } }Copy the codeProps attribute Passing
In Vue, the parent component passes props to the child component using v-bind. If there are multiple values to pass, you need to declare multiple props, or pass an object to the child component.
<my-component :prop="someThing"></my-component>
Copy the codeIn JSX you can use… Extension to pass multiple values, note that the properties to pass need to be declared under the props object
render() {let value = {
props:{
type:'primary',
disabled:'disabled'}}return( <el-button {... Value}> button </el-button>)}Copy the codeCodepen complete example
Babel-plugin-transform-vue-jsx plug-in could not be found on codepen, it could not be displayed normally, you can copy code to local project for use
reference
Babel-plugin-transform-vue-jsx rendering function & JSX