Contact Information

KodeBlog

We're Available 24/ 7. Drop us an email.

VueJS Data Binding

Vue uses the v-bind directive to to bind values to HTML element attributes. You cannot use the double curly brackets {{}} to interpolate values within attributes. Vue also has v-model directive to provide two-way data binding for input boxes.

Topics to be covered

We will cover the following topics in this lesson

Lesson Prerequisites

For you to successfully complete this lesson, you should have the following requirements

  • NodeJS - this is mainly needed for development purposes only. You need NPM which comes with Node to work with tools like Vue CLI
  • Web Browser - a web browser can be used as an alternative to executing JavaScript files that we will be working with.
  • Visual Studio Code - we will be using it as the code editor. It comes with a built-in terminal that will allow us to easily execute JavaScript code from within the text editor. You can also use any code editor that you prefer.
  • JavaScript Basics - this is an added advantage and not mandatory. We will explain every piece of code covered in these lessons.
  • HTML & CSS Basics - this is an added advantage. Vue works on the HTML elements to manipulate them. The styling is done using CSS so you must be familiar with the basics

Lesson Practical Examples Project Setup

This is a practical based lesson. For you to successfully work out the examples given in this lesson, you will need to setup the following directories and files

Create a new directory called vue-components

Open the directory vue-components in Visual Studio Code or your favorite code editor

Create the following files inside your project folder.

  • index.html - this is the file that will contain our application source code

The following visualizes our project setup

vue-components
-index.html

Vue v-bind Directive

In this example, we will create a simple application that lists websites. We will use the anchor element to create links to the website URLs and display the website name.

Open the file bind.html and add the following code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue v-bind Directive</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <ul>
                <li v-for="website in websites">
                    <a href="{{website.url}}">{{website.name}}</a>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            let vm  = new Vue({
                el: '#root',
                data: {
                    websites : [
                        {url: "https://www.yahoo.com", name: "Yahoo"},
                        {url: "https://www.bing.com", name: "Bing"},
                        {url: "https://www.google.com", name: "Google"}
                    ]
                }
            });
        </script>
    </body>
</html>

HERE,

  • <li v-for="website in websites"> loops through the array variable websites using the v-for directive.
  • <a href="{{website.url}}">{{website.name}}</a> uses the double curly brackets to display the values of website.url and website.name. Notice we are using the double curly brackets within the attribute href and as the display text for the anchor.
  • websites : [...] defines an array variable that contains a list of website objects.

Open the file bind.html in the web browser

You should be able to see the following results

{{image placeholder}}

Click on one of the links that have been displayed. The browser will attempt to navigate to the following URL

%7B%7Bwebsite.url%7D%7D

The above result is due to the fact that Vue is treating {{website.url}} as a literal string. Text interpolation within attributes does not work. You have to use the v-bind directive to do that.

Modify the code for displaying the links as follows

<a v-bind:href="website.url">{{website.name}}</a>

HERE,

  • v-bind:href="website.url" the directive v-bind is used to bind the value of website.url to the attribute href. Notice how we are not using the double curly brackets {{}}

Reload the file bind.html in the browser then click on any of the links. You should be able to navigate to the website.

You can also use the v-bind directive when working with classes on elements, links, image paths etc.

Vue v-model Directive

The v-model diretive provides two-way data binding on input elements. We will create a simple application with an input box that will allow the user to enter an amount in USD then we will convert it to local currency at an exchange rate of 16.

Open the file model.html then add the following code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue v-model Directive</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <input  v-model = "usd" placeholder = "Enter amount in USD" />
            <p>{{usd}} in local currency is {{local}}</p>
        </div>
        <script type="text/javascript">
            let vm  = new Vue({
                el: '#root',
                data: {
                    usd: 0
                },
                computed : {
                    local: function(){
                        return this.usd * 16;
                    }
                }
            });
        </script>
    </body>
</html>

HERE,

  • <input v-model = "usd" placeholder = "Enter amount in USD" /> defines an input textbox that uses the directive v-model to bind the data member usd to it.
  • <p>{{usd}} in local currency is {{local}}</p> displays the values of the variables usd and local
  • usd: 0 defines a data member that is initialized to 0.
  • computed : {...} defines a computed property local that returns the product of usd multuplied by 16.

Open the file model.html in the web browser

You should be able to see the following results

{{image placeholder}}

Enter a numeric value in the textbox. You should be able to see the results displayed below as you type. We didn't define an event or methods. The v-model directive provides two-way data binding so as you type, the value is automatically updated in bound variable usd.

Summary

Vue uses v-bind to interpolate values within HTML element attributes. The double curly braces {{}} do not work within HTML element attributes. Vue also has another directive v-model which is similar to v-bind but is used to provide two-way data binding within input elements.

Author: Rodrick Kazembe

Rodrick is a developer who works on Desktop, Web and Mobile Applications. He is familiar with Python, Java, JavaScript, C++, C#, Kotlin, PHP, Python and the list goes on. Rodrick enjoys sharing knowledge especially when it comes to technology.

VueJS Watched Property

VueJS Events

Leave A Reply