- [Instructor] In Vue.js, you bind attributes
using the v-bind directives.
So let's take a look at some of the options
that we have with that directive.
So I've got a data variable here,
and I'm referencing it in my Vue object.
And we have here three different inventory items,
we have a name attribute for each one of them,
as well as an image location.
So let's go ahead and add those to our template,
and we actually-- let's collapse this products.
We don't really need to see this JavaScript anymore
so I'm going to move it down here.
So what I'll do is, I'm going to add an image tag here,
and you probably know that we can't use
these double curly brace expressions in the source.
Instead, what we need to do, is use the v-bind directive.
And then you use a colon and you specify
the attribute that you want this to modify.
So here, if we want to, we can refer to the products.
We have three products,
so I can refer to the first one using the index zero,
and then type in the item that we want from that list.
So that is referencing our products
and then it's looking for the first one.
So we have the products, and this is item zero,
and here is the image for this product.
Now let's go ahead and collapse that again.
And I can do the same thing for the alt tag.
I can say v-bind, and then colon alt,
and then I can reference products, zero, name,
and that will add the proper alt tag to this product.
Now the shortcut is just a colon.
So if you take this v-bind pieces of text out,
this'll work just as well.
Now in addition to that,
there's also a v-bind for the class.
That is also available through the shortcut.
And in here if I want to then I can just put some text.
So I can say something like img-fluid,
which is going to make this fit properly on the page.
Now instead of text, I can actually refer to a variable.
So I can add another variable here.
I'm going to call it imgClass,
and I'm going to set this to img-fluid,
make sure I put a comma here at the end.
And then instead of referring to this text,
I can refer to that variable.
So imgClass, it's going to do the same thing,
and the nice thing is that this text can be an expression.
So I can actually add another class
by doing something like this,
and we'll add the text w-25,
and we need a space here actually.
So what w-25 does in bootstrap,
is it tells the element to take up 25%
of the width of the device, or the actual container.
So you can see that it's taking up
a quarter of the room, right?
So, by combining these two,
we're able to sort of have a more complex expression
that will still do the work for us.
So let's go ahead and organize this.
This is getting really long,
so I like to actually sometimes break up my code
so that it looks nice and we can see things
a little clearer, especially when we're going to add
a few more items here.
So, if I want to, I'm going to add,
or just really copy this image a few times
so that we'll have three images there.
And for this second one,
I'll just go ahead and not do the interpolation,
so I'll get rid of all this stuff,
show you that I can just refer to a variable.
And I'm going to switch this out to image one, right?
So now this one doesn't take up a quarter of the width
like this other one right here,
because this one is just referring
to the class that it says image fluid.
And I can show you this other really cool way
of building up a v-bind command.
So if I want to, instead of individually referencing
each one of the attributes, I can actually just use v-bind,
and then pass along in quotes here an object.
So this object is just going
to refer to a series of attributes.
So I'm going to take all these right here,
and paste them in here.
So I'm essentially programmatically modifying this element.
I'm not quite done yet,
so what I'll do is I have to use object notation.
So I'm going to say the class
is going to be colon imgClass here,
and I can use the quotes here,
just have to convert this to object notation.
So this is going to refer to products[2].image.
Again, we're referring a variable
so we have to do it like this.
And then alt, again I can't use the equal sign here.
This will have to say products[2].name.
The last one doesn't get a colon.
So it's really just the same thing,
but using object notation.
Now this presents a series of opportunities.
You can see the images right here.
So, by being able to use expressions,
by being able to use variables, it gives you a lot of power
because you can actually use JavaScript to build this object
and also control this object through programming,
as opposed to just referring to a specific simple variable
or an individual element in the list of properties.