通常開發(fā)vue我們使用的是模板語法，獨(dú)有的SFC在我們開發(fā)組件的時(shí)候非常方便，將script，template，style三者在同一個文件里面實(shí)現(xiàn)，大大提升了組件的可以移植性。

但是模板語法寫多了也非常惡心，對于復(fù)雜動態(tài)渲染場景，模板都處理的很吃力，所以vue在2.0之后也增加了對jsx的支持，為了學(xué)習(xí)jsx，順帶可以理解下react

官方文檔中關(guān)于jsx的使用介紹還是太少了，一開始寫起來真的很不順手，經(jīng)過一個項(xiàng)目的使用，我把遇到的絕大多數(shù)情況總結(jié)下，希望可以幫到大家

官方例子
這里比較詳細(xì)我就不贅述了，按照官方配置，一般場景是可以覆蓋的，我下面將官方例子中未說明的情況情況羅列下。

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="關(guān)鍵字搜索"
          />

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

4. 預(yù)置參數(shù)

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

官方文檔在配上以上的總結(jié)，我已經(jīng)像是在寫react項(xiàng)目了，寫起來還是蠻爽的。重點(diǎn)還是要對各種directives了解清楚，知道其實(shí)現(xiàn)原理，在轉(zhuǎn)成jsx應(yīng)該就沒啥壓力的。vue和react真是越來越像了。