Vue jsx全面指南

通常开发vue我们使用的是模板语法，独有的SFC在我们开发组件的时候非常方便，将script，template，style三者在同一个文件里面实现，大大提升了组件的可以移植性。

但是模板语法写多了也非常恶心，对于复杂动态渲染场景，模板都处理的很吃力，所以vue在2.0之后也增加了对jsx的支持，为了学习jsx，顺带可以理解下react

官方文档中关于jsx的使用介绍还是太少了，一开始写起来真的很不顺手，经过一个项目的使用，我把遇到的绝大多数情况总结下，希望可以帮到大家

官方例子
这里比较详细我就不赘述了，按照官方配置，一般场景是可以覆盖的，我下面将官方例子中未说明的情况情况罗列下。

1. v-model

---

   <el-input v-model="inputValue"/> 
   
   //
   
   <el-input 
    value={this.inputValue} 
    on-input={val => this.inputValue = val}/>
    
  
   
      

2. v-for

---

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

3. 事件 & 按键修饰符

---

    <el-input
            @keyup.native.enter="fetch()"
            class="width-20"
            prefix-icon="el-icon-search"
            placeholder="关键字搜索"
          />

    //
    
    <el-input
            class="width-20"
            nativeOn-keyup={arg => arg.keyCode === 13 &&    this.fetch()}
            prefix-icon="el-icon-search"
            placeholder="关键字搜索"
          />

4. 预置参数

---

    <el-button
                @click="openDialog('create')"                
                type="primary"
                size="mini"
              >

    //
    
    <el-button
                on-click={this.openDialog.bind(this, 'create')}
                type="primary"
                size="mini"
              >

5. scopedSlots 作用域插槽敲黑板

---

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

    // 
    
    <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)}
                    >编辑
            )
        }
        }
        }}
    />

6. scopedSlots 值传递敲黑板

---

    <slot :isAdvancedPanelShow="isAdvancedPanelShow"></slot>
    
    // 
    
    {this.$scopedSlots.default({
       isAdvancedPanelShow: this.isAdvancedPanelShow
    })}

官方文档在配上以上的总结，我已经像是在写react项目了，写起来还是蛮爽的。重点还是要对各种directives了解清楚，知道其实现原理，在转成jsx应该就没啥压力的。vue和react真是越来越像了。