Vue.js TemplateVue.js framework uses an HTML-based template that permits us to bind the declared DOM in the fundamental Vue instance data. All the Vue.js templates are valid for HTML files that can be praised by HTML parsers and creative browsers. Under the hood, Vue.js compiles the templates for Virtual DOM rendering objects. The combination with the reactivity method, Vue.js is capable of calculating the minimum number of components needed to re-rendering and applying the minimum amount of DOM manipulations when the app changes the situation. If you are familiar with Virtual DOM concepts and prefer JavaScript row power, rendering functions can also be written directly with optional JSX support instead of templates.

Example: This example explains how we can use the Vue template in the HTML file of the Vue.js application.

Index.html

Main.js

Output: After executing this code, we will get output, as shown below:

Vue.js Template

As you seen above, the html content is showing the same output which have been given in the variable htmlcontent but it’s not an actual output which you expected.

For this, it is required to use the v-html directive inside the div tag. When you assign the v-html directive to the .Vue file instead of {{htmlcontent}}, then you will get an actual output according to your expectations.

Index.html

Main.js

Output: After executing this code, we will get output, as shown below:

Vue.js Template

We can also see this change in the console element, as shown below:

Vue.js Template

We can also use the img src tag to set the image in the Vue.js file, and also use the v-bind directive with img src tag for displaying the image, as shown below:

Index.html

Main.js

Output: After executing this code, we will get output, as shown below:

Vue.js Template

Pin It on Pinterest

Share This