vue jsx 使用指南

vue jsx 使用指南

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)

// 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 绑定
      on-change={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>
<input on-on-change={() => this.click()}></input>
<input on-on-change={(val) => this.click(val)}></input>
<input on-on-change={ this.click}></input>