Revisiting components

As you surely remember from the previous chapters, components are special parts of the Vue application that have their own scope of data and methods. Components can be used and reused throughout the application. In the previous chapter, you learned that a component is created by using the Vue.extend({...}) method and registered using the Vue.component() syntax. So, in order to create and use a component, we would write the following JavaScript code:

//creating component 
var HelloComponent = Vue.extend({ 
  template: '<h1>Hello</h1>' 
}); 
//registering component 
Vue.component('hello-component', HelloComponent); 
 
//initializing the Vue application 
new Vue({ 
  el: '#app' 
}); 

Then, we will use hello-component inside the HTML:

<div id='app'> 
  <hello-component></hello-component> 
</div> 

Tip

Both initialization and registration can be written as a single Vue...