Vue.js 2 Web Development Projects

Dynamic templates

The main advantages of writing render functions directly are that they are closer to compiler and you have the full power of JavaScript available to manipulate the template. The obvious drawback is that it doesn't look like HTML anymore, but this can be alleviated by JSX as we will see in the What is JSX section.

For example, you could create a component that renders a title at any level we want:

Vue.component('my-title', {  props: ['level'],  render (h) {    return h(      // Tag name      `h${this.level}`,      // Default slot content      this.$slots.default,    )  }})

Here we skipped the data object argument since it is optional. We only passed the tag name and the content.

And then, for example, we would use it in our template to render an <h2> ...