vue jsx 使用指南及vue.js 使用jsx语法的方法

let component = null// if 语句if (true) { component = (  <div></div> );} else { component = (  <div></div> );}var ul = ( <ul>  {component} </ul>);// map 语句var coms = limit.map(i => { return {  <li>   {ul}  </li> };})// 属性<li onClick={() => console.log()}>// 自定义指令let directives = [{name: 'prod-img', value: params.row.skn, modifiers: {skn: true}} ];return (  <div>    <img {...{directives}}></img> // 属性展开  </div>);// 自定义过滤器不建议使用，直接当函数使用foo(something)// methodsthis.foo()// model<i-input value={params.row.factoryCode} placeholder='请输入...' onInput={val => (params.row.factoryCode = val)} style={{width: '100%'}}></i-input>// 自定义事件 return (  <Operator   category-id={this.categoryId} // prop绑定   product={params.row} // prop 绑定   onChange={this.onChangeStatus}> // event 绑定  </Operator> );//三元运算 <div> <h1>{i == 1 ? 'True!' : 'False'}</h1></div// 注释<div>  <h1>菜鸟教程</h1>  {/*注释...*/}</div>// html<div>{{_html: '<h1>Hello World!!</h1>'}}</div>// h函数写法return h('Input', {  props: {    value: params.row.buyingNums  },  on: {    input: val => {      params.row.buyingNums = val;    },    'on-blur': () => {      this.update(params);    }  }});// 所有的事件监听必须以on开头，然后字母大写// template<input @on-change='click'>// jsx<input onOn-change={() => this.click()}></input>

export default { name:'Test', components:{ }, render(h){  return <div>   test  </div> }, data () {  return {  } }}

 babel-plugin-syntax-jsx/ babel-plugin-transform-vue-jsx/ babel-helper-vue-jsx-merge-props/

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