学Vue，就要学会vue JSX（三）

是时候使用JSX代替createElement了

接着上面的讲，当我们看到上面用createElement去实现组件，太麻烦了，别说工作效率提高了，就是那些嵌套可以嵌套正确就很赞了，所以我们需要用JSX去简化整个逻辑。当年我做项目的时候就遇到过这样的情况，嵌套太多，自己都快搞不明白了，在崩溃的边缘。

methods: {
   
  $_handleInputUser(value) {
   
    this.formInline.user = value
  },
  $_handleChangeRegion(value) {
   
    this.formInline.region = value
  },
  $_handleSubmit() {
   }
},
  /**
  *将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的 3.4.0   *版本开始，我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中 (不是函数或箭头函数中) 自动注入 
  *const h = this.$createElement，这样你就可以去掉 (h) 参数了。对于更早版本的插件，如果 h 在当前作用域中不可用，应用会抛错。
 */
render(h) {
   
    return (
      <ElForm inline model={
   this.formInline} class="demo-form-inline">
        <ElFormItem label="审批人">
          <ElInput
            value={
   this.formInline.user}
            onInput={
   this.$_handleInputUser}
            placeholder="审批人"
          ></ElInput>
        </ElFormItem>
        <ElFormItem label="活动区域">
          <ElSelect
            value={
   this.formInline.region}
            onChange={
   this.$_handleChangeRegion}
            placeholder="活动区域"
          >
            <ElOption label="区域一" value="shanghai"></ElOption>
            <ElOption label="区域二" value="beijing"></ElOption>
          </ElSelect>
        </ElFormItem>
        <ElFormItem>
          <ElButton type="primarty" onClick={
   this.$_handleSubmit}>
            查询
          </ElButton>
        </ElFormItem>
      </ElForm>
    )
  }

看了上面的代码，大家其实会发现用JSX与template的语法都属于xml的写法，而且也比较像，但实质上还是有许多区别的，下面我将为大家一一分析

没有v-model怎么办，还有其他指令可以用吗？

当你选择使用JSX的时候，你就要做好和指令说拜拜的时候了，在JSX中， 你唯一可以使用的指令是v-show,除此之外，其他指令都是不可以使用的，有没有感到很慌，这就对了。不过呢，换一个角度思考,指令只是Vue在模板代码里面提供的语法糖，现在你已经可以写Js了，那些语法糖用Js都可以代替了。

v-model

v-model是Vue提供的一个语法糖，它本质上是由 value属性（默认） + input事件(默认)组成的。所以，在JSX中，我们便可以回归本质，通过传递value属性并监听input事件来实现数据的双向绑定

export default {
   
  data() {
   
    return {
   
      name: ''
    }
  },
  methods: {
   
    // 监听 onInput 事件进行赋值操作
    $_h