v-bind

[00:00:00]
>> V-BIND or colon I know I said I love V model the most, but I also love V-BIND the most. I like both of them. Okay, so, V-BIND or this colon that's a shortcut, we have a couple of shortcuts in Vue because there are some directives you'll use again and again and again.

[00:00:16]
And it's a little bit more legible to just use the colon instead of writing V-BIND, V-BIND, V-BIND. So it's one of the most useful directives. That's part of the reason why it has a shortcut. We can use it for so many things. We can use it for class and style bindings, dynamic props, etc.

[00:00:33]
So I'll show you some examples. So, here instead of the button not being on the page, what we have is this V-BIND of a state of a class. So we're basically saying, if talk and then we have a ternary operator. If tacos is true, add an active class otherwise don't.

[00:00:52]
So I can say like our past or here and what you can see is that we now have that class appended. So if we looking inside here we see this button .active. What we have is tacos as an empty string. And we said, okay, add the active class or active class in this case was active and that's how it knows to kind of toggle back and forth between those classes.

[00:01:20]
Here's an example that's like, this is a very common use case making weird Tron things. No, I'm just kidding. So this is a style binding that we're changing perspective origin based on your mouse movements. So, if I move my mouse around, I have this event at mouse move and I'm able to bind x&y coordinates.

[00:01:42]
To this style, and that's how I'm doing this. That's all that it takes to make something move around in space, which is really cool. So that's that V-BIND style right here.