vuejs

6. Components
6.1 What are Components?
Components are one of the most powerful features of Vue.js. They help you extend basic HTML
elements to encapsulate reusable code. At a high level, Components are custom elements that Vue.js’
compiler would attach specified behavior to. In some cases, they may also appear as a native HTML
element extended with the special is attribute.
It is a really clever and powerful way to extend HTML to do new things. In this chapter we are going
to start out with an extremely simple example and next we are going to see how Components can
help us improve the code we have created, in some of the previous chapters.
6.2 Using Components
We are going to start with a simple Component. In order to use a component we have to register it
first.
One way to register a component is to use the Vue.component method and pass in the tag and the
constructor. Think of the tag as the name of the Component and the constructor as the options.
In our occasion, we’ll name the Component story and we’ll define the property story (again). The
option template (how we would like our story to be displayed), is inside the constructor where
other options will be added as well.
Our story component will be registered like this
1 Vue.component('story', {
2 template: 'My horse is amazing!'
3 });
Now that we have registered the component we will make use of it. We will add the custom element
inside the HTML to display the story.
63