What is VeuJs Template | Getting started with VeuJs Template
Template in Vue Js
Vue.js utilizes an HTML-based template syntax structure that permits you to definitively tie the rendered DOM to the hidden Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-consistent browsers and HTML parsers.
In the engine, Vue compiles the templates into Virtual DOM render functions. Joined with the reactivity system, Vue can brilliantly make sense of the minimal number of components to re-render and apply the minimal amount of DOM controls when the application state changes.
We will learn how to get an output in the form of an HTML template on the screen.
To understand this, let us 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 : "Ethan",
lastname : "Hunt",
htmlcontent : "<div><h1>Vue Js Template</h1></div>"
}
})Now, assume that we want to show the HTML content on the page. If we happen to use it with interpolation, i.e. with double curly brackets, this is what we will get in the browser.
If we see the HTML content is shown a similar way we have given in the variable htmlcontent, this isn't what we want, we want it to be shown in an appropriate HTML content on the browser.
For this, we will have to utilize v-html order. The second we assign v-html directive to the html component, VueJS realizes that it needs to output it as HTML content.
Let’s include v-html directive in the .html record 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 brackets to show the HTML content, instead, we have used v-html = ”htmlcontent” where htmlcontent is defined inside the js file as follows:–
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ethan",
lastname : "Hunt",
htmlcontent : "<div><h1>Vue Js Template</h1></div>"
}
})The output in the browser is as follows:–
If we inspect the browser, we will see the content is added in the same way as it is defined in the .js file to the variable htmlcontent : "<div><h1>Vue Js Template</h1></div>".
Let’s have a look at the inspect element in the browser:
We have perceived how to add an HTML template to the DOM. Presently, we will see how to add attributes to the existing HTML elements.
Consider, we have an image tag in the HTML file and we want to allocate src, which is a part of Vue.
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>Have a look at the img tag above, the src is blank. We need to add the src to it from vue js. Let’s 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 : "Ethan",
lastname : "Hunt",
htmlcontent : "<div><h1>Vue Js Template</h1></div>",
imgsrc : "images/img.jpg"
}
})If we assign the src as follows, the output in the browser will be as shown in the following screenshot.
<img src = "{{imgsrc}}" width = "300" height = "250" />Output in the browser:
We get a broken image in the result. To assign any attribute to the HMTL tag, we have to use a v-bind directive.
This is how it is assigned in the .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 with v-bind:src = ”imgsrc” and the name of the variable with src.
Following is the output:
Let us inspect and check how the src looks like with v-bind.
As seen in the above screenshot, the src is assigned without any VueJs properties to it.
