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>
);
// 自定義過濾器
不建議使用，直接當(dāng)函數(shù)使用
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> 
);
//三元運(yùn)算 
<div>
 <h1>{i == 1 ? 'True!' : 'False'}</h1>
</div
// 注釋
<div>
 <h1>菜鳥教程</h1>
 {/*注釋...*/}
</div>
// html
<div>{{_html: '<h1>Hello World!!</h1>'}}</div>
// h函數(shù)寫法
return h('Input', {
 props: {
 value: params.row.buyingNums
 },
 on: {
 input: val => {
 params.row.buyingNums = val;
 },
 'on-blur': () => {
 this.update(params);
 }
 }
});
// 所有的事件監(jiān)聽必須以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"]
}