Attribute Binding with v-bind in Vue.js

Vue.js offers two types of binding, one-way and two-way. In this tutorial we will see one-way binding, which is done with the v-bind directive.

Binding is a concept existing in many frameworks and technologies, which allows us to keep the value of two variables synchronized.

In Vue.js, binding will allow us to connect JavaScript data with HTML. That is, it allows us to use logic variables in the HTML.

Combined with reactivity, binding allows us to create dynamic applications where changes in data are automatically reflected in the view.

v-bind Directive

In Vue.js, v-bind is the directive that allows us to perform one-way binding, which allows us to dynamically link HTML attributes or component properties with data from the Vue instance.

That is, we can make any HTML attribute (like src, href, class, or style) depend on a variable or reactive expression.

The syntax of the directive is to put v-bind, followed by a colon : and the name of the attribute we want to bind (v-bind, v-bind…).

For example, like this

<template>
  <img v-bind:src="imageUrl" alt="Dynamic image">
</template>

<script setup>
import { ref } from 'vue';

const imageUrl = ref('https://inventedimages.com/luisllamas.jpg');
</script>

Simplified Alias

Attribute binding is so frequent that Vue provides a simplified alias using just the colon (:).

<!-- this is equivalent -->
<a :href="linkUrl">Visit Vue.js</a>

<!-- to this -->
<a v-bind:href="linkUrl">Visit Vue.js</a>

That is, the previous example we would normally write it like this,

<template>
	<!-- we simply use : -->
  <img :src="imageUrl" alt="Dynamic image">
</template>

<script setup>
import { ref } from 'vue';

const imageUrl = ref('https://inventedimages.com/luisllamas.jpg');
</script>

Binding Classes and Styles

Attribute binding also allows us to bind styles or classes dynamically (they are just attributes after all).

We will use this frequently to style our components dynamically. For example,

<template>
  <div :class="{ active: isActive }" :style="{ color: textColor }">
    This is a dynamic text
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isActive = ref(true);
const textColor = ref('red');
</script>

Using v-bind in Our Components Advanced

We can also use v-bind to pass data to a child component, along with what we call Props (we will see this when talking about components).

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script setup>
defineProps({
  name: String,
  age: Number,
});
</script>

<template>
  <ChildComponent :name="userName" :age="userAge" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const userName = ref('Juan');
const userAge = ref(25);
</script>