- [Instructor] In VJs you don't use curly braces
inside HTML tags.
Instead we use a directive
that looks like an HTML attribute,
when we want to bind or connect a variable to an HTML tag.
Now, this is the way that atypical attribute
would look like in HTML.
You would use the source tag and then give that a variable.
You can also see the whole tag is the same thing.
When you first got started with VJs,
you might be tempted to try to use
an expression syntax in here instead of a value.
So you could try something like this,
and maybe you can say imgsrc, but that's not going to work.
The mustache syntax does not work
inside the HTML attributes.
So you have to use something else.
In attributes, we have to use something called a directive
and this is a fancy word for a command
that is understood by Vue.js
and handles some type of functionality.
In this case, we're using this directive called v-bind
to bind or connect the attribute like source
to a variable in our Vue.js code.
So the page would display
whatever is in the image source variable.
You can use it to bind lots of different attributes
using this syntax.
So we could also type in the bind
and then use it to print out some variable
that was maybe the name of the alt tax.
So this corresponds to an actual variable
it would no longer be taxed right here.
So this is the formula for how that works.
You can use the keyword v-bind or not,
and then you would use some sort of ID
for the HTML attribute.
And we've seen how you can use src
but this can really be anything.
So it can be any other valid HTML attribute.
And then inside the quotes would be some sort of expression
like a variable name like this.
There is a shortcut to v-bind that removes the keyword
and uses a colon instead.
It's so much easier to ride
that you'll probably never use the v-bind keyword
but it's important to understand
that it is technically still there.
V-bind is part of a family of commands called directives
and here are some of the features.
They look like attributes and all start with the keyword v
and then a dash and then the name of the directive.
They take arguments.
So for example, the keyword bind is an argument
but there are lots of other ones.
Normally they expect a single JavaScript expression
with a couple of exceptions like the V4
and the V-on directives.
This means that the formulas you add here
can be very complicated and not just simple variables.
However they can and often do use the turnery operator
which is a shortened version
of the if then L statement in JavaScript.
If you're not familiar with that, don't worry,
keep watching and you'll get plenty of experience with it.
The job of directives is to provide views
reactive binding feature.
Now this means that Vue modifies the dom
or the document object model,
pretty much the HTML for you
when the value of a variable changes
and it's pretty magical.
Now that's enough about directives.
For now, although there are lots of other options
check out this URL if you want to learn more about directives.
Now I've created cope in here with some starter code
for you to practice this with.
And it's going to be pretty simple.
If you take a look at this application,
we have a few HTML tags that are using mustache expressions
to app with the value of some different variables.
You can see that in data,
we have the different variable names
that we're calling right here.
So, what we want to do is add an img tag
and then use the v-bind directive with the imgsrc variable.
Go ahead and try the shortcut,
that is the :src version,
and then make sure that you add an all tag
with the name variable.
As usual you can see the solution rate here,
and if you want to look at the difference
between these two pieces of code,
you can take a look here although it's hardly any code,
so let's get to it.
So I'm going to add a classic image tag right here
and because I'm using bootstrap and I want it to fit nicely,
I'm going to be using the img-fluid class
and then I'll just add a v-bind directive
with the src attribute here,
and then I'll use the imgsrc that I have down here
with a link to the image
and then I'm going to close this.
Let's go ahead and make this a lot bigger here
so we can see more of the code.
And then we can also add a v-bind for the out parameter.
And in here, we'll pass along the name,
so it'll pick up the name, which you can't really see
but you know that it's there.
Now, of course you are almost
never going to be using the bind.
So you can just write all this with the awesome shortcut
starting just out with the colon
and you can see that it works just fine.
So this means that you're also using the very awesome
reactive properties.
You'll learn more about the awesomeness
of reactivity later on.