preface

Vue JSX: A development build dependency that makes Vue support JSX to write code.

Recently, it has reached the 1.0 official version. After a little combing, we will try to implement specific business.

See the README in the repository above for more postures, but here are just the ones I used.

differentiation

Here is just a list of what I can recall in my mind while writing this article

React

Writing about JSX was natural, after all, it was homegrown

  • Class name needs to be doneclassnamethe
  • propsThe delivery can be direct{... props}
  • Node pass through{props.children}Apply colours to a drawing
  • Support empty nodes including peer nodes,<><child/><child2/></>
  • Support curly braces to directly traverse the number group to generate nodes,{list.map(item=>(<a {... item.props}/>)}
  • Functional component support is very good

Vue

Supports some of vUE’s unique features, such as getting computed, instructions, and custom events;

React is similar to react. React has the following features:

  • Class names can still be used directly. React objects and arrays are supported in much the same way
  • propsThe fast delivery needs to be includedattrs
    • If you want to pass all the parents quicklyprops.{... {attrs:this.$attrs}}
      • $attrsAll props except class and style are summarized
  • The node passes throughslots“Such as the most common named person<div>{this.$slots.default}</div>
    • Passing variables (scope-slots), the fatherthis.$scopedSlots.defaultThis class passes an object
  • Nodes of the same level are not supported and must have the outermost layer
  • There is no support for direct traversal within curly braces (I get an error when I use it) and separate out a functional component
  • Function components can be written using template and JS. The simple usage is basically the same as react

The code is

Custom events

Combine it with the second chestnut to string it together

<script>
import png_default_scan_avatar from '@assets/cert/face_cert/scan_avatar.png';
import CertFooter from '.. /components/CertFooter';
export default {
  components: {
    CertFooter
  },
  name: 'face_cert'.methods: {
    nextStep(isClick) {
      if (isClick) {
        console.log('11');
      }
      // Next validate
      // this.$router.push({ name: 'cert_step4' });
    }
  },
  render() {
    const DefaultScanAvatar = (a)= > {
      return (
        <div class="default-scan-avatar">
          <div class="default-scan-avatar__desrc">Please face the phone directly and make sure the light is good</div>
          <img class="default-scan-avatar__img" src={png_default_scan_avatar} />
        </div>
      );
    };
    return (
      <div class="face-cert-page">
        <DefaultScanAvatar />
        <cert-footer text={'Start brushing face '}disabled={false} on-button-click={e= > this.nextStep(e)} />
      </div>); }};</script>

<style lang="scss" scoped>.face-cert-page { background-color: #fff; height: 100%; .default-scan-avatar { margin-top: 54px; margin-bottom: 148px; &__desrc { font-size: 36px; color: #333; text-align: center; margin-bottom: 127px; } &__img { display: block; height: 350px; width: 350px; margin: 0 auto; } } .cert-footer { .next-wrapper { width: 626px; margin: 0 auto; }}}</style>

Copy the code

{… Props} and slot representations

<script>
export default {
  name: 'CertFooter'.methods: {
    btnClick() {
      // Click the button
      this.$emit('button-click'.true);
    }
  },
  render() {
    return (
      <div class="cert-footer">
        <div class="cert-footer__btn" onClick={this.btnClick}>
          <ns-button {.{ attrs: this.$attrs}} / >
        </div>
        <safe-tips />
        {this.$slots.default}
      </div>); }};</script>

<style lang="scss" scoped>.cert-footer { width: 100%; &__btn { width: 626px; margin: 0 auto; }}</style>

Copy the code

Regular use

<script> export default {props: {cardinfo: {type: Object, default: function() {return {title: 'bank name ', type: 'card type' cardnumber: [' 3432 ', '* * * * *', '* * * * *', '4232']}. } }, defaultCard: { type: Boolean, default: false } }, render() { const { cardinfo } = this.$props; const CardNumber = ({ props }) => { return props.list.map((item, index) => { return ( <div class="bankcard__card--number-field" key={index}> {item} </div> ); }); }; return ( <div class="bankcard"> <div class="bankcard__title"> {cardinfo.title} {this.defaultCard ? ( <div Class = {[' bankcard__btn ', 'bankcard__btn - disabled]} > default < / div >) : ( <div class={['bankcard__btn', 'bankcard__btn--setDefaultCard']} onClick={() => this.$emit('change', True)}> set to default </div>)} </div> <div class="bankcard__card--type">{cardinfo.type}</div> <div class="bankcard__card--number"> <CardNumber list={cardinfo.cardnumber} /> </div> </div> ); }}; </script> <style lang="scss" scoped> .bankcard { margin: 30px 0; background-color: #fff; Box-shadow: 1px 1px 7px rgba(79, 123, 234, 0.31); width: 100%; border-radius: 5px; padding: 56px 44px; .bankcard__title { font-size: 36px; color: #333; @include flex(row, space-between, center); } .bankcard__btn { font-size: 14px; color: #333; padding: 5px 10px; border-radius: 5px; cursor: pointer; &--disabled {background-color: rgba(211, 208, 208, 0.66); color: #989393; } &--setDefaultCard { border: 1px solid #989393; &:active { color: #4f7aea; border: 1px solid #4f7aea; } } } .bankcard__card--type { padding-top: 11px; font-size: 25px; color: #666; } .bankcard__card--number { margin-top: 50px; @include flex(row, flex-start, center); cursor: pointer; font-size: 36px; .bankcard__card--number-field { height: 30px; line-height: 30px; &:not(:first-child) { margin-left: 50px; } } } } </style>Copy the code

conclusion

Vue JSX has no solution for the v-model and complex instructions of custom components.

Therefore, in this case, I still choose the template writing method to achieve the corresponding business requirements;

In general it is quite practical and in some cases it is much more comfortable to write.

The vue JSX development dependency parsing is still a work in progress, waiting for better support for vue’s own features.

At present, if the project built based on Vue CLI3 can be used directly, there is no need to manually configure related dependencies.

If there is something wrong, please leave a message and correct it in time. Thank you for reading.