Binding data in web apps creates a link between the app's instance and the UI (user interface). The app's instance manages data, behavior, and components, while the UI represents the visual aspect that users interact with. Binding data allows you to create dynamic web apps.

Here, you'll explore various bindings in Vue, including one-way and two-way bindings. You will also learn to implement these bindings with mustache templates and directives such as v-bind and v-model.

Interpolation in Vue

Interpolation is one of Vue's most popular types of data binding. Interpolation allows you to display data values in your Hyper Text Markup Language (HTML) tags with the mustache template, popularly denoted with double curly braces ({{ }}).

With the mustache template, you can integrate dynamic app content like data and method properties into your HTML. You can achieve this by enclosing data or method property names from the options object in Vue within these curly braces.

Here's an instance of a Vue app utilizing the mustache template to achieve interpolation in Vue:

        <body>
    <div id="app">
      <h1>{{ title }}</h1>
      <p>{{ text.toUpperCase() }}</p>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            title: "Welcome",
            text: "This is your world?",
          };
        },
      });
      app.mount("#app");
    </script>
 </body>

The code block above uses the mustache template to display the value of the title property in the Vue app's data object. You can also display JavaScript expression results with interpolation. For example, the {{text.toUpperCase()}} expression in the p tag displays the uppercase version of the text value, as shown in the image below:

Vue-app-utilizing-the-moustache-template-to-display-text-and-title

When you mount a Vue app, Vue evaluates expressions in the templates and renders the resulting values in the HTML body. Any changes to data properties update the corresponding values in the UI.

For example:

        <script>
            const app = Vue.createApp({
              data() {
                return {
                  title: "Hello",
                  text: "This is your world?",
                };
              },
            });
            app.mount("#app");
</script>

The above code block changes the title property to “Hello”. This change will automatically reflect in the UI since the Vue app binds the title property to the UI element, as shown below:

updated-Vue-app-displaying-the-text-and-title-properties

Interpolation only outputs data when the double curly brackets are between opening and closing HTML tags.

One Way Data Binding With the v-bind Directive

Like interpolation, one-way data binding links the app's instance to the UI. The difference is that it binds properties like data and methods to HTML attributes.

One-way data binding supports the uni-directional flow of data, preventing users from making changes that affect data properties on the app's instance. This is useful when you want to display data to the app user but prevent the user from modifying it.

You can achieve one-way data binding in Vue with the v-bind directive or its shorthand character (:):

        <!-- the v-bind directive -->
<input type="text" v-bind:value="text">

<!-- the : shorthand character -->
<input type="text" :value="text">

The code block shows the usage of the v-bind directive and its shorthand to bind the value of the input HTML tag to a text data property. Here's an example of a Vue app utilizing the v-bind directive to achieve one-way data binding:

        <body>
  <div id="app">
    <input type="text" v-bind:value="text">
    <p>{{ text }}</p>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          text: 'Vue is awesome!'
        }
      }
    })

    app.mount('#app')
  </script>
</body>

Above, an input field and a paragraph element display the value of the text property. The value attribute of the input field is bound to the text property using the v-bind directive.

This code block creates a one-way binding, where changes to the text property will update the input field's value, but changes made in the input field will not update the text property in the Vue app's instance.

To show this, we can start with the initial value of the text property, “Vue is awesome!”:

Vue app utilizing the v-bind directive to depict the text value

After changing the value of the input field to “Hello World!”, notice that the Vue app was not updated, and the text in the paragraph tag remained the same:

Vue app not updated after changing content of the input field

However, when we change the value of the text property to Hello World! in the Vue app instance instead of from the input field, the input field gets updated to reflect the new value:

Vue app updated after changing the text value from the app instance

This way of binding data is handy in scenarios where you want to display data to the user but prevent the user from modifying it directly. Leveraging v-bind in Vue.js, you can establish a one-way binding, easily connecting your app's data to UI elements.

Two Way Data Binding With the v-model Directive

Two-way data binding allows changes to a UI element's value to be automatically reflected in the underlying data model and vice versa. Most front-end JavaScript frameworks like Angular utilize two-way binding to share data and handle real-time events.

Vue.js makes two-way binding possible with the v-model directive. The v-model directive creates a two-way data binding between a form input element and a data property. When you type into an input element, the value gets automatically updated in the data property, and any changes to the data property will also update the input element.

Here's an example of a Vue app that utilizes the v-model directive to achieve two-way data binding:

        <head>
  <title>Two-way data binding in Vue</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="text">
    <p>{{ text }}</p>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          text: 'Vue is awesome!'
        }
      }
    })

    app.mount('#app')
  </script>
</body>

The code block above has an input element with the v-model directive binding it to the text data property. The text property is initially set to "Vue is awesome!".

The input field updates the text property when you type into it and reflects changes to the text property in the p tag. Vue.js uses the v-model directive and the input element to achieve two-way data binding.

While v-bind allows one-directional communication from the Vue app to the UI, v-model provides bidirectional communication between the Vue app and the UI. Due to its ability to enable bidirectional communication, v-model is often used when working with form elements in Vue.

Broaden Your Expertise in Building Vue Apps

You learned about data binding in Vue, including interpolation and the v-bind and v-model directives. These data bindings are essential, as they serve as the foundation of Vue apps.

Vue has many other directives for use cases, such as list rendering, event binding, and conditional rendering. Understanding Vue directives help you build a dynamic and interactive front-end for your web applications.