Vue's Render function

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline -->
</div>

<h1>{{ blogTitle }}</h1>

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

return createElement('h1', this.blogTitle)

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // An HTML tag name, component options object, or // an async function that resolves to any of the above. Required field.
  'div',

  // {Object}
  // A data object corresponding to the attribute in the template. Optional.
  {
    // (see next section for details)
  },

  // {String | Array}
  // Child virtual nodes (VNodes), constructed by `createElement()`,
  // You can also use strings to generate "text virtual nodes". Optional.
  [
    'Write some text first',
    createElement('h1', 'A headline'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

{
  // Same API as `v-bind:class`,
  // Accepts a string, object, or an array of strings and objects 'class': {
    foo: true,
    bar: false
  },
  // Same API as `v-bind:style`,
  // Accepts a string, object, or array of objects style: {
    color: 'red',
    fontSize: '14px'
  },
  // Normal HTML attribute
  attrs: {
    id: 'foo'
  },
  // Component prop
  props: {
    myProp: 'bar'
  },
  // DOM properties
  domProps: {
    innerHTML: 'baz'
  },
  // Event listener is inside `on`,
  // But modifiers like `v-on:keyup.enter` are no longer supported.
  // Need to manually check keyCode in the processing function.
  on: {
    click: this.clickHandler
  },
  // Only used for components to listen to native events, not events triggered by // `vm.$emit` inside components.
  nativeOn: {
    click: this.nativeClickHandler
  },
  // Custom directives. Note that you cannot use `oldValue` in `binding`
  // Assignment, because Vue has automatically synchronized it for you.
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers:
        bar: true
      }
    }
  ],
  // The format of a scoped slot is // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // If the component is a subcomponent of another component, you need to specify a name for the slot slot: 'name-of-slot',
  // Other special top-level properties
  key: 'myKey',
  ref: 'myRef',
  // If you apply the same ref name to multiple elements in the rendering function,
  // Then `$refs.myRef` will become an array.
  refInFor: true
}

render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    // Error - Duplicate VNode
    myParagraphVNode, myParagraphVNode
  ])
}

render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

props: ['items'],
render: function (createElement) {
  if (this.items.length) {
    return createElement('ul', this.items.map(function (item) {
      return createElement('li', item.name)
    }))
  } else {
    return createElement('p', 'No items found.')
  }
}

props: ['value'],
render: function (createElement) {
  var self = this
  return createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function (event) {
        self.$emit('input', event.target.value)
      }
    }
  })
}

on: {
  '!click': this.doThisInCapturingMode,
  '~keyup': this.doThisOnce,
  '~!mouseover': this.doThisOnceInCapturingMode
}

on: {
  keyup: function (event) {
    // If the element that triggers the event is not the element to which the event is bound // then return if (event.target !== event.currentTarget) return
    // If the enter key was not pressed or // the shift key was not pressed at the same time // then return if (!event.shiftKey || event.keyCode !== 13) return
    // Stop event bubbling event.stopPropagation()
    // Prevent the element's default keyup event event.preventDefault()
    // ...
  }
}

render: function (createElement) {
  // `<div><slot></slot></div>`
  return createElement('div', this.$slots.default)
}

props: ['message'],
render: function (createElement) {
  // `<div><slot :text="message"></slot></div>`
  return createElement('div', [
    this.$scopedSlots.default({
      text: this.message
    })
  ])
}

render: function (createElement) {
  // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
  return createElement('div', [
    createElement('child', {
      // Pass `scopedSlots` in the data object
      // The format is { name: props => VNode | Array<VNode> }
      scopedSlots: {
        default: function (props) {
          return createElement('span', props.text)
        }
      }
    })
  ])
}

import { CreateElement, RenderContext } from 'vue/types/umd'

export default {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h: CreateElement, ctx: RenderContext) => {
    const params: any = {
      row: ctx.props.row,
      index: ctx.props.index
    }
    if (ctx.props.column) params.column = ctx.props.column
    return ctx.props.render(h, params)
  }
}