Template Syntax in Vue.js

Juhi Sinha
Last Updated: May 13, 2022

Introduction

Vue.js, like HTML, has a template syntax, and we can use it to bind the DOM to the data of the components. It's essential to understand how to insert data into template syntax and interpolate various data types.

 

In this article, we will deal with template syntax in VueJs. So, without any further ado, let's get started!

Template Syntax

Vue.js makes use of an HTML-based template syntax that allows us to bind the rendered DOM to the data of the underlying component instance declaratively. All Vue.js templates are valid HTML that browsers and HTML parsers can understand.

 

Vue compiles the templates into Virtual DOM render functions. Vue can intelligently determine the smallest number of components to re-render and the smallest amount of DOM manipulations to apply when the app state changes.

JavaScript and Vue.js

Looking at traditional JavaScript DOM manipulation techniques will make us appreciate the benefits of Vue's templates. Let us understand it with an introductory text insertion example:

 

It becomes complicated with JavaScript.

Example:

// JavaScript
const x = document.getElementById('text');
const y = document.createTextNode('Hello Ninjas');
x.appendChild(y);

 

It becomes pretty simple with Vue.

Example:

new Vue({
   template: `<div>{{text}}</div>`,
   data () {
       return {
           text: 'Hello Ninjas'
       };
   }
}).$mount('#app')

The template (view) and data (model) are separated into separate entities, but the object properties bind them together.

Interpolations

Interpolation is the concept of using double curly braces as a placeholder for data properties in a Vue template.

Text

Mustache tag is the term used for the double curly braces. Text interpolation, the most basic form of data binding, can be achieved using the "Mustache" syntax. As an example, consider the following:

HTML

<div> Name: {{name}} </div>

The value of the name property on the corresponding data object replaces the mustache tag above. This value will be updated whenever the name property of the data object changes.

We can perform one-time interpolations with the v-once directive that do not update when data changes. However, any other bindings on the same node will be affected as well:

HTML

<div v-once> Name: {{name}} </div>

 

Raw HTML

The data is never interpreted as HTML but as plain text when using the double mustache. We'll need to use the v-html directive to output actual HTML.
 

Attributes

Rather than using mustaches in HTML attributes, we can use the v-bind directive:

HTML

<div v-bind:id="dynamicId"></div>

When it comes to boolean attributes, whose existence implies true, v-bind behaves differently. Here's an example:

HTML

<button v-bind:disabled="disabled">Button</button>

The disabled attribute will not be included in the rendered <button> element if disabled is null, undefined, or false.

Directives

Directives are special attributes that begin with the letter v. When the value of a directive's expression changes, the directive's job is to apply side effects to the DOM reactively. 

<p v-if="seen">Hello Ninjas!</p>

Based on the trueness of the value of the expression seen, the v-if directive would remove or insert the <p> element.

Arguments

Some directives accept an "argument," which is indicated by a colon following the directive name. The v-bind directive, for example, is used to update an HTML attribute:

<a v-bind:href="url"> ... </a>

The argument href instructs the v-bind directive to bind the element's href attribute to the expression URL’s value.

The v-on directive is a DOM event listener:

<a v-on:click="doSomething"> ... </a>

 

Dynamic Arguments

It is possible to use a JavaScript expression in a directive argument by wrapping it with square brackets:

<a v-bind:[attributeName]="url"> ... </a>

The value of attributeName will be used as the final value for the argument after it is dynamically evaluated as a JavaScript expression. This binding will equal v-bind:href if our component instance has a data property, attributeName, with the value href.

Similarly, we can bind a handler to a dynamic event name using dynamic arguments:

<a v-on:[eventName]="doSomething"> ... </a>

 

Modifiers

Modifiers are dot-denoted special postfixes that indicate that a directive should be bound in a specific way. The .prevent modifier instructs the v-on directive to invoke event.preventDefault() on the triggered event:

<form v-on:submit.prevent="onSubmit">...</form>

 

Points to Remember

  • The v- prefix in our templates serves as a visual indicator for identifying Vue-specific attributes.

 

  • It's risky to dynamically render arbitrary HTML on our website because it can easily lead to XSS vulnerabilities. 

 

  • HTML interpolation should only be used on trusted content and never on user-provided content.

 

  • Dynamic argument expressions have some syntax constraints. Certain characters, such as quotes and spaces, are invalid inside HTML attribute names. 

FAQs

  1. Why do we use Vue js templates?
    Vue Js uses an HTML-based template syntax to declaratively bind the rendered DOM to the data of the underlying Vue instance. Vue compiles the templates into Virtual DOM render functions.
     
  2. What is interpolation?
    Interpolation is the concept of using double curly braces as a placeholder for data properties in a Vue template.
     
  3. What is the purpose of VueJS?
    VueJS is mainly used to create web interfaces and one-page apps. However, the HTML extensions and JS base that works with an Electron framework can be used to develop both desktop and mobile apps, making it a popular front-end tool.

 

Key Takeaways

In this article, we've learned about Template syntax in VueJs. 

If you are curious to learn advanced front-end web development, Coding Ninjas is here with one of the best courses available, which you can find here

 

Thank you for reading!

 

Was this article helpful ?
0 upvotes