This article is intended as a guide for those who want to use JSX and class style writing in VUE

With this article, you should have fun running JSX on your project (or at least error free).

Ok let’s start

1. First, we are familiar with the react component writing:

import React, { Component } from 'react';
export default class App extents Component {
    render() {return <div>Hello React</div>
    }
}
Copy the code

Students who have used React say that the VUE is not comfortable with the environment. Some students want their VUE to be bigger, which is understandable

How to write a simple vue component demo using JSX and React classes

However, maybe this tutorial is suitable for students who are familiar with JSX or React, because vUE students are also not comfortable with JSX.

first:

1.1 installation:

$ cnpm i babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --D
Copy the code

1.2 Add configuration to the. Babelrc file:

{ "presets": ["env"], "plugins": ["transform-vue-jsx"] }

Now we can happily remove the familiar teamplate tag from the single-file component header, because we can write HTML (virtual DOM) using JSX in the Render method:

<script>
exprot default {
    data() {
        return {
            greet: 'hello Vue'}},... Balabale, // the h argument to the render method is an alias for createElement. render (h) { <div> Vue and Jsx <p>{this.greet}</p> </div> } } </script>Copy the code

Ok, a simple demo is just like this, or you want to say “so easy”, yes, it is that simple

JSX In VUE, some scenarios are very good, and the code looks much more intuitive; However, if you are familiar with VUE, or have not reacted before, you don’t need to use JSX in vUE too deeply. Other colleagues may not be familiar with JSX writing, and the VUE component or DOM properties may require additional learning

2. Modify your VUE with ES6 style writing

React class writing method, there are many advantages, also can play the original js power, personally feel vue invasion is too strong, but it doesn’t matter, vue is also self-evident, I did not go to Vue, react students don’t hit me! Vue can be written as Class Class and feels like an armor-warrior wearing armor

Get to the point

2.1 installation

$ cnpm i vue-property-decorator

2.2 The single file can be written as:

<template>
    <div :class="{box: true}">
        {{ message }}
        <div>
          <button @click="handleLike"< p style = "box-sizing: border-box! Important; word-wrap: break-word! Important"handleHate"<button> </div> </div> </template> <script> import uuid from'uuid-js';
  import { Vue, Component } from 'vue-property-decorator'; @component ({// Set the default props: {id: {type: String,
        default: uuid.create()
      }
    }
  })
  exportDefault class App extents Vue {// Normally this property can also be put back in the data methoddata() {
        return {
            message: 'From a XXX who wishes to remain anonymous saying that she is happy to be single'}} // For example, click events, which used to define methods, computed, can now be isolated: // likehandleLike () {
        console.log('nice'} //handleHate () {
        console.log('bad'// Create {} mounted {}.... } </script> // style <style lang="stylus" scoped>
  .box
    color red
</style>
Copy the code

Decorator: exprot default {… decorator: exprot default {… }

In case you’re wondering what the difference is between vue-class-Component and vue-property-decorator, the vue-class-component module is officially maintained by the vUE decorator. Vue-property-decorator is community-implemented and relies on the vue-class-component module, which is used in the project

So far so good

Vue components based on ES6 class and JSX are not dependent on each other. If you are not used to JSX only using VUE components based on ES6 class, it is not a problem. It may be more convenient for students who are used to VUE

At this point, there’s nothing more to say, but if you want to write this way, you have an idea, right

The above is just a simple example, of course, there is a lot of content, everyone to find their own food

The most important thing is to go to the official website and search for packages to use