Created
January 9, 2018 12:19
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.' | |
] | |
), | |
] | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Output can be seen at: https://gist.github.com/jacobwyke/d14a2dfe4c6aa02f23d75ceac22f2530