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>