5. Data binding Part 1 (Text, raw HTML, JavaScript expressions)

I am so excited today as we are going to discuss some of the most interesting data binding techniques in Vue.js. It is necessary to understand that we are provided with more than one way to bind the DOM with the underlying Vue instance’s data object.

Text interpolation

Remember mustache/template syntax {{ }} that we discussed in one of our previous articles? That is a basic form of data binding known as “Text Interpolation”. One-time interpolation can be performed using the directive, v-once, where the initial value of the property is rendered though it is updated later on. Click here for a detailed explanation on v-once along with code samples and screenshots.

Raw HTML interpolation

By default, Vue always treats the data within the template syntax as plain text. And most of the times this is exactly what we want. But, coding is all about unexpected twists in the journey. What if one day we want to pass raw HTML and render it accordingly in the DOM? For sure you can’t use those double curly braces because if you do, this is what you will get.

Not so surprising is it? The entire HTML code is rendered as plain text. This is how template syntax works and this behavior prevents any third parties injecting unwanted code into your website (how scary?!). Hence never use this on user-provided content, on which you will have no control. So, if you really trust the source that provides the HTML code as safe and wish to render it to the DOM, use another directive, v-html.

v-html

Using v-html directive will replace the contents of the <span> tag with the value of the vueLink data property and interprets it as plain HTML. Thus, the hyperlink is displayed in green color as specified.

Using JavaScript expressions

The double curly braces, along with displaying plain text, can also evaluate a single JavaScript expression.

Remember, only a single expression. Not a statement, not a flow control, not any user defined globals! Let us see some examples,

The value of ‘message’ property can be accessed within the template syntax as always. Now we can apply any of the available JavaScript String methods to it.

{{ message.length }}

js provides access to a couple of global objects viz., Math and Date within the template expressions. Careful, no access to user-defined globals are permitted.

{{ Math.PI }}
{{ new Date() }}

Flow control statements such as if-else, for, while, do-while etc. won’t work and hence the only option left is to use ternary expressions. It is always advisable to put complex logic in methods which we will be discussing in detail in our upcoming articles.

{{ message === "Hi everyone!" ? "Welcome to the World of Vue" : "Hola" }}

Also, as iterated earlier, only a single expression can be used within the template syntax. Even a simple expression won’t work such as, `let rank = 1`.

The complete code is as below,

Index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
    <!-- including Vue with development version CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- text interpolations -->
      <h1>{{ message }}</h1>
      <p>For more info. on Vue, click {{ vueLink }}</p>
      <!-- raw HTML interpolation -->
      <p>With v-html directive:</br>
        For more info. on Vue, click <span v-html="vueLink"></span>
      </p>
      <!-- JavaScript expressions -->
      <p>
        Length of the 'message' String: {{ message.length }} </br>
        Value of PI: {{ Math.PI }} </br>
        Today's date is: {{ new Date() }} </br>
        Result of ternary expression is:
          {{ message === "Hi everyone!" ? "Welcome to the World of Vue" : "Hola" }} </br>
      </p>
    </div>
    <!-- including index.js file -->
    <script src="index.js"></script>
  </body>
</html>

Index.js

var app = new Vue({
  el: "#app",
  data: {
    message: "Hi everyone!",
    vueLink: "<a href='https://vuejs.org/' style='color:green'>here</a>"
  }
});

The output is as follows,

All the code discussed above is available in the GitHub repo

Before I take my leave, let me give a small task to your brain. We cannot use this template/mustache syntax inside HTML attributes. Can you think of any alternatives? I am sure you can!

Have a nice day ?