Welcome back to CodeTime.io. This is episode three of learning Vue.js with mini demos. In the last demo, we did a modal. In this demo, I just want to show you some things that you can do with a mouse, and that might lead you to some cool things and experiments that you might want to make with mouse over interactions. We talk about these demos. They're really about learning the basics of some of these micro interactions that you can create with Vue.js. With this one, we'll be focusing on the mouse. What happens when you mouse over something, or mouse out of something? What's something that you can go and create? In addition, I'd like to work with binding a style sheet to an HTML element. We'll show you how to bind the visuals, essentially, that we change based on the hover, or hover out essentially, or mouse out.
Okay. I have a blanket HTML document here, so I'm going to start from scratch as well. This time, I'm going to go a little bit faster, so exclamation mark tag. I'm going to go back to Vue.js. I'm going to click on, get started. I'll scroll all the way down here. I'll grab the script. I'll paste the script here by the close body tag. Then, if we scroll down here, we have a div ID app of message, and we'll paste this as well. Here, we have our view app instance. We'll say script, and we'll paste that code in there like so. We'll do a little bit of fixing up here. I like to just tab everything in so it's nice and easy there. Okay. In this demo, I'll add a little bit of Tailwind, but I probably wouldn't need it too much for what we're doing. Again, I've added Tailwind now, just like that. We're ready to go.
If we go into our demos folder, we have a mouse fun, and that's what it looks like here. Let's get started with this. Here's our div ID of app. I'm going to make this element have a class of h-screen and a BG of teal. Let's take a look. You can see how I have a teal background now. Okay. What I'd like to start with is something that I can just change the color. I like to start that with a basic input field. So, we'll set up an input field, and its input field is text. That's okay. Actually, let's change it into a color input field. We'll say color. Here, I'm going to say V-model, and I'm going to bind it to a BG color model. All right. Let's take a look here.
This input type of color, I believe only works on Chrome. It may work on Firefox on a Mac. It's definitely not going to work on Safari. So, if you don't have that browser or for some reason you can't get it, just use a text field like that, and that'll do the same thing. But I'm going to use a color so I actually get a color picker. Now, if you actually wanted to implement a color picker, I suggest looking at a JavaScript library for a color picker.
All right. Here's our V-model. We need to set up a model, which was message. I'm going to name to bgColor. I'm going to set its value to start as null, meaning it doesn't have a value. Of course, we have message from up here. I'd like to remove that. Instead, actually, let's replace that with, looks like I made a little error there, with our bgColor. Okay. That way, we actually can see what's going on. Let's tab these in. I'll refresh the page. You can see my background's still that color. This is not going to change the background color. It's just going to spit out the color that I've chosen, and it's spitting it out as a hexadecimal color. As we change the color here with the color picker, again, I can click on it, change the color, it's going to change the hex color that's printed out on onto to the screen.
What I want to do now is bind this background color to this div ID of app. Bg-teal, we can then remove, and we can do our binding. To do our binding, we're going to say v-bind:, and what are we binding? The style. You may be familiar, and hopefully you haven't been using this too much as it is a bad practice in traditional HTML and CSS. You could [inaudible 00:04:32] something like background. I'm going to do background-color is red. This would then make your background red. Maybe that's changing a little bit, I guess, with some of the stuff that Vue does now, but this is seen this as bad practice, as if you wanted to go back and change it, you would have to find everywhere you wrote this inline styles. This is traditional inline styles. I suggest not doing that unless you have a really good reason to do it.
But with Vue, you need to be able to do that to bind variable changes. I want to bind a color to this so it needs to be binded. The way to do that is inline styles, and it's not the same as inline styles as it's not permanent, where this red is permanent. It's going to be variable driven. Essentially, not making it permanent. In order to take this syntax and make it into Vue syntax, I need to say v-bind:style.
There's a little bit more I need to do. Here, it can't just pass a string like this. You need to pass an object. There's our object. BackgroundColor can't have a hyphen that way. It needs to be camel case syntax, so this becomes background color. This value here, red, would then become our background color, and now you'll see that it's white, but if we click on the input field and change the color, we now have binded the input field to the body or to the div ID of app, and that'll change the colors that we have. That's the syntax here. Some [inaudible 00:06:23] things to know. V-bind:style equals object. Make sure when you're referencing your CSS attribute names here, or property names, that you need to make them camel case.
All right, let's do that. I'm going to now switch this over so we start to integrate the mouse over code. In order to do this, I want to set up a little box in the middle of the screen, and when I hover over the little box, I want the little box to get bigger, I want to change the background color, and I want to change the color of the little box. It's going to have a lot of moving pieces and it's going to have this cool effect as I hover things.
To get started with this, I'm going to remove the input fields and the background color that got printed out. I want to set up a div in the middle of the screen, and let's start out just making this div white. I'll say bg-white. I need to set a width. I would say something like, "Width one-fourth," but if I press tab there, you'll see [Emmett 00:07:21] doesn't process that inside sublime. So, what I tend to do is width 14 and then go back in and add a forward slash. Then, I could specify a height on this element if I want. Just for now, this is going to be a placeholder. I'll say height of 32. So, BGY with one-fourth and a height of 32. If we refresh this, of course, the background is white, so we can't really see what's going on. But if we set a value here, I'll say #ccc and refresh, we'll get that light gray, and we'll see our white box now. I need to move the white box into the middle of the screen.
If you remember how we did that on the last one with a modal, we'll be using a flex utility. We need to first take the class of h-screen and make this flex. Then, we'll say items-center, and then we'll say justify-center. Now, it's exactly in the middle of the screen. Item center vertically, justify center horizontally, allowing us to set this up. Now, I could do something just like a simple hover over this, or something like in here, I could say hover, bg-black, and I would then have a quick hover state here using Tailwind. But that's not what I'm looking for. I want these things to be very smooth transitions, and I want them to be variable driven, meaning that I could change the values eventually, maybe from a database or from something like Firebase or a no SQL database somewhere.
I'm going to remove this hover:bg-black and bring it back to our state here. This hover is going to be recognized in JavaScript and it's not a CSS hover. It's a JavaScript hover. To do this, we need to set up a method, and we need to set up something that's going to run it. This is the element that we're going to set up. I'm going to start this by doing a click event. You say, "Why a click event?" Well, because we know we can test with a click event before we move over. We'll say click, and when this clicks, what I want it to do, I want it to... We'll make an action called... This is the part I have the hardest time with. Action hover. I guess that's what we're going to call it. Action hover, that's what came to mind here.
I'm going to give this parenthesis just so we can know that is in fact a method or a function. We'll come down here and then we'll say methods:, and then we'll specify here our action hover. Again, we can name this whatever we want, and I need to essentially change this first thing, is this .BG color. I want to change its value maybe to red. Now, red is a string, so I'll wrap it inside. I don't need a semi-colon, a habit I've picked up from PHP.
Okay. That looks pretty good. When I click the white box, it should change the background red. Let's see if it works. I'll click the white box and the background is now red. That's something cool because we wouldn't be able to do that with just CSS. JavaScript's made that easier, Vue.js has made that very, very easy. Now, that's cool, but we could do a little bit more with that. I don't want it to be so jarring. I want it to animate from the gray to the red.
To do that, I could set up a custom style here. I'm going to put a little bit of style right here, and I'll say .animate. It is going to take a transition, and I just like to do all. You don't have to do all. You could specify the thing that you're going to do, but all is referencing to, what property are you going to affect? So, I just say all, and then the speed in which I'm going to do this at. I'm going to say that I want to set this up at five seconds. So, point five seconds, essentially half of a second. Then, I'll take the animate class and I'll put it on the element that's actually going to be getting animated. That's not the button right now. The button doesn't get animated. The background gets animated, so I'll add the animate onto the background class.
I'll then refresh, and when I hit the white box, let's look at the background, and it fades in. If I want to slow that down, I could specify maybe two seconds, click on the white box, and you can see a nice fade in from the light gray to the red. That's working out great. Now that we know that way works, we get the sense of what's happening here. I can change this click event to a mouse over event. All right. That makes sense. Click becomes mouseover. Now, if we refresh this, again, I've not clicked on the element. I'm just going to come in and hover in and you can see that it turned red. The next thing I need to do is when I hover out, I want it to do something else.
I'm going to rename this method because it just doesn't really make sense now, as I look at it. We're going to name this to hoverIn with a capital I, and I'll rename it down here as well. Then, I'm going to put a comma, and I'll make another one, but this one's going to be hoverOut. It takes the same [inaudible 00:12:48] functions here, and then we'll specify this background color, and I'll bring it back to maybe what it was before, which I'll use the hexadecimal #ccc background color.
This is hoverIn, but I need to do a mouse out. To do that, it's pretty much the same as this. If we copy this and paste it, and then where it says hoverIn is going to be hoverOut, and where it says mouseover, that's going to be mouseout. This is set up. Now, you can see this is starting to get a little bit long, and what tends to happen is people take this and they break it down like so. Which is a weird thing, I think for me at first, because I came from such a HTML background and it was like, make your HTML very pretty, and you put it all in the one line, but as you start adding all these Tailwind classes and these additional attributes, you can see that it gets a lot of words there. But what's cool about this is I've been able to make this with only one line of CSS.
Now if I refresh this, I'm in the gray zone here. If I hover over into white, it turns red. If I hover out, it turns back to gray. Check that out. Pretty cool. What I want to do now is do some things to the white box. What do you mean do some things to the white box? Well, our white box here, when I hover it, I'd like it to grow as well. Maybe it grows, and I'd like to change the gray color maybe to something a little bit more interesting.
I'm going to switch the gray color over to blue, and then I'm going to set up a new model. I'll call it boxWidth, and that's going to be our white box that we're referencing, and I need to set it up as a set width, and that set width that I'm going to use is, let's go from 25%, and note that I didn't put 25% there. I'm just putting it as 25. That'll be its default value. When you hover in on the box, I'm going to take this .boxWidth, and I want it to maybe be, let's go 50%. Here, I want to bring it back to where it's at, and it doesn't really matter the order here, but let's just be consistent. We'll say this .boxWidth is equal back to 25.
All right. This is great. We need to do percentages here because they're going to be in percents, and I need to set a box with this individual element. Well, we've actually done this already. We say v-bind:style background color. We can grab that rule and I'll just paste it in here like that. I'll add a couple lines just so you can see the area that we're working on. V-bind:style, here as a background color. I'm going to tab these down so you can see the object and see how it's nested. Well, we don't want backgroundColor. We want the width, and we want to take the width and equal it to the boxWidth. Okay, that's great, but then that would be width 25. I need 25%. To add a percent, I need to say plus, and then a string value, and then the percent sign. Because this is essentially a variable or a model, we need to append the percentage.
If we did it here, we would have a string value and we would not be able to change those numbers the way that we'd be doing it now. We'd be locking ourselves up, instead of having the flexibility that we need. Now, if I refresh, you'll see that it jumps and the background changes, but the white box is just jumping. I need to add the animate to the white box as well.
I'll add the animate class next to this bg-white. It has a width one-fourth. I'm going to remove that because it doesn't really apply now that we're using width and style. Now, I'll refresh. It fades in, it changes the background color, and then it shrinks in size.
I'd also like to do the height. How would we do the height? I'll put a comma here after the object. I'll say height, and this one I'll say is boxHeight. This is going to be the same thing, so we'll say plus, and then our percent sign, and you can bring this on or like that. Doesn't really matter. Make sure to put the comma after the first one, because it's an object and those are comma-separated. Now, we need to create box height. We'll go down here. We'll say comma here. BoxHeight is equal to, and I'm going to do 25 again. Then here, where it says this.boxWidth, I'll say this.boxHeight, and then I'll say this.boxHeight here, and this is going to equal 25 again. We're all set.
Now, if we refresh, you'll see that the box is 25% of the viewport height, and if I hover in, doesn't seem to be getting bigger. Let's take a look. What's going on? Why isn't it getting bigger? It looks like I spelled height wrong in multiple places. All right. Now our box gets bigger, and now our box is getting smaller. At the same time, our background is changing.
I could also do some fancy things here by saying something like border radius to it. I can copy this one, put a comma, and this time I'll say border, and it's not going to be border-radius like you're expecting. It's going to be borderRadius with camel case. Here, I could set up a radius, or I could say boxRadius, and that'll be our model, and radius comes in as... You could do it as percentages, I guess, but I'm going to do this as pixels just to get started here. I'll put a comma, boxRadius, and set it to zero as its default value. Then, when you hover in, I'll say this.boxRadius is now equal to, we'll say something like 15. Then, when we hover out, we want to, again, bring us back to where we were, and that was back to zero. That's it. Now that it's set up, we should be able to refresh, hover over, note the change in the border radius as it starts to grow. Now, we've been able to build this with some simple little animations that go along with it.
The final thing I'd like to do is change the background color of this. To do that, we set up bgColor for background color. I'd like to make one for the box. I'll say box, and we could specify either color or we could specify bgColor. So, box bgColor. I'm going to just do boxColor as I'm not going to be working with type, so it probably won't be a problem here. BoxColor, let's set up its color. What do we think? How about we switch them up on it? The default state is blue in the background, so let's make the default state here red, and then we'll copy this rule, and I'll just go down here and say this.boxColor is now going to be equal to blue, because we're switching up the colors as we do it. We'll grab this one and paste it here, and this will become back to red.
Let's take a look. Now when I hover over the element, oh, it's not working. We didn't attach it. We need to attach the boxColor to our element here, so we'll grab the backgroundColor that we did on the line above, we'll put a comma here, we'll put the next value, so here's backgroundColor, and then this is going to be boxColor instead of bgColor. Now, if we refresh, we'll see that it's red. We hover over it and it does this little switch thing on us. This is a bit of a trance here, and now you can have the effects that you might be building with these things.