> ## Content Index
> Fetch the complete content index at: https://catalins.tech/llms.txt
> Use this file to discover other available public pages before exploring further.

# Attribute Binding In Vue JS
- URL: https://catalins.tech/attribute-binding-in-vue-js/
- Published: 2021-05-06T15:36:00.000Z
- Updated: 2023-01-30T18:01:21.000Z
- Author: Catalin Pit
- Tags: Vue

In this article, you will learn about the concept of attribute binding. That is, you will learn how to use dynamic values rather than hardcoded values for attributes.

## Attribute binding

First of all, you need to create a Vue instance and add three properties:

- a product name
- an image URL
- a description for the image

The code snippet below does just that.

```js
const app = Vue.createApp({
    data() {
        return {
            product: 'Vue 3 Course!',
            imgURL: 'https://catalins.tech/img',
            imgDescription: 'An image with a desktop computer',
        }
    }
})

```

Thus, instead of using hardcoded values, you can use dynamic values by using the properties specified in the Vue instance.

Below you can see an `<img/>` HTML element. If you pay attention, you can see that the `src` and `alt` attributes use the properties from the Vue instance.

```
<img v-bind:src="imgURL" v-bind:alt="imgDescription" width="500" height="350">

```

Thanks to the `v-bind` directive, you can create a reactive bond between the attribute (*an HTML element attribute*) and the argument (*data from the Vue app*).

In a more sophisticated way, this directive allows you to bind an attribute dynamically to an expression. In simple terms, it allows you to use dynamic values.

However, it can become tedious to add the `v-bind` all the time. As a result, you can add the colon symbol (`:`) in front of the attribute. Like in the code snippet below. The colon is the shorthand for "v-bind".

```
<img :src="imgURL" :alt="imgDescription" width="500" height="350">

```

Now, if you use the image in multiple places and want to change the description and/or image link, you only have to do it **once** in the Vue instance.

### One caveat

When you see an example of attribute binding such as `:src="imgURL"`, you can think of it as `:src="{{ imgURL }}"`. Vue treats it the same.

## Conclusion

If you open your application, you should see the following image.

![Vue attribute binding](https://cdn.hashnode.com/res/hashnode/image/upload/v1620283120554/swm3s1zWq.png)

In a similar fashion, you can use attribute binding for the HTML `a href` attribute, for CSS classes and so on.

> Become a Vue.js developer and get hired with the [complete Vue mastery course](https://rli.to/LJpvN).