Full-Stack Vue.js 2 and Laravel 5

Virtual DOM

Let's change tack now and discuss how Vue renders components. Take a look at this example:

Vue.component('my-component', {
  template: '<div id="my-component">My component</div>'
});

In order for Vue to be able to render this component to the page, it will first transform the template string into a JavaScript object using an internal template compiler library:

Figure 6.14. How the template compiler turns a template string into an object

Once the template has been compiled, any state or directives can easily be applied. For example, if the template includes a v-for, a simple for-loop can be used to multiply the nodes and interpolate ...