Binding data to attributes
Binding data to an attribute is something that is very often used in Vue and in this part of the course we will show you how it's one. First we'll show an example that we will use in our app and then we will explain a little bit more.
We want to add a picture to our app and instead of hard-coding it directly into our template we'll add the image as a part of the data object.
When we have done this we can scroll up to the HTML and add a extra code block to the card-element.
<img :src="image"> will be the same as:
The :src="image" directive is a shorthand for v-bind:src="image". We prefer the short hand with just a colon since it's shorter and more readable.
The mini challenge of this part is to add another attribute to the image. Try adding a alternative text in the data object and then add it to the image using a directive. This will not be a part of the course so when you're finished you can just remove it.