- For the remainder of this chapter
we're going to go through an overview
of some of the main functionality of UJS.
So, the next thing I want to show you is
how you bind two attributes.
You can't use this curly brace notation when
you're doing something like an image.
So if we wanted to for example add an img tag right here,
we can't use src and type in the double curly braces here.
What we have to do is use a different directive.
So, this is something UJS has.
Essentially what are commands they are called directives
and they appear as html attributes.
So, for example you can use the v-bind directive
to bind a variable to an attribute.
So, if we wanted to say v-bind
and then we can use colon src.
And then we can pass along the name of a variable.
So we know that the variable here for the image
is just called image.
So, if we do this you'll see that we will get an image.
Now I'm using bootstrap here,
so, I'm going to add a class here of img fluid.
That's going to make that image fit a little bit better.
You can see the rest of the stuff is still in there
and v-bind is available for a number
of different attributes.
So, we can say for example v-bind and then do something
for the alt tag.
And for that one we'll just use the name.
This will set the alt tag to the name,
which is the name of this jacket right here.
There is a shortcut to the v-bind directive
so that you don't use actually have to use the words v-bind.
You just start everything from the colon like that.
And, let's do that same thing for the alt tag.
It displays in the exact same way but it's sort of a
easier way of writing the v-bind directive.
If we want to we could even use this directive to
create a variable that controls how our class operates.
We'll cover that in the chapter when we
talk more about styling things in UJS.
Now the v-bind directive uses different html attributes
like source, title and much more.
You can get more information on v-bind at this URL.