Basic usage and advanced parts of JSX in Vue

Basic usage

First of all, we need to agree that using JSX component naming uses the camel naming method with capital letters. The styles can be less and can be written directly in the same file based on vue-styled-components. Complex suggestions are placed in a separate _Styles.js_ file. Of course, you can also use Less/Sass to write without using CSS-IN-JS, and then import it in the file.

Here is a general skeleton:

import styled from 'vue-styled-components'

const Container = `
    heigth: 100%;
`

const Dashboard = {
  name: 'Dashboard',
  
  render() {
    return (
        <Container>content</Container>
    )
  }
}

export default Dashboard

Interpolation

Using single brackets in JSX to bind text interpolation

<span>Message: {}</span>
<!-- Similar tov-html -->
<div domPropsInnerHTML={}/>
<!-- v-model -->
<el-input v-model={} />

No need to put it in jsxv-modelIt is divided into two parts: event binding and assignment, and it is written separately because there are corresponding babel plug-ins to handle it specifically.

style

It can be used directly in JSXclass="xx"To specify the style class, inline styles can be written directlystyle="xxx"

<div class="btn btn-default" style="font-size: 12px;">Button</div>

<!-- Dynamic specification -->
<div class={`btn btn-${ ? 'default' : ''}`}></div>
<div class={{'btn-default': , 'btn-primary': }}></div>
<div style={{color: 'red', fontSize: '14px'}}></div>

Traversal

None in JSXv-forandv-ifAll of these need to be implemented in Js

{/* Similar to v-if */}
{ && <Title />}

{/* Similar to v-if plus v-else */}
{ ? <SubTitle /> : <Title />}

{/* Similar to v-for */}
{(option => {
  <div>{}</div>
})}

Event binding

Event binding needs to be added to the front end of the event nameonPrefix, native event additionnativeOn

<!-- correspond@click -->
<el-buton onClick={}>Click me</el-buton>
<!-- correspond@ -->
<el-button nativeOnClick={}>Native click</el-button>
<!-- Pass parameters -->
<el-button onClick={e => ()}>Click and pass data</el-button>

Notice: If you need to pass parameters to the event processing function, you need to use arrow functions to implement it. If the arrow function is not used, the object of the event will be receivedeventproperty.

Advanced Part

In Vue, based on jsx, components can also be split into small functional components, but there is a limitation that there is an outer wrapping element, and it cannot be written directly like:

const Demo = () => (
    <li>One</li>
  <li>Two</li>
)

Required to be written as:

const Demo = () => (
    <div>
      <li>One</li>
    <li>Two</li>
  </div>
)

In React, empty tags can be used<></>and<></>To implement the wrapping element, the empty tag here is actually justa syntactic sugar. At the same time, in React 16, the form of returning arrays is directly supported:

const Demo = () => [
  <li>One</li>
  <li>Two</li>
]

Then in Vue, similar functions can only be achieved through traversal. The general idea is to define the data first and then directly onemapGenerate, of course, if the element's tags are of different types, you need to add an additional identifier to judge.

{
  data() {
    return {
      options: ['one', 'two']
    }
  },
    
    render() {
    const LiItem = () => (option => <li>{option}</li>)
                                          
    return (
      <div>
            <ul>
              <LiItem />
          </ul>
         </div>
    )
  }
}

Event modifier

The usage of binding of events is briefly introduced in the basic part. Here we mainly add the writing of event modifiers.

In the template syntax, Vue provides many event modifiers to quickly handle event bubbles, capture, event trigger frequency, key recognition, etc. You can view the official documentation directlyEvent & key modifierPart, here is the relevant content:

How to use it is as follows:

<el-button {...{
    '!click': ,
  '!keyup': ,
  '~!mouseover': 
}}>Click Me!</el-button>

The event modifier given below requires writing the corresponding equivalent operation in the event handling function.

Here is an example of using modifiers in event handlers:

methods: {
  keyup(e) {
    // Corresponding to `.self`    if ( !== ) return
    
    // Corresponding to `.enter`, `.13`    if (! ||  !== 13) return
    
    // Corresponding `.stop`    ()
    
    // Corresponding to `.prevent`    ()
    
    // ...
  }
}

ref and refInFor

In VuerefUsed to register reference information for elements or child components. The reference information will be registered in the parent component$refson the object. If used on a normal DOM element, the reference points to the DOM element; if used on a child component, the reference points to the component.

Notice：

Because ref itself is created as a rendering result, you cannot access them during the initial rendering - they do not exist yet
$refsNot responsive, so you should not try to use it to do data binding in templates.

whenv-forWhen used with an element or component, the reference information will be an array containing DOM nodes or component instances.

If you want to reference traversal elements or components in jsx, for example:

const LiArray = () => (option => (
  <li ref="li" key={option}>{option}</li>
))

Will find fromthis.$What is obtained in the array value is not the expected array value, so you need to use it at this timerefInForAttributes, co-settrueTo achieve in the templatev-forUsed inrefEffects:

const LiArray = () => (option => (
  <li ref="li" refInFor={true} key={option}>{option}</li>
))

Slot (v-slot)

