在vue中如何使用jsx，并使用v-model等自定义指令

我在这里以使用elementUI为例
v-model 是 Vue 提供的一个语法糖，它本质上是由 value 属性 + input 事件组成的（都是原生的，最后我们再说如何使用指令）

如果你写了很多 render 函数，可能会觉得下面这样的代码写起来很痛苦：

render(h) {
  return h("el-input", {
    props: {
      value: this.value,
    },
    on: {
      input: function(val) {
        this.value = val;
      },
    },
  });
},

有一个 Babel 插件，用于在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

babel.config.js

module.exports = {
presets: ['@vue/babel-preset-jsx'],
}

使用jsx后：

render(h) {
  return( <el-input value={this.value} onInput={$event => this.value = $event}></el-input> )
  )
},

跟 react 一模一样了

Vue JSX 中指令的使用

我们使用 Vue 模板语法，指令用的爽歪歪，像 v-model, v-if, v-for, @等
但是，这些都在 JSX 中无法使用。那么如何实现相同的功能呢

注意：新版 vue-cli4 中，已经默认集成了 JSX 语法对 v-model 的支持，可以直接使用 v-model
如果你的项目比较老，也可以安装插件来进行支持

npm install @vue/babel-plugin-jsx -D 或者 淘宝镜像的cnpm

babel.config.js

"plugins": ["@vue/babel-plugin-jsx"],

然后就可以使用v-model了

render(h) {
  return( <el-input v-model={this.value} placeholder="请输入"/> )
  )
},

el-form案例：
注意 el-form 的 :model 属性，在 JSX 中是这样写的 props={{ model: this.data }}，比较特别

render(h) {
  return(
    <el-form
      ref="form"
      labelWidth="140px"
      props={{ model: this.data }} // 注意:model要改成这样写
      rules={this.rules}>
      <el-form-item label="券码编号: ">
        <el-input v-model={this.data.voucherCode}></el-input>
      </el-form-item>
    </el-form>
  )
},

v-if 简单的话可以使用三元表达式，复杂的话就得多写些代码了

render(h) {
  var bool = false
  return( 
    <div>
      { bool ? <el-button>按钮1</el-button> : <el-button>按钮2</el-button>}
    </div>
  )
}

render(h) {
  var num = 3
  if(num === 1){ return( <el-button>按钮1</el-button> ) }
  if(num === 2){ return( <el-button>按钮2</el-button> ) }
  if(num === 3){ return( <el-button>按钮3</el-button> ) }
}

v-for 就使用 map 方法来实现

render(h) {
  var list = [1,2,3]
  return( 
    <div>
      { list.map(item => <el-button>按钮{item}</el-button>) }
    </div>
  )
}

@事件想到用 onChange, onClick
需要注意的是，传参数不能使用 onClick={this.removePhone(params)}，这样子会每次 render 的时候都会自动执行一次方法
应该使用 bind，或者箭头函数来传参

render(h) {
  return( 
    <div>
      <el-button onClick={() => this.handleClick(11)}>按钮</el-button>
    </div>
  )
}