Home » VueJS Tutorial

VueJS – Template Syntax (Binding with Text)

Learn about the template syntax (binding with text)?
Submitted by Venkatesan C, on March 05, 2022

Template Syntax

• Vue uses an HTML-based template syntax that allows you to bind the rendered DOM to the underlying component instance's data (controlled by javascript code) declaratively.
• Under the hood, Vue compiles the templates into highly-optimized JavaScript code that can be understood by the browser.
• With the help of a reactivity system, Vue can figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

Text Interpolation

Text interpolation is the way to bind the data that's been declared in the script tag into the template tag. Text interpolation is the most basic form of data binding.

There are two ways to bind data into a template tag. They are using,

• Mustache syntax {{}} ( double curly braces )
• v-text directive

Mustache Syntax

With the help of Mustache syntax {{}}, you enclose the data which you want to bind to the UI. Then the data gets interpolated and displayed.

<h1>Hello {{ appname }}</h1>

The mustache tag will be replaced with the value of the appname property from the corresponding component instance. It will also be updated whenever the appname property changes.

v-text Directive

• A directive is a special HTML attribute that helps us to bind data to a template, the data can be a simple text, style, class information etc.
• All the directives in Vue have a prefix of v-.
• Here since we want to bind a simple text to the UI, the directive is v-text.

<h1 v-text="vdirName"></h1>

The value of vdirName is placed inside the h1. If there are any texts present already between the h1 tags, Vue throws an error, since the v-text directive bound tag cannot have an inner text.

Let's look at an example by creating a Vue project created by Vite. Let's name it second-app ( in fact this is the same project that's been created in the installation article).

Here's the project structure:

Now delete everything inside the App.vue file and paste the below code. The below is simpler to understand the text interpolation.

App.vue

<template>
  <h1>Hello {{ name }}</h1>
  <h1>{{name}}</h1>
  <h1 v-text="vdirName"></h1>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      appname: "includehelp",
      vdirName: "Hello this is vdirName"
    };
  },
};
</script>

Here we only care about template and script tag, let's ignore style for this article.

Notice the following points,

• In the script tag, we have default export of an object which has a property called the name of value "App" which is the name of the component and function called data.
• When you use the component in other components, you have to use this name.
• The data function returns an object which is actually the data that you want the component to hold.
• You declare the local component data which has to be rendered in the UI, in the data function's returning object.

<h1>Hello {{ appname }}</h1>
<h1>{{appname}}</h1>

• The first line has a static text "Hello" as well as the dynamic data appname in the same <h1> tag.
• Mustache syntax allows you to include data within a tag which can have a static text also.
• You can even have multiple dynamic data within the same tag also. In this way, mustache syntax is flexible.

<h1 v-text="vdirName"></h1>

Now the above makes use of the v-text directive to bind the data to the template. Now in this <h1> tag the inner text will be the value of vdirName.

Let's look at the output:

Note:

If you have any inner text that you bind to a v-text binded tag, the linter throws an error.

Let's say I have a <h1> like below:

<h1 v-text="vdirName">This throws an error</h1>

This throws an error by the linter saying "v-text will override element children".

With this we came to the end of this article. Hope you had a great reading.

---