vue项目中使用jsx语法

vue项目中使用jsx语法

• 1、官方文档传送门
• 2、github上插件传送门

一、环境搭建步骤

• 1、使用vue-cli构建一个项目

• 2、安装依赖包

  yarn add babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --dev

• 3、在.babelrc中配置

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

• 4、创建一个test.vue的文件

  <script>
  export default {
    data () {
      return {
        msg: 'hello'
      }
    },
    methods: {
     print (e) {
        console.log(e)
        console.log(this)
        console.log('点击了我')
      }
    },
    render () {
      return (
        <div>
          <h1 class="h1" onClick={(e) => this. print(e)}>{this.msg}</h1>
        </div>
      )
    }
  }
  </script>
  
  <style scoped>
  .h1{
    color: #f00;
  }
  </style>

• 5、使用方式和传统的方式一样的,只是把template里面的代码放到render函数里面去了