All right, let's review another example. In this video, we will tackle attribute binding, and then also a little bit of event handling. So it should be fun. Let's get going. Maybe we have a button here, and I'll set the label to click me. All right, let's have a look in the browser. And sure enough, we see our button in the top left corner. Now real quick, why don't we put it in the center of the page? So I'm going to add a few styles here, and we'll say, how about this, html and body should have a height of 100%.

And I'm going to use basic utilities. For example, text-red will have a color of red. And then we'll do another one for how about text-green. OK, great. So now, of course, as you know, I can add a class of text-green, and if we switch back, we now have a green button. OK, but now what if we want to apply these classes dynamically? And maybe when you click the button, we change the classes even further. How exactly do we do that? All right, have a look.

How exactly do we do that? All right, have a look. The first step is to add a single source of truth. So just like we did before, I'll add a data method that returns an object. And for now, we'll call it buttonClasses. And I'll set this to text-green. Now in the last video, we learned about the mustache braces. So you might think that we could do this, but actually, no, we cannot use them with n attributes. And in fact, if we try, come back, give it a refresh, and no, the text is not green.

n attributes. And in fact, if we try, come back, give it a refresh, and no, the text is not green. And in fact, if we take a look at this, sure enough, we see the string button classes rather than the evaluated expression. All right, so we solve this in Vue by using a directive called v-bind, like this, v-bind:class to button classes. Okay, so when you see v-bind, here's what I want you to think in your head. We want to bind the attribute called class to the result of this expression. Or in other words, bind class to textGreen. It's exactly what it says on the tin.

Or in other words, bind class to text-green. It's exactly what it says on the tin. It's not too hard. Okay, so now if I come back and give this a refresh, sure enough, now the button is green and I'll zoom in a few clicks. Very cool. Now, as it turns out, and as you can probably imagine, you'll probably be using v-bind all the time in an application. So for that reason, there's a shorthand, which is simply :. Bind the class to button classes.

When do I use it and when do I not? And here's an easy way to think of it. If I didn't have a : here, we are literally saying set the class to the string button classes. And if we come and take a look, it's going to do exactly what we requested. So unless I have a CSS class called button classes, it's not going to work. So instead, when we use v-bind or the shorthand :, we're specifically saying, no, I don't want the string button classes. I want the expression, whatever the expression evaluates to. And in this case, it would evaluate to text-green.

I want the expression, whatever the expression evaluates to. And in this case, it would evaluate to text green. Okay. Hopefully, that makes sense. Okay. So now let's take it a little further and introduce some basic event handling. I'd like to say when you click on this button, I want to change the text from green to red. Okay. We can use the on and then we provide the name of the event, click.

We can use the on and then we provide the name of the event. Click. So when you click on me, what should we do? And once again, we can provide any expression here. We could do some bit of logic inline or we could even call a method. So for example, what if we wanted to say, call a method toggle. All right. So if I want to call a specific method, here's how we do it using this approach. And actually, we should talk about this. I can add a method called toggle here and we'll say alert toggle.

And actually, we should talk about this. I can add a method called toggle here and we'll say alert toggle. So let's have a look and then we will discuss it. I click on it and sure enough, I get an alert. All right. So let's talk about this. What you see here is just one way that we could structure our view components and it's referred to as the options API. And in fact, this is the original way that we would structure components with Vue all the way back to Vue one.

And in fact, this is the original way that we would structure components with view all the way back to view one. Now as part of view three, there's a second way we could do it and we call that the composition API. So we're definitely going to review that, but not quite yet. Don't worry. It's not like you're starting all over. Many of the concepts are shared. It's just a slightly different way that we can organize things. For now though, we're going to stick with the options API.

It's just a slightly different way that we can organize things. For now though, we're going to stick with the options API. And when we call a method using the options API, we create a methods object and then we add our method name here. Okay. So notice if you, if you're working along and you do something like this, which you would be forgiven for doing, if you try it, it's not going to work. So make sure any of your custom methods are nested within a methods object. Okay. So now what did we say?

Okay. So now what did we say? We want to change the text color to red. So one way, I'll show you two ways to do this. One way would be to say, all right, well this button class equals text-red. And you'll remember we already added a class here. Okay. And this would work. So if I come back and refresh, I click on the button and it instantly updates to red. Cool.

And by default, it's not active. It's not turned on. However, when you click on it, we do turn it on. So I could say this.active equals true, or you'll notice I have this method called toggle. That should do the opposite of what it currently is, right? So if that's the case, let's negate it. So if it's true, make it false. If it's false, make it true. It's like an on-off switch. Okay, cool.

It's like an on-off switch. Okay, cool. So now think about it. We could change this up entirely. I could remove the button classes and instead say, bind the class using the given expression. And that expression would be, isActive? 'red' : 'green'; If so, make the text red. Otherwise, make the text green. So again, notice it's a simple expression here using the ternary operator.

Otherwise, make the text green. So again, notice it's a simple expression here using the ternary operator. Okay, so now if I refresh and try it again, red, green, red, green. So it's a slightly different way we can go about it. And again, bringing this back to attribute binding, don't forget, if there was no colon here, then we're saying set the class equal to this long string. Because at this point, it's not an expression. It's just a long string with question marks and colons. And we can see that right here. So yeah, we always want to make sure if we want to use an expression for an attribute.

And that shorthand, in this case, is the at symbol. And I think this reads really well. When you click on me, then call this method toggle. The toggle method will literally toggle this attribute state here, and then as we learned about in the last episode with basic reactivity, when this changes, Vue knows, okay, I need to reevaluate any place where it's being referenced.