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 HTML snippets.
My favorite way to define a template (and the one I am going to use in the examples of this book) is to create a template
HTML tag and give...