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:
Vue.component('story', { template: '<h1>My horse is amazing!</h1>' });
Now that we have registered the Component, we will make use of it. We will add the custom element <story>
inside the HTML to display the story:
<html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.mi\ n.css" rel="stylesheet"> <title...