Vue.js 2 Design Patterns and Best Practices

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 ...