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

Templates

There is more than one way of using a template for our Component. The inline template we've used before can get "dirty" very fast.

Another way to declare a template is to create a script tag with type set to text/template and set an id of story-template. To use this template we need to reference a selector in the template option of our Component to this script:

<script type="text/template" id="story-template">
    <h1>My horse is amazing!</h1>
</script>
<script type="text/javascript">
    Vue.component('story', {
        template: "#story-template"
    });
</script> 

Note

text/template is not a script that the browser can understand and so the browser will simply ignore it. This allows you to put anything in there, which can then be extracted and generate ...

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