Vue.js Template Introduction

Vue.js, which is used to build user interfaces (UIs) and single-page applications (SPAs), combines many of the best features of the JavaScript frameworks Angular and React, and many developers like to use Vue.js because it provides a neutral environment.

Like HTML, Vue.js has a template syntax, and we can use template syntax to bind the DOM with the components data. In this article, we will show you how to insert data into the template syntax and the ways to interpolate different types of data.

Text Interpolation

If we want to bind a variable from the relative component instance, we can use double curly braces, which is also referred to as “mustache” syntax.

<p> {{ linuxhintText }} </p>

Vue.js offers two-way binding, which means that, whenever the value of a variable is changed, the element will be rendered again. However, if we do not want it to be updated, we can use the v-once directive.

<p v-once> {{ linuxhintText }} </p>

Raw HTML Interpolation

Vue.js does not allow for the data binding of plain text, but we can bind raw HTML text using the v-html directive. In the example below, we have a variable in a component called rawHTML that contains some raw HTML text.

data() {

  return {

    msg: "Hello Vue",

    rawHTML: "<p> Linuxhint is <b>Great</b> </p>"

  }

}

We can bind the rawHTML variable using v-html directive as follows.

<template>

  <h1>{{ msg }}</h1>

  <div v-html="rawHTML"></div>

</template>

The div tag will have a p tag inside it.

Attributes Interpolation

In the raw HTML interpolation, we did not use double curly braces to bind the variable. Therefore, if we want to bind a variable inside the HTML attribute, we can use the v-bind directive.

<div v-bind:class="container"></div>

Expressions

Vue.js does not only provide features for binding a variable. Vue.js can be used to write various types of expressions within double curly braces.

{{ count + 1 }}

{{ check ? "true" : "False" }}

{{ arr.sort().reverse() }}

Wrapping Up

In this article, we introduced Vue.js’s simple yet useful template syntax. However, there is a lot more to learn about Vue.js. You can visit the official website of Vue.js here, and you can keep learning about JavaScript with linuxhint.com.

from Linux Hint https://ift.tt/3f3pYyX