Use template in VueJS with example

4 years ago
Zaid Bin Khalid
4,399 Views
3

In this session, we will learn how to use templates in Vue JS with the help of examples and code.

Use template in Vue JS

In previous chapters, we have already learned how to get an output in the form of text content on the display. In this session, we will learn how to get an output result in the form of an HTML template on the display screen.

Now, to understand this more easily, let us assume an example and see the output result in the browser.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div>{{htmlcontent}}</div>
      </div>
      <script type = "text/javascript" src = "js/vue_template.js"></script>
   </body>
</html>

//vue_template.js
var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

Now, let’s assume if we need to show the HTML content on the page. In the following given example, this is what we will get in the browser. Mention the below example with double curly brackets.

If we see the HTML content is displayed the same way we have given in the variable htmlcontent, this is not what we want, and if we also want it to be displayed in proper HTML content on the browser it will show as follows.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
      </div>
      <script type = "text/javascript" src = "js/vue_template.js"></script>
   </body>
</html>

Now, in the following given example, we do not need the double curly brackets. instead, we have used the following command v-html =”htmlcontent”.

Where htmlcontent is defined inside the js file as shown below.

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

The output result in the browser is displayed below.

Now, let’s have a look at the inspect element in the browser.

Now, you can see the src is blank, at the img tag above. We need to add the src to from vue js. As follow we will store the img src in the data object in the .js file

Example
<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
         <img src = "" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

Look at the img tag above, the src is blank. We need to add the src to it from vue js. Let us take a look at how to do it. We will store the img src in the data object in the .js file as follows.

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>",
      imgsrc : "images/img.jpg"
   }
})

As follow if we assign the src the output in the browser will be as shown in the following screenshot image.

We get a broken image, We need to prefix the src with v-bind:src = ”imgsrc” and the name of the variable with src.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
         <img v-bind:src = "imgsrc" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

Following is the output in the browser.