指令

1. v-html ==>  `domPropsInnerHTML={xxxxx}`

2. v-on:click / @click ==> `on-click` = `{this.xxx()}` 无效则使用 `{() => this.xxx()}`

3. v-if ==>  `xxxx ? 为true的内容 : 为false的内容` (三目运算符)
   v-show ==> 在jsx中还是直接用 `v-show`

4. 指令修饰符，以`trim`为例: v-model_trim={this.userName}

5. v-for:
  <p v-for="(item, index) in content" :key="index" type="success">
    {{item.name}}
  </el-tag>

  {
    this.content.map((item, index) => {
      return (
        <p key={index} type="success">
          {item.name}
        </p>
      )
    })
  }

6. v-bind:xxx='value' ==> xxx={this.value}

动态绑定属性值

模板写法：
  <router-link :to="{path: '/user-center', query: { id: this.userInfo.id }}">
    个人中心
  </router-link>


JSX写法：
  <router-link
    to={{
      path: '/user-center',
      query: { id: this.userInfo.id }
    }}
  >
    个人中心
  </router-link>

绑定style与class

绑定动态class：
<div class={['left-info', item.createUserId === item.userId ? 'is-landlord' : '']}></div>

动态绑定style：
写法一：
<div class="thumbnail-wrapper" style={{ width: this.width + 'px' }}></div>

写法二：
<div class="zoom-wrapper" style={'width:' + this.width + 'px;height:' + this.width + 'px'}></div>

.sync 修饰符写法

模板写法：
<MyComponent :visible.sync="showDialog" />

JSX写法：
<MyComponent visible={ this.showDialog} {...{on: {'update:visible': (val) => { this.showDialog= val }}}} />

vue事件、事件修饰符与JSX原生事件

@submit.native.prevent ==> `nativeOnSubmit={event => event.preventDefault()}`

@change ==> `on-change={() => this.formatNumber()}`

@keyup.native ==> `nativeOnKeyup={() => {this.formatNumber()}}`

@mousewheel.native.prevent ==> `nativeOnMousewheel={event => event.preventDefault()}`

@keyup.native.enter="fetch()" ==> `nativeOn-keyup={e => e.keyCode === 13 && this.fetch()}`

绑定原生属性

使用 attrs 绑定原生属性
<input
  type="text"
  class="num-input"
  disabled
  value={props.row.quantity}
  attrs={{ onkeypress: 'return(/[\\d]/.test(String.fromCharCode(event.keyCode)))' }}
  on-input={
    (event) => {
      this.customizeQuantity(props.$index, props.row.id, props.row.inventory, event);
    }
  }
/>

template 写法：
<input
  type="text"
  class="num-input"
  disabled
  :value="scope.row.quantity"
  onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
  @input="this.customizeQuantity(props.$index, props.row.id, props.row.inventory, event)"
/>

绑定原生JavaScript事件

oninput="this.type = 'password'" ==> `nativeOnInput={(e) => {e.target.type = 'password'}}`

onkeypress ==> `nativeOnKeypress={event => (/[\d]/.test(String.fromCharCode(event.keyCode)))}`

作用域插槽，以el-table为例

模板写法：
<el-table-column>
  <template scope-slot="props">
    <el-button
      type="primary"
      size="mini"
      click="openDialog('edit',props.row)"
    >
      编辑
    </el-button>
  </template>
</el-table-column>


JSX写法：
<el-table-column
  key={index}
  label={item.name}
  width={item.width}
  {
  ...{
    scopedSlots: {
      default: props => {
        return (
          <el-button
            type="primary"
            size="mini"
            on-click={this.openDialog.bind(this,'edit',props.row)}
          >
            编辑
          </el-button>
        )
      }
    }
  }
  }
/>