Can be used in jsxthis.$slotsto access the contents of the static slot.

Notice: It was abandoned after Vue 2.slotandslot-scope, use the new unified syntax in the template uniformlyv-slotinstruction.v-slotOnly used for Vue components andtemplateLabel.

<div class="page-header__title">
    {this.$ ? this.$ : }
</div>

Equivalent to template

<div class="page-header__title">
  <slot name="title">{{ title }}</slot>
</div>

In the official Vue document, it is mentioned that: **All content in the parent template is compiled in the parent scope; all content in the child template is compiled in the child scope. **So the example below doesn't work properly

<current-user>
    {{  }}
</current-user>

exist<current-user>The component can be accesseduserattribute, but the content provided is rendered in the parent component. If you want to achieve the desired effect, you need to use it at this timeScope slotsNow. The following is the rewritten code. For more knowledge points, you can directly view the official documentation.Scope slots。

<!-- current-userComponent definition part -->
<span>
    <slot v-bind:user="user">
      {{  }}
  </slot>
</span>

<!-- current-user use -->
<current-user>
    <template v-slot:default="slotProps">
      {{  }}
  </template>
</current-user>

The above example is actually an official example. It should be noted here that the so-called scope slot function in Vue is actually similar to that in ReactRender PropsThe concept of , but in React, we not only provide attributes, but also provide operation methods. However, in Vue, we provide more data for parent scope rendering and display. Of course, we can also provide methods, for example:

<template>
    <div>
    <slot v-bind:injectedProps="slotProps">
      {{  }}
      </slot>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user: {
          firstName: 'snow',
          lastName: 'wolf'
        }
      }
    },
    
    computed: {
      slotProps() {
        return {
          user: ,
          logFullName: 
        }
      }
    },
    
    methods: {
      logFullName() {
        (`${} ${}`)
      }
    }
  }
</script>

Use in parent component:

<current-user>
    <template v-slot:default="{ injectedProps }">
      <div>{{  }}</div>
        <el-button @click="">Log Full Name</el-button>
  </template>
</current-user>

In the above code, we actually use deconstruction to obtaininjectedProps, the attribute name can also be renamed based on the deconstruction feature, inpropforundefinedSpecify the initial value when .

<current-user v-slot="{ user = { firstName: 'Guest' } }">
  {{  }}
</current-user>

If the component has only one default slot, you can also use the abbreviation syntax,v-slot:default="slotProps"Writtenv-slot="slotProps", named slot written asv-slot:user="slotProps", if you wantDynamic slot nameCan also be written asv-slot:[dynamicSlotName],alsoNamed slotsThere are also abbreviation syntax, for examplev-slot:headerCan be rewritten as#header

The above introduces many slot-related knowledge points to illustrate its importance in the development process. I have talked a lot about how to define and use scoped slots in templates. Now I'm going to the topic of how to use them in jsx?

// current-user components
{
  data() {
    return {
      user: {
        firstName: 'snow',
        lastName: 'wolf'
      }
    }
  },
    
  computed: {
    slotProps() {
      return {
        user: ,
        logFullName: 
      }
    }
  },
    
  methods: {
    logFullName() {
      (`${} ${}`)
    }
  },
    
  render() {
    return (
        <div>
        {this.$({
          injectedProps: 
        })}
      </div>
    )
  }
}

Then use it in the parent component as jsx:

<current-user {...{
  scopedSlots: {
    subTitle: ({ injectedProps }) => (
        <div>
          <h3></h3>
        <el-button onClick={}>Log Full Name</el-button>
      </div>
    )
  }
}}></current-user>

instruction

What you need to note here is that in jsx, all Vue built-in instructions are in addition tov-showNone of them are supported, and some equivalent methods are needed to implement it, such asv-ifUsing trilogy operation expressions,v-foruse()wait.

For custom directives, you can usev-name={value}When writing the syntax of , it should be noted that the parameters and modifiers of the instructions do not support it. Examples given in the official documentation directive sectionv-focusUse as an example to introduce two solutions:

1 Pass all directive properties directly using objects

<input type="text" v-focus={{ value: true }} />

2 Use original vnode directive data format

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

Filter

In fact, filters are not used much during development becauseMore often, you can use calculation properties to convert and filter data.. Here I just briefly mention that there is no knowledge point to delve into.

The usage in the template is as follows:

<!-- In double braces -->
{{ message | capitalize }}

<!-- exist `v-bind` middle -->
<div v-bind:></div>

How to use in jsx is:

<div>{this.$('formatDate')('2019-07-01')}</div>

Notice: Since Vue global filters are only used in templates, if you need to use them in the component method, you can separate the filter method from a common Js file, then introduce them into the component, and then use them in the method.

The source code attachment has been packaged and uploaded to Baidu Cloud, so you can download it yourself~

Link: /s/1f6KoayeRaSFiXbSYswkkeQ
Extraction code: wk4p
Baidu cloud link is unstable and may become invalid at any time. Please save it quickly.

Open source address
Code cloud address:
/u/defu

Github address:
/u/defu

Summarize

This is the introduction to this article about the basic usage and advanced parts of JSX in Vue. For more related content on JSX usage in Vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!