vue jsx 语法与 react 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>