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:

Output of vue template

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:-

Output of template vue js

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

Output of vue js template
  • 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: