1. What is JSX

JSX is a term coined by Facebook’s engineering team.

JSX is an XML-like syntactic extension of JavaScript without any defined semantics.

const div = <div>This is a DIV box</div>
Copy the code

2. Bind variables

Binding variables in JSX is not quite the same as binding variables in Template.

render (createElement) { 
    return ( <button content={this.generatedText}></button>)}Copy the code

3. Bind HTML

Setting the HTML content in JSX is also different from setting the HTML content in Template, which uses domPropsInnerHTML in JSX, and v-HTML in Template

In the template:

<template>
    <div v-html="content"></div>
</template>
Copy the code

In the JSX:

const div = <div domPropsInnerHTML={content}></div>
Copy the code

4. Bind events

In JSX, events are bound with the on prefix, such as the onClick event, and native events add nativeOn

const button = <button onClick={this.handleClick}></button>
Copy the code

5. Event modifiers

The event modifier is modified by:.

const button = <button onClick:prevent={this.handleClick}></button>
Copy the code

Official recommendation:

<input vOn:click_stop_prevent="newTodoText" />
Copy the code

You can also use shortcut keys

The modifier The prefix
.passive &
.capture !
.once ~
.capture.onceor.once.capture ~!
The usage is as follows: 
<el-button {... {'! click': this.doThisInCapturingMode,
  '! keyup': this.doThisOnce,
  '~! mouseover': this.doThisOnceInCapturingMode }}>Click Me! </el-button>Copy the code

Component library event binding

When using component library development, event names with on-* can be written as follows.

