如何在vue中使用jsx与ES6类的写法

前言：本文旨在帮助对想在vue使用jsx和类class风格写法的同学做一个小小指导

通过本文，一定会让你在项目中愉快的运行jsx(至少不会报错吧);

ok开始吧

1. 首先我们熟悉react组件写法：

import React, { Component } from 'react';
export default class App extents Component {
    render(){
        return <div>Hello React</div>
    }
}
复制代码

用过react的同学表示到了vue水土不服，有些同学希望自己的vue更bigger，情有可原

下面直接开始如何使用jsx和类react的写法来编写简单的vue组件demo吧^_^

不过，可能这个教程适合对jsx或react熟悉的同学，因为vue的同学也对jsx水土不服...

first:

1.1 安装:

$ cnpm i babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --D
复制代码

1.2 在.babelrc文件添加配置：

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

1.3 现在可以愉快地删掉单文件组件头部熟悉的 teamplate 标签了，因为我们可以在render方法中使用jsx编写html（虚拟dom）了：

<script>
exprot default {
    data() {
        return {
            greet: 'hello Vue'
        }
    },
    
    ...balabale,
    
    // render方法的h参数是createElement的别名，虽然页面没使用，但是必须有，否则你懂的...
    
    render (h) {
      <div>
        Vue and Jsx
        <p>{this.greet}</p>
      </div>
    }
}
</script>
复制代码

好了，一个简单的demo就是这样了,系不系想说一句so easy呢，没错，就是这样简单

jsx在vue中，有些场景是很不少好处的，代码看起来也直观很多；但是如果熟悉了vue，或者没用过react的话，也不必太深度地在vue中使用jsx，可能别的同事不熟悉jsx写法呢，而且vue组件或dom属性需要额外学习（踩坑），就会有点得不偿失了

2.用ES6类的写法改造你的vue

react类的写法，好处有很多，也很能发挥出js原生力量，个人感觉vue入侵性太强了，但是没关系，vue的强大也是不言而喻的，我这不是投奔vue了吗，react的同学别打我!vue可以用类Class来写，感觉铠甲勇士穿上了铠甲一样

言归正传

2.1 安装

$ cnpm i vue-property-decorator

2.2 此时单文件可以写成:

<template>
    <div :class="{box: true}">
        {{ message }}
        <div>
          <button @click="handleLike">老弟，不错嘛<button>
          <button @click="handleHate">怎么回事，小老弟<button>
        </div>
    </div>
</template>


<script>
  import uuid from 'uuid-js';
  import { Vue, Component } from 'vue-property-decorator';

  @Component({
    // 设置默认的props
    props: {
      id: {
        type: String,
        default: uuid.create()
      }
    }
  })
  export default class App extents Vue {
    // 一般原来this的属性，一样可以在data方法中放回
    data() {
        return {
            message: '来自一位愿意透漏姓名的XXX网友说表示单身很快乐'
        }
    }
    // 比如点击事件之类的，原来在methods，computed里面定义方法的，现在可以独立出来:
    // 喜欢
    handleLike () {
        console.log('nice')
    }
    // 不屑一顾
    handleHate () {
        console.log('bad')
    }
    // 其他组件，route生命周期不变
    created {}
    mounted {}
    ....
  }
</script>

// 样式
<style lang="stylus" scoped>
  .box
    color red
</style>
复制代码

可能大家注意到了 vue-property-decorator这个模块了，没错，我们使用这个模块就可以用class类的写法来改写原来 exprot default {...} 的方式了

可能你对vue-class-component和 vue-property-decorator 疑问，想知道区别在哪， 其实vue-class-component的vue官方维护的模块，vue-property-decorator是社区实现的并且是依赖vue-class-component模块开发的，项目中用后者就可以了

So far so good

基于ES6类的vue组件与jsx不是彼此依赖的，如果不习惯jsx只用基于ES6类的vue组件也是完全没问题的，可能不使用jsx对习惯vue的同学来说更方便

到了这一步，也没什么好说的了，想实现这种写法的同学，也是有某个想法的

以上只是一个简单的例子，当然里面还有很多内容，大家自行觅食吧

可以去官网搜索相关的包的使用，这才是最重要的

转载于:https://juejin.im/post/5c248675f265da613b6fd452