Vue.js 2 Web Development Projects

Data objects

The second optional argument is the data object, which allows you to pass additional information about the element to createElement (or h). For example, you can specify CSS classes in the same way we use the v-bind:class directive in our classic templates, or we can add event listeners.

Here is an example of a data object that covers most features:

{  // Same API as `v-bind:class`  'class': {    foo: true,    bar: false  },  // Same API as `v-bind:style`  style: {    color: 'red',    fontSize: '14px'  },  // Normal HTML attributes  attrs: {    id: 'foo'  },  // Component props  props: {    myProp: 'bar'  },  // DOM properties  domProps: {    innerHTML: 'baz'  },  // Event handlers are nested under "on", though  // modifiers such as in v-on:keyup.enter are not // ...