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)
// methods
this.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 "color: #ff0000">好了，下面看下vue.js 使用jsx语法的方法

1、创建一个测试的组件


export default {
 name:'Test',
 components:{

 },
 render(h){
  return <div>
   test
  </div>

 },
 data () {
  return {

  }
 }
}


2、把编辑器js语言的版本设置成jsx，这样编辑器 可以正确识别jsx语法
3、安装npm依赖


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


4、修改 .babelrc


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


我是下载的vux的模板，修改之后顺利打包jsx格式的文件


总结
以上所述是小编给大家介绍的vue jsx 使用指南及vue.js 使用jsx语法的方法，希望对大家有所帮助！