vue2.x 使用JSX 开发

文章参考

http://www.cnblogs.com/bhaltair/p/6648946.html

 

工作中，使用了iview中的table做开发，发现很多复杂的td内容需要使用 createElement函数(虚拟DOM)实现，开发的过程中非常的繁琐，而且需要对createElement方法的API非常的熟悉，为了减轻同事的开发工作量，想到了使用JSX 语法来实现！

 

搭建环境：

1、安装相关的babel插件

 

cnpm install   babel-plugin-syntax-jsx   babel-plugin-transform-vue-jsx   
babel-helper-vue-jsx-merge-props   babel-preset-es2015   --save-dev

 

 

2、修改.babelrc文件

 

{
  "presets": [
      "es2015",
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx","transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

 

 

 

下面的例子是直接copy iview官网的例子，自己使用了 JSX 语法实现和 createElement方法实现两种，大家可以做一个简单的对比

 

 

 

 

 

使用JSX开发需要注意如下几点：

1、只能有一个最外层节点，不能同事出现平行的最外层标签（因为createElementa只能创建一个dom节点，其余的是其子节点）

 

2、需要使用“小写字母+中划线”来引用外部组件，例如i-button、dropdown-menu

 

3、如果需要引入vue对象中的data数据，语法是 {this.dataName}，例如{this.buttonName}

 

4、如果是希望引入事件，即on-“事件名称”，如果事件名称是驼峰命名，需要使用中划线代替，例如on-on-click，组件定义的是on-click事件，那么在jsx中需要使用on-on-click事件，第一个on相当于原生定义事件的方式。

 

5、事件的引入与变量的引入类似，{this.methodName}，例如：{this.test}