文章参考
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}