exrpot default {
  render() {
    return (
      <el-upload {.{
        props:{'on-success':() = >{// business logic code... }}}}> Upload</el-upload>)}}Copy the code

7. V-for loop

In JSX, array.map() is used to loop.

const lis = ` `` 
      
 
       
    
         { this.data.map(item => { return 
        
  • { item.title }
    •  }) } 
       
 
      
Copy the code

8. Ternary operators

<script>
export default {
  data() {
    return {
      isTrue: true}; },render() {

    const msg = this.isTrue ? 'You won the lottery.' : 'Unfortunately, I missed.'
    return (
      <div>{MSG}</div>); }}; </script>Copy the code

9, Style style

Use {… Bind with {}}

<script> export default { data() { return { backgroundColor: 'blue', styleObject: { backgroundColor: 'red', fontSize: '20px', color: '#fff' } }; }, render() { return ( <div> <span {... {style: {backgroundColor: this.backgroundColor}}}> I am a blue background </span> <span {... {style: this.styleObject}}> I am red background </span> </div>); }}; </script>Copy the code

10. Class mode

In Vue, JSX can be written as class=”xx”. In fact, since class is a reserved JS word, the DOM attribute is className and the HTML attribute is class. We can also write it in Vue like this:

<div domPropsClassName="mt__xs"></div>
Copy the code

Note that if you also write class=”xx” domPropsClassName=”yy” then the latter has a higher priority, regardless of position. So I’m going to try to write class

Use {… Bind with {}}

<script>
export default {
  data() {
    return {
      isBlue: true.classOjbect: ['red']}; },render() {
    return (
      <div>
        <span {.{
          class: {
            blue: this.isBlue,}}} >I have a blue background</span>

        <span {.{
          class: this.classOjbect}} >I'm on a red background</span>
      </div>); }}; </script>Copy the code

11. Directive

You can use the v-name={value} syntax to write a customized command. Note that the parameters and modifiers of the command are not supported in this way. Take the example of v-focus use given in the instruction section of the official document as an example to introduce two solutions:

1. Pass all directive properties directly using objects

<input type="text" v-focus={{value: true}} >Copy the code

2. Use the original VNode instruction data format

{
  directives：{
    focus: {
      inserted: function(el) {
        el.focus()
      }
    }
  },
    
  render() {
    const directives = [
      { name: 'focus'.value: true}]return (
      <div>
          <input type="text" {.{ directives}} / >
      </div>)}}Copy the code

11. Attrs binding

Commonly used dynamic ID, data-* assignment

<script>
export default {
  data() {
    return{}; },render() {
    return (
      <div>
        <span {.{
          attrs:{'id': 'app',
            'data-id': '1234'}}} >I have a blue background</span>
      </div>); }}; </script>Copy the code

High order component

render(h) {
 return(<my-button { ... { props: this.attrs, attrs: this.$attrs, } }><my-button>); }Copy the code

Slots

<el-table
  data={this.tableData}
  stripe
>
  <el-table-column
    prop='shop_name'
    label='Shop Name'
  >
  </el-table-column>
  <el-table-column
    prop='shop_status'
    label='Store state'
    {.{
      scopedSlots: {
        default: props= >{// props. Row Data of the current line return props.row.shop_status?<el-tag type='success'>To enable the</el-tag> : <el-tag type='danger'>disable</el-tag>}}}} ></el-table-column>
  <el-table-column
    prop='shop_create_time'
    label='Creation time'>
  </el-table-column>
</el-table>
Copy the code

Default slot template:

<button>
    <slot></slot>
</button>
Copy the code

JSX:

<button>
    {this.$scopedSlots.default()}
</button>
Copy the code

Named slot template

<button>
    <slot name="before"></slot>
    <slot ></slot>
</button>
Copy the code

JSX writing:

let before = '';
if (this.$scopedSlots.before) {
    before = this.$scopedSlots.before(props => props.text);
}
return (<button>
    { before }
    {this.$scopedSlots.default()}
</button>)
Copy the code

Scope slot template

<slot :isAdvancedPanelShow="isAdvancedPanelShow"></slot>
Copy the code

JSX writing:

{this.$scopedSlots.default({
    isAdvancedPanelShow: this.isAdvancedPanelShow
})}
Copy the code

Dynamic components

CreateElement gets the full programming capability of js. Here’s an example of using different titles for different grades:

Vue.component('anchored-heading', { render: Function (createElement) {return createElement('h' + this.level, // tag this.$slot.default // subnode array)}, props: { level: { type: Number, required: true } } })Copy the code

This case is written by JSX as:

Vue.component('anchored-heading', {
  render: function (h) {
   const TagName = 'h' + this.level;
    return <TagName>{ this.$slots.default(this.props) }</TagName>
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
Copy the code

13, v – model

<! -- v-model --><el-input v-model={this.vm.name} />
Copy the code

To add a modifier:

<el-input vModel_trim={inputValue}/>
// or use
<el-input 
 value={this.inputValue}
 on-input={val= > this.inputValue = val.trim()}/>
 // or use
 <el-input v-model_trim={inputValue}/>
Copy the code

14. Empty labels

In React, you can render the DOM with empty tags; in jSX, you can’t use <> tags directly.

15, data writing

JSX is essentially the syntactic sugar for createElement, which is eventually converted by the compiler into the createElement function. When using {… When obj}, obj will compile as the second argument to createElement.

The second argument to vue’s createElement function is different from react’s createElement function. In vue, the second argument is the data object, and the react second argument is props. So I call this method data writing.

Parameters in data:

 render: h= > h(CountTo, {
    // 'class': 'count-to', // add the class name to the outermost box of the component
    // Or write it this way
    // 'class': ['count-to', true ? 'count-to2' : ''], 
    // Or write it this way
    'class': {
      'count-to': true.'count-to2': 1= = =1,},attrs: {}, // Define attribute id and so on
    style: {}, // Define the style
    props: { 
      
      endValue: 100
    },
    // domProps: {// Some properties of dom
    // innerHTML: '11' // You can set some content of the tag
    // },
    on: { // Add events
      'on-animation-end': (val) = > { / / the event name
        console.log(val)
      }
    },
    nativeOn: { // Bind a click event to the outermost element of the component when no click event is defined within the component
      'click': () = > {
        console.log('click')}},directives: [].// Custom directives can be defined
    scopedSlots: {},
    slot: ' './ / slots
    key: ' '.// Set a value so that each component's key is not equal
    ref: ' ' // ref
  })
Copy the code

For example, when dynamic properties need to be set in VUE:

const props={
  name: 'joyer',},<my-button {.{
  props:props,
}}></my-button>
Copy the code

For example, the official recommended JSX notation for native DOM attributes:

<button domPropsType="submit"><button>
Copy the code

Data is written as follows:

<button { ... {domProps: {
    type: 'submit',
  }, 
}}><button>
Copy the code