Getting started with Vue.js - part three

In the third part of the course we will learn how to bind data from the data object to attributes inside the template.


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.

Vue Hero - Introduction - Attribute binding

When we have done this we can scroll up to the HTML and add a extra code block to the card-element.

Vue Hero - Introduction - Card element

Tip!

Equivalents
<img :src="image"> will be the same as:
<img src="https://bulma.io/images/placeholders/1280x960.png">

Shorthand
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.

Mini challenge

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.


PreviousNext

Buy me a coffee

I'm working hard to create quality courses and lessons. Please consider buying me a coffee or three to support my work.