文章参考
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方法实现两种，大家可以做一个简单的对比
<template> <div> <Table border :columns="columns7" :data="data6"></Table> </div> </template> <script> export default { data () { return { columns7: [ { title: '姓名', key: 'name', render: (h, params) => { return h('div', [ h('Icon', { props: { type: 'person' } }), h('strong', params.row.name) ]); } }, { title: '操作', key: 'action', width: 150, align: 'center', render: (h, params) => { return h('div', [ h('Button', { props: { type: 'primary', size: 'small' }, style: { marginRight: '5px' }, on: { click: () => { this.show(params.index) } } }, '查看'), h('Button', { props: { type: 'error', size: 'small' }, on: { click: () => { this.remove(params.index) } } }, '删除') ]); } }, { title: 'JSX', key: 'address', render: (h, params) => { console.dir(params) let aaa = false; if (aaa) { return ( <button> sdfadsfdsa </button> ) } else { return ( <div> <i-button type="primary"> {this.buttonName} </i-button> <br/> <dropdown on-on-click={this.test}> <a href="javascript:void(0)"> 下拉菜单 <icon type="arrow-down-b"></icon> </a> <dropdown-menu slot="list"> <dropdown-item>驴打滚</dropdown-item> <dropdown-item>炸酱面</dropdown-item> <dropdown-item disabled>豆汁儿</dropdown-item> <dropdown-item>冰糖葫芦</dropdown-item> <dropdown-item divided>北京烤鸭</dropdown-item> </dropdown-menu> </dropdown> </div> ) } } }, ], data6: [ { name: '王小明', age: 18, address: '北京市朝阳区芍药居' }, { name: '张小刚', age: 25, address: '北京市海淀区西二旗' }, { name: '李小红', age: 30, address: '上海市浦东新区世纪大道' }, { name: '周小伟', age: 26, address: '深圳市南山区深南大道' } ], buttonName:"我是btn名字" } }, methods: { show (index) { this.$Modal.info({ title: '用户信息', content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}` }) }, remove (index) { this.data6.splice(index, 1); }, test: function (){ alert("test"); } } } </script>
使用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}