vue render

內容來自於vue官方文檔

/**
 * @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'
            }
        })
    ]
)