Vue.js Templating

Vue js templating helps you bind data properties with DOM elements. This helps you bring reactivity in your rendered HTML.

Previously we learned about v-for in vue js.

For this article, let us take the following data model in our basic Vue js application.

data() {
  return {
    text: 'Hello World',
    htmlText: '<p>Hello world</p>',
    isDisable: true
  }
}

Template interpolation

Interpolation is performing different expressions or computations in the rendering side by binding one or more variables to it.

Text interpolation in Vue js templating

The basic text interpolation is displaying the variable’s value in your HTML. This is a one-way binding from the model to the template. The most common way is to use double curly braces and it is also known as the mustache style.

<span>One way binding: {{ text }}</span>

The above will replace the {{ text }} with text property from the data model when the page is rendered.

One time binding

We can also make a one-time binding using the v-once directive. This means any change to this given property after rendering will not update in the DOM.

<span v-once>One way binding: {{ text }}</span>

The span tag will display the value of the text variable that was on the initial render time. If we change the text after render it won’t update the span element.

Raw HTML

You can also bind a string containing HTML to any DOM element by using the v-html directive. This will tell Vue to manage that data property as HTML.

<span v-html="htmlText"></span>

The text inside the htmlText variable will be evaluated as HTML and will be inserted in the span element as a child.

Vue js Templating the Attributes

We can also bind the data property variables with the attributes of different HTML elements such as the disabled by using a v-bind directive.

<button v-bind:disabled="isDisable">
  Disabled
</button>

<button :disabled="isDisable">
  Disabled
</button>

The above example uses the isDisable variable from the model and sets it to the disabled attribute of our button tag.

As you can see we can use a shorter version of binding syntax by writing :attribute=modelValue. This will have the same effect.

Javascript Expressions

Vue js templating also supports evaluation expressions inside the data bindings. Such as

<span>{{ text + ' ' + isDisable }}</span>

This will print “Hello world true”.

Vue js templating directives

Vue js provides a lot of builtin directives that allow DOM manipulation in response to data model changes.

These directives are prefixed with v- such as v-if directive that shows or hides an element based on an expression or value.

Filters

Filters are used to modify the given values of data variables and displaying them in the view.

For example, you may want to display some text in all lowers or all caps. Here, rather than modifying or duplicating that data variable, we can apply a filter that Vue provides. This will dynamically transform the value for the render.

filters: {
  allLowers: function (value) {
    if (!value) return '';
    value = value.toString();
    return value.toUpperCase();
  }
}

The allLowers function simply takes a string parameter and returns a string in all lower caps of that parameter.

In the view, we use the same filter to transform the value to lower cases as follows.

<span>{{ text | allLowers }}</span>

Here instead of “Hello World” it will display ‘hello world’ in all lower since the filter is applied to our given variable.

What’s next

Next, you can learn about computed properties here.

Imad

I am a Software Engineer with ample experience in making games, websites, mobile apps and augmented reality solutions.

Pin It on Pinterest