This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Methods" Lesson
[00:00:00]
>> Sarah Drasner: Let's go over to learn about methods, computed and watchers. So you heard me say earlier that one of the reasons why I really love vue is that I know immediately what kind of thing that I'm looking at, what kind of function, or what kind of logic is going on.
[00:00:17] Just by looking at some of the ways that we're working with methods. Methods computed in watchers are all different ways of working with the data that we've got available to us. And I would say that, methods is probably something that you're gonna use a ton computed into something that you're gonna use a lot.
[00:00:34] And watchers is something you're gonna use for special occasions. So we're gonna have a big emphasis on methods and computed. Watchers will kind of go into more depth of what view is in order to talk about. So methods are kind of aptly named because you saw that vue instance, we're going to hang a function off of that object and so that's called a method.
[00:00:57] They're bound to the vue instance. They're incredibly useful for functions that you would like to access in directives or use for whatever you like. This is a demo with two different pieces of functionality. They're not connected. One of them is this counter and we have up and we have down, and the reason why I'm showing this is because previously, let's actually go to the CodePen here.
[00:01:23] Is because previously, when we've looked at that add click event, we were executing some logic in ternary operator. We don't have to do that if we don't want to. And let's, say we have a little bit more functionality. We might wanna say something like increments and move the methods, if it's a little bit more complicated, we can go to our methods and we can say increment.
[00:01:46] And we declare this over here and we establish a relationship between that click event and this method here. And you can see what we're doing here, is we're saying the counter is 0 and when we need to access this we say, this.counter. That's gonna be true of anytime you use any kind of methods, anytime you use computed, anytime you use watchers.
[00:02:08] I personally like not needing to figure out what this is referring [LAUGH] to. I think that's really great. So, I don't know if you guys saw that tweet that was like. I like working in JavaScript but I keep wanting to yell out, [BLEEP] this. But every time [LAUGH] I say that, I don't know what I'm referencing this is.
[00:02:28]
>> Speaker 2: [LAUGH]
>> Sarah Drasner: [LAUGH] So yeah, this is really awesome. For the reason we're binding this to this data here, we're not gonna use an arrow function for declaring this method. We can use arrow function inside of this. So if I want to execute an a arrow function in here that would be fine, but we won't bind this properly if we use a arrow function here.
[00:02:52] So that's just something to watch out for. So if you have a button that's a click increment it's gonna call whatever logic is going on in here. We have decrement it's calling whatever logic is going on in here, so we can increment and decrement, okay. I have another thing going on here which you probably noticed, is that I'm moving through all of these different colors, as I'm moving my mouse across.
[00:03:16] And we kind of played with something similar to that earlier. What we have here is, we have an x that starts at 0, and when I have this, you wanna have this div id app, I have an @mousemove and I've connected that to xCoordinate. If we go look at xCoordinate, you can see I didn't have to pass in the event.
[00:03:37] Remember I was mentioning this before, I don't have to actually pass in the event here, view will assume that that's probably something I might want access to if I need to. So it offers me that param if I need to use it. So I still have to say e in this instance, and then I'm connecting this.x to e.Clinetx and what that allows me to do is connect this style binding of the background color and an HSLA.
[00:04:03] This is just a nerdy other thing but if you need to use generative colors in JavaScript, HSL is really, really awesome because hue is rotating on a 360 degree axis, so it will never fail. 780 is still a color, whereas RGB will eventually fail. So if you need to make generative colors, that's a really fun and cool way to do it.
[00:04:27] And then, I just have my pixels across showing you what is going on with x as I'm moving across the page.