We now have a youtube channel. Subscribe!

Vue.js | Template

Vue.js | Template


Hello folks! welcome back to a new edition of our Vue.js tutorial. In this tutorial, we will be studying about Vue.js Template.

We've studied in our earlier tutorials, how to get an output in the form of text content on the screen. In this tutorial guide, we'll study about how to get an output in the form of a HTML template on the screen.

In order to understand this, let's consider an example and see the output 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 : "Kennedy",
      lastname  : "Nkpara",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

Now, assuming we want to show the HTML content on the page. If we happen to use it with interpolation, that is with double curly brackets, this is what we get in the browser.



From the above result, you will see that the html content is displayed the same way we have given in the variable htmlcontent, this isn't what we want, we want it to be shown in a proper HTML content on the browser.

For this, we have to make use of the v-html directive. Immediately we assign the v-html directive to the html element, Vue.js knows it has to output it as a HTML content. Let's add v-html directive in the .html file and see the difference.

<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, we don't need the double curly bracket to show the HTML content, instead we have made use of v - html = "htmlcontent" where "htmlcontent" is defined inside the js file as follows -

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

Output

Following below is the output of the above example -


If we inspect the web browser, we'll see that the content is added in the same manner as it is defined in the .js file.

Let us take a look at the inspect element in the browser -


We've seen how to include HTML templates to the DOM. Now, we will see how to include attributes to the existing HTML elements.

Consider, we've an image tag in the HTML file and we want to assign src, which is a part of Vue.

Example

Below is a simple 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 image 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 : "Kennedy",
      lastname  : "Nkpara",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>",
      imgsrc : "images/img.jpg"
   }
})

If we assign the src as follows, the output in the web browser is going to be as shown in the following screenshot.

<img src = "{{imgsrc}}" width = "300" height = "250" />



We got an image that is broken. To assign any attribute to HTML tag, we need to make use of v-bind directive. Let us add the src to the image using v-bind directive.

This is how it is assigned in .html file -

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

We need to prefix the src using v-bind:src = "imgsrc" and the name of the variable using src.

Output

Following is the the output in the browser -


Let us inspect and check how the src looks like with v-bind directive.


As seen in the above screenshot, the src is assigned without any Vue.js properties to it.


Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about Vue.js Components.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2022 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain