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:

Template in Vue Js

Template:

Follow us