Updated April 19, 2023
Introduction to Vue.js Template
In this article, we are defining templates in Vue.js which is a plain language containing various components where a user can interact with, and in this, we are seeing one such basic component which uses HTML based template for getting output on the screen in HTML based template. This Vue.js template is generally defined to bind the renderer DOM (document object model) which is a javascript (js) object and is considered as a Vue instance and such templates can be parsed by the HTML parsers, spec-compliant browser, etc. In simple words templates in Vue.js can be a media to connect the data to the document object model with rendering functions.
Working of Vue.js Template with an Example
In this article, we are seeing templates that are used in Vue.js to make it better user interaction which is HTML based templates. These templates are compiled into DOM render functions by using Vue. Therefore templates are used to bind the data to the DOM.
In general, inside a Vue component a template can be declared which an explicit declaration and this is done as follows:
Code:
Vue({
template: '<span> Educba </span>
})So there are many ways to define or declare a template in the Vue.js component. Let us see regarding the declaration or various ways of defining templates. In this article, as vue is used in creation for apps so we cannot show the output for each code written in js and templates designing.
Note that this article has no clear outputs but it will be clearly shown to where in which file what code should be written.
A template is a component in vue which is an HTML file or js file. So to access js file through HTML code we have to define templates in the Vue component. So to display the text content as output using a template we have to use interpolation which is the basis for data binding and this is done using double curly braces ({{ }}), below is a sample of code showing the demonstration of interpolations where HTML contents are displayed directly when we are using curly braces or interpolation text.
First, we will write an HTML file and save it as a filename with .html extensions.
HTML Code:
<html>
<head>
<script type = "text/javascript" src = "js/vue.js"> </script>
</head>
<body>
<div id = "vue_js_tem">
<h1> Institute_name: {{name}} </h1>
<div> {{content_in_html}} </div>
</div>
<script type = "text/javascript" src = "vue_template.js"></script>
</body>
</html>Vue JavaScript Code:
var vt = new Vue({
el : '#vue_js_tem',
data: {
name: "Educba",
content_in_html: "<html> <h1> Vue.js Template demonstration </h1> </html>"
}
})Where for the above programs we would get an output on the browser which will not only display the Institute name but it will also display the Html content that is written in the data part of the Vue.js script as it is on the browser.
A sample output idea of how it will be displayed is as follows:
In the browser:
Code:
Institute_name: Educba
<html> <h1> Vue.js Template demonstration </h1> </html>So this would look like a mess and confusing for the user so to remove the Html content from displaying it on the browser we need to use v-html and the above code would be modified in the <div> section as we define id in the div section that is.
Code:
<div v-html = "content_in_html"> </div>So we would get the output as below:
Institute_name: Educba
Vue.js Template Demonstration
So similarly as we saw in the above codes how we can add v-html directive to display HTML contents, in the same way, we can display few attributes using another directive called v-bind which an Html content declared using with text interpolation we would not be able to display the Html contents using double curly braces, but instead, we can use directive such as v-html, v-bind, etc because we cannot declare double curly braces in the Html, therefore, we use v-html and v-bind. So in the section, we will see how to use v-bind in the sample code below:
Instead of using id in <div> tag, we can directly use it using v-bind.
<div v-bind: id= "vue_js_tem"> </div>This v-bind directive can also take a few parameters such as this v-bind parameter might take value to the v-bind attribute.
In this article, we have seen writing an HTML file we have defined templates in a script tag which will help to declare the type of the template such as text or javascript and these files can be also referenced in the same script tag using “src” argument. So in Vue.js Html templates are valid along with this HTML it also provides interpolation and directives as we saw in the above example when we used text interpolation using double curly braces and directives such as v-html, v-bind, etc.
There are many different ways of defining templates in vue such as defining templates using plain string by using regular string assignment, template literals by using special string or symbols, inline templates by defining the templates within the master or parent template, JSX which is like an extension to the templates which will give special syntax for defining templates, render functions when defining templates in complete javascript, x-template can be used to define template using HTML tags, etc.
Conclusion
In this article, we conclude that Vue.js is a framework for designing apps for user interface where it contains components, and in this, we will define templates and in this article, we saw how to define templates using HTML and we also saw how to use directives and interpolation. In this, we also saw different ways to define various ways to define templates.
Recommended Articles
This is a guide to Vue.js Template. Here we discuss the introduction, examples, and Vue.js template demonstration respectively. You may also have a look at the following articles to learn more –
