createElement函數的語法及其簡單使用

createElement函數語法如下：

// @returns {VNode}
createElement(
    // {String | Object | Function}
    // 一個 HTML 標簽名、組件選項對象，或者
    // resolve 了上述任何一種的一個 async 函數。必填項。
    'div',
    // {Object}
    // 一個與模板中屬性對應的數據對象。可選。
    {
        // 與 `v-bind:class` 的 API 相同，
        // 接受一個字符串、對象或字符串和對象組成的數組
        'class': {
          foo: true,
          bar: false
        },
        // 與 `v-bind:style` 的 API 相同，
        // 接受一個字符串、對象，或對象組成的數組
        style: {
          color: 'red',
          fontSize: '14px'
        },
        // 普通的 HTML 特性
        attrs: {
          id: 'foo'
        },
        // 組件 prop
        props: {
          myProp: 'bar'
        },
        // DOM 屬性
        domProps: {
          innerHTML: 'baz'
        },
        // 事件監聽器在 `on` 屬性內，
        // 但不再支持如 `v-on:keyup.enter` 這樣的修飾器。
        // 需要在處理函數中手動檢查 keyCode。
        on: {
          click: this.clickHandler
        },
        // 僅用於組件，用於監聽原生事件，而不是組件內部使用
        // `vm.$emit` 觸發的事件。
        nativeOn: {
          click: this.nativeClickHandler
        },
        // 自定義指令。注意，你無法對 `binding` 中的 `oldValue`
        // 賦值，因為 Vue 已經自動為你進行了同步。
        directives: [
          {
            name: 'my-custom-directive',
            value: '2',
            expression: '1 + 1',
            arg: 'foo',
            modifiers: {
              bar: true
            }
          }
        ],
        // 作用域插槽的格式為
        // { name: props => VNode | Array<VNode> }
        scopedSlots: {
          default: props => createElement('span', props.text)
        },
        // 如果組件是其它組件的子組件，需為插槽指定名稱
        slot: 'name-of-slot',
        // 其它特殊頂層屬性
        key: 'myKey',
        ref: 'myRef',
        // 如果你在渲染函數中給多個元素都應用了相同的 ref 名，
        // 那么 `$refs.myRef` 會變成一個數組。
        refInFor: true
      },
    // {String | Array}
    // 子級虛擬節點 (VNodes)，由 `createElement()` 構建而成，
    // 也可以使用字符串來生成“文本虛擬節點”。可選。
    [
      '先寫一些文字',
      createElement('h1', '一則頭條'),
      createElement(MyComponent, {
        props: {
          someProp: 'foobar'
        }
      })
    ]
  )

 

以下樣式卡片，是使用render渲染函數實現的功能。 

 

 功能比較簡單，主要是用於記錄渲染函數的使用方法

<template>
    <div class="systemColor">
        <div style="display:flex;">
            <color-card background="#002877" color="#fff">
            #002877
            <div slot="text">主色</div>
            <div slot="subText">用於導航、左側二級菜單</div>
        </color-card>
            <color-card background="#3677F0" color="#fff">
                #3677F0
                <div slot="text">重點強調</div>
                <div slot="subText">用於二級菜單選中</div>
            </color-card>
            <color-card background="#3b6cd8" color="#fff">
                #3b6cd8
                <div slot="text">常用輔助色</div>
                <div slot="subText">用於按鈕、標簽切換選中項、翻頁選中項的藍色字體</div>
            </color-card>
        </div>
    </div>
</template>
<script>
let colorCard = {
    render: function (createElement) {
        return createElement('div',{
            class:{renderCls: true},
            on: {
                click: () => alert(this.background)
            },
        },[
            createElement('span',{
                class: {
                    renderColor: true
                },
                style: {                    
                    background: this.background,
                    color: this.color
                },
            },
            [
                createElement('div',{
                    class:{renderColor: true}
                }, [
                    createElement('span',{
                        style:{fontSize: '16px',color: '#FFFFFF'}
                    },this.$slots.default)
                ]),
            ]),
            createElement('div',{
                class:{
                    renderSubTxt: true
                },
            },[
                this.$slots.text,
                this.$slots.subText
            ]),
        ])
    },
    props: {
        background:{
            type: String,
            default:'#fff',
        },
        color:{
            type: String,
            default:'#111',
        }
    }
} 

export default {
    name:'systemColor',
    components: {
        'color-card': colorCard
    },
    data(){
        return{}
    },
    methods: {
        clickFun(){
            alert(1)
        }
    }
}
</script>
<style lang="less" scoped>
    /deep/.renderCls{
        display: flex;
        margin: 20px 10px;
        min-width: 340px;
        .renderColor {
            height: 100px;
            width: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction:column
        }
        .renderSubTxt {
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: left;
            flex-direction:column;
            padding: 10px;
        }
    }
    .systemColor {
        .title {
            font-size: 22px;
            color: #393A3C;
            letter-spacing: 1.22px;
            margin-right: 20px;
        }
        .label {
            font-size: 16px;
            color: #898A8E;
            letter-spacing: 0.89px;
        }
        .color {
            width: 160px;
            height: 90px;
            background: #fff;
            display: inline-block;
            color: #fff;
           
        }
    }
</style>