vue render中jsx使用記錄

JSX就是Javascript和XML結合的一種格式。React發明了JSX，利用HTML語法來建立虛擬DOM。當遇到<，JSX就當HTML解析，遇到{就當JavaScript解析.

data(){
    return {
        dataconfig:{
            btnGroup:[{
                label:"查詢"，
                type: 'search',
            },{
                label:"刪除",
                type:'del'
            }],
            form:{
                label:"名字",
                value:"",
                placeholder:""
            },
            previewDialog:false,
        }
    }
}
methods:{
    handleInput(value){
        this.from.value = value
    },
    handleSync(value){
        this.previewDialog = value
    }
}
render(h){
    return(
        div
            {
             <!------------v-for的jsx實現------------->
                this.dataconfig.btnGroup.map((item, index) =>
                  <div class="input-item">
                    <el-button
                      on-click={(ev) => this.handleClick(ev, item.type)}
                      type="primary"
                      size="small"
                    >{ typeof item.text === 'underfined' ? item.text : ""}
                    </el-button>
                 </div>
                 )
            }
            <!------------v-model的jsx實現------------->
            {
                <el-input size="small"
                placeholder={form.placeholder}
                value={form.Value}
                on-input={(value) => this.handleInput(value)} />
            }
            {
            <!------------visible.sync的jsx實現------------->
              <el-dialog title="預覽"
              visible={this.previewDialog}
              class={{ foo: true, bar: false }}
              style={{ color: 'red', fontSize: '14px' }}
              {...{ on: { 'update:visible': this.handleSync, 'close': this.closeDialog } }}
              >
                <div domPropsInnerHTML={this.previewData}></div>
              </el-dialog>
            }
            {
            <!------------
            slot-scoped的jsx實現<template slot-scoped="scope">{{scope.row}}</template>------------->
                <el-table-column 
                {   
                    ...{
                      scopedSlots: {
                        default: scope => {
                                console.log(scope)
                          }
                        }
                     }
                }
                >    
                </el-table-column>
            }
        </div>
    )
}
複製程式碼