The vue JXS

Render function Render function

In some scenarios where the full programming power of JS is required, rendering functions can be used, which are closer to the compiler than templates

For example, we want to generate a title with an anchor point

Parameter createElement parameter

The following are the arguments to the createElement function

// returns {VNode}
createElement(
    // {String | Object | Function}
    / / mandatory
    // An HTML tag name, component option object, or resolve an async function of any of the above
    div

    // {Object}
    / / is optional
    // a data object corresponding to the attribute in the template{}// {String | Array}
    // Subset virtual nodes (VNodes), built from createElement ()
    / / is optional
    // You can also use strings to generate 'text virtual nodes'
    [
        'Write some words first.'
        createElement('h1'.'A headline'), the createElement method (MyComponent, {props: {
                someProp: 'foobar'}})])Copy the code

Deep data object

One thing to note: Just as v-bind: class and V-bind: style are treated specially in template syntax, they also have corresponding top-level fields in VNode data objects. This object also allows you to bind normal HTML attributes, as well as DOM properties such as innerHTML (which overrides the V-HTML directive).

{
  // Same API as' v-bind:class ',
  // Takes a string, object, or 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'
  },
  // Plain HTML attribute
  attrs: {
    id: 'foo'
  },
  / / component prop
  props: {
    myProp: 'bar'
  },
  // DOM property
  domProps: {
    innerHTML: 'baz'
  },
  // The event listener is in 'on',
  // Modifiers such as' V-on :keyup.enter 'are no longer supported.
  // keyCode needs to be checked manually in the handler.
  on: {
    click: this.clickHandler
  },
  // Only for components, for listening on native events, not for internal component use
  // 'vm.$emit' triggers the event.
  nativeOn: {
    click: this.nativeClickHandler
  },
  // Custom instruction. Note that you cannot bind 'oldValue' in 'binding'
  // Assign, because Vue has automatically synchronized for you.
  directives: [{name: 'my-custom-directive'.value: '2'.expression: '1 + 1'.arg: 'foo'.modifiers: {
        bar: true}}].// The format of the scope slot is
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props= > createElement('span', props.text)
  },
  // If the component is a child of another component, 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 a render function,
  // then '$refs.myRef' becomes an array.
  refInFor: true
}
Copy the code