Rendering elements

We can replace our App.vue component with the following object that takes a render object and hyperscript instead of using template:

<script>
export default {
 render(h) {
  return h('h1', 'Hello render!')
 }
}
</script>

This then renders a new h1 tag with the text node of 'Hello render!' and this is then known as a VNode (Virtual Node) and the plural VNodes (Virtual DOM Nodes), which describes the entire tree. Let's now look at how we can display a list of items inside of a ul:

  render(h){
    h('ul', [
      h('li', 'Evan You'),
      h('li', 'Edd Yerburgh'),
      h('li', 'Paul Halliday')
    ])
 }

It's important to realize that we can only render one root node with hyperscript. This restriction is the same for our template, so it's expected that we wrap our items inside of a div like so:

render(h) {
 return h('div', [
  h('ul', [
   h('li', 'Evan You'),
   h('li', 'Edd Yerburgh'),
   h('li', 'Paul Halliday')
  ])
 ])
}