Skip to content

Instantly share code, notes, and snippets.

@jacobwyke
Created January 9, 2018 12:19
Show Gist options
  • Save jacobwyke/7b92928d05832b483e138e4e85f6ad94 to your computer and use it in GitHub Desktop.
Save jacobwyke/7b92928d05832b483e138e4e85f6ad94 to your computer and use it in GitHub Desktop.
Here is a basic outline of the arguments the createElement function accepts and how to use them.
createElement (
// {String | Object | Function}
// Element tag name, component options, or function
// returning one of these.
// Required.
'div',
// {Object}
// Object corresponding to the components attributes
// Optional.
{
// Class binding object/array
class: [
'foo',
{
bar: true,
baz: false
}
],
// Style binding
style: {
width: '150px'
},
// Regular HTML element attributes
attrs: {
'id': 'my-div',
'data-foo': 'bar'
},
// Component props
props: {
myProp: 'foobar'
},
//DOM props
domProps: {
//innerHTML: 'my inner text - will replace any child nodes below'
},
// Event handlers
on: {
//click: this.<method>
},
// Native event handlers
nativeOn: {
//mouseover: this.<method>
},
},
// {String | Array}
// Child Nodes
// Optional.
[
createElement('h1', 'Hello World!'),
createElement('p', 'Welcome to Vue.js'),
createElement('p',
[
'A ',
createElement(
'a',
{
attrs: {
'href': 'foo/bar.html'
}
},
'link'
),
' within a sentence.'
]
),
]
);
@jacobwyke
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment