O'Reilly logo

The Majesty of Vue.js by Kostas Maniatis, Alex Kyriakidis

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Properties

Lets see now how we can use multiple instances of our story Component to display a list of stories. We have to update the template to not display always the same story, but the plot of any story we want:

<template id="story-template">
    <h1>{{ plot }}</h1>
</template> 

We also have to update our Component to use this property. To do so we will add the new property, 'plot', to the props attribute of the Component:

Vue.component('story', {
    props: ['plot'],
    template: "#story-template"
}); 

Now we can pass plot and a plain string to it, every time we use the <story> element:

<body> <div class="container"> <story plot="My horse is amazing."></story> <story plot="Narwhals invented Shish Kebab."></story> <story plot="The dark side of the Force is ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required