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- 340px;
        .renderColor {
            height: 100px;
             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 {
             160px;
            height: 90px;
            background: #fff;
            display: inline-block;
            color: #fff;
           
        }
    }
</style>