Template in Vue Js
In this tutorial we will learn about how to get output in the form of html template.
Template:
- HTML-based template syntax are used by which allows us to declaratively bind the rendered DOM to the underlying Vue instance’s data.
- This templates are compiled into Virtual Dom render functions.
- Text interpolation is the most basic technique for data binding by using double curly braces
<p> {{ message }}</p>
- The value of {{ message }} will be replaced with the corresponding data, and also get updated whenever data changes.
- If we want to output real HTML we need to use v-html directive. By this VueJS get to know that it has to output the content into HTML content. And this directive is used in the HTML file.
Example :- In this example, output rendered is without the use of v-html directive.
Index.html
<html> <head> <title>Places I want to Visit</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "app"> <h1 align = center>{{ places }}</h1> <h2 align = center> One of My favourite Destination is {{ places }} </h2> <div>{{ rawhtml }}</div> </div> <script src= "vuetemplate.js"></script> </body> </html>
vuetemplate.js
app = new Vue({ el: '#app', data: { places:'Jammu & Kashmir', rawhtml : "<div><h2 align=center style=color:green>Jammu & Kashmir is Known as Paradise on Earth</h2></div>" } });
Output:

Here, you can see how the output data is. So to render data in real HTML we will use v-html directive. And we don’t need the double curly braces to show the content.
Example :-
<html> <head> <title>Places I want to Visit</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "app"> <h1 align = center>{{ places }}</h1> <h2 align = center> One of My favourite Destination is {{ places }} </h2> <div v-html = "rawhtml"></div> </div> <script src= "vuetemplate.js"></script> </body> </html>
vuetemplate.js
var app = new Vue({ el: '#app', data: { places:'Jammu & Kashmir', rawhtml : "<div><h2 align=center style=color:green>Jammu & Kashmir is Known as Paradise on Earth</h2></div>" } });
Output:-

If we inspect the browser we see the content same as defined in .js file.

- We will also use a v-bind directive for the HTML attribute.
- In directives, arguments are given by the colon after the directive name.
- Here we will see the example for the template by placing image & hyperlink.
Example :-
Index.html
<html> <head> <title>Places I want to Visit</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "app" style="text-align:center"> <h1>{{ places }}</h1> <h2> One of My favourite Destination is {{ places }} </h2> <div v-html = "rawhtml"></div> <img v-bind:src = "imgsrc" width = "500" height = "400"/> <a v-bind:href="url" style="display:block; margin:3 auto;">Jammu & Kashmir Tourism </a> </div> <script src= "vuetemplate.js"></script> </body> </html>
vuetemplate.js
var app = new Vue({ el: '#app', data: { places:'Jammu & Kashmir', rawhtml : "<div><h2 align=center style=color:green>Jammu & Kashmir is Known as Paradise on Earth</h2></div>", imgsrc : "Jammukashmir.jpg", url : "http://www.jktourism.org/" } });
Output: