Vue.js: Up and Running

Chapter 4. Render Functions and JSX

You’ve already seen how to use the template attribute to set the HTML of a component, and you’ve also seen how to use vue-loader to write your component HTML in a <template> tag. However, using templates isn’t the only way to indicate what Vue should display on the page: you can choose to use a render function instead. This also enables you to write JSX in your Vue application, which if you’re from a React background, you may be more comfortable with (although I still recommend giving templates a try!).

Note

You can also use the template attribute in your main Vue instance instead of having Vue use the HTML in your Vue element. It’ll be automatically added to the element you specify as the Vue element.

When you pass a function to the render property of your Vue instance, the function is passed a createElement function, which you can use to indicate the HTML that should be output to the page. As a simple example, the following renders <h1>Hello world!</h1> to the page:

new Vue({
  el: '#app',
  render(createElement) {
    return createElement('h1', 'Hello world!');
  }
});

createElement takes three arguments: the tag name of the element to be generated, an object containing options (such as HTML attributes, properties, event listeners, and class and style bindings), and either a child node or an array of child nodes. The tag name is required, and the other two are optional (and if you don’t specify the attributes object, you can specify the children as ...