Vue jsx全面指南

通常开发vue我们使用的是模板语法，独有的SFC在我们开发组件的时候非常方便，将script，template，style三者在同一个文件里面实现，大大提升了组件的可以移植性。
但是模板语法写多了也非常恶心，对于复杂动态渲染场景，模板都处理的很吃力，所以vue在2.0之后也增加了对jsx的支持，为了学习jsx，顺带可以理解下react
官方文档中关于jsx的使用介绍还是太少了，一开始写起来真的很不顺手，经过一个项目的使用，我把遇到的绝大多数情况总结下，希望可以帮到大家
官方例子
这里比较详细我就不赘述了，按照官方配置，一般场景是可以覆盖的，我下面将官方例子中未说明的情况情况罗列下。

• v-model

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

• 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>
            )
        })
    }

• 事件 & 按键修饰符

    <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="关键字搜索"
          />

• 预置参数

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

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

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

• scopedSlots 值传递敲黑板

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