Methods

[00:00:00]
>> Methods computed in watchers. Methods are bound to the view instance. They're incredibly useful. They are functions that you'd like to access in directives, but I say functions that you'd like to access in directives because that's a pretty interesting part of it. But they're functions that you can access in any part.

[00:00:17]
You can access them in lifecycle hooks that we will go over later. You can access them in other methods or even in computed properties. So let's go over methods. They're really aptly named because when you look at the view instance and the options API, that data is really an object.

[00:00:36]
So far what we've been working with in data is just one big object. And methods are a function that hangs off of the view instance object. So they're very aptly named in this case. So if we look at something like this demo, we have these pixels across. You can see I'm tracking the pixels across and also doing some updating of these hue values.

[00:01:00]
And then I have a very simple incrementer and decrementer. So let's open this in CodePen. So what we have going on here is we're tracking two things. I'm just showing you two different things at the same time. We've got this counter equals zero, and we're able to increment the counter and decrement the counter.

[00:01:21]
Now, this is not that much logic, we could have written this inside of that at click event, but I wanna show you this is how we're typically gonna work with things, right. If we call a @click, we're usually gonna make a corresponding method. And what I mean by that is in this button @click increment, we establish a relationship with an increment here.

[00:01:42]
And we're going to, every time we click this button we are going to do whatever is in increment. And it won't be evaluated until, it won't actually be run until that point. And then here we do the same thing with decrement. So you could call a method and do all sorts of things, it opens up a huge world for us.

[00:02:04]
You might also notice that in order to access this counter here, we're saying this.counter++ or this.counter--. And when we say this inside of a method, we're always referring to data. I don't know about you, but I'm really excited about always knowing what this is referring to. I don't know if you know that joke that somebody tweeted on Twitter that's like, I get really frustrated with JavaScript and I wanna scream, this is bullshit, but I keep forgetting what this refers to.

[00:02:36]
[LAUGH] In this case, we always know what this refers to, it's always referring to this counter or this.x. So for this coordinate, I mentioned this really, really briefly before, but let's talk about this for just a second. I have this @mouse move where I'm tracking your mouse anytime you're moving across here.

[00:02:58]
I say x coordinate I wanna capture the event here, but I don't actually have to pass it because you will kind of assume that you probably want access to that event. So that will be the first parameter that you have access to here. So if I console logged E I would get a lot of information about that event.

[00:03:16]
In this case, I'm using e.clientx which means that I'm tracking where it is lying across the page. That event is like, where is my mouse in terms of the pixels across on this page. And I mapping that to this dot x, I'm gonna say this dot x is equal to e.clientx.

[00:03:39]
Now we talked about this style bindings before when we made that tron thing, we've got the background color and I'm passing in this is a template literal, and I'm passing that x into the h. This is a side note, in JavaScript if you wanna make generative colors, let's say you wanna do some creative coding or something.

[00:03:59]
Hue values are really good for this generative color thing. Whereas with hex values or RGB, you eventually have something that fails on either side of negative or positive. Hue is a big circle, so you can keep going around and around in the circle. So I can say the number is 7,352, and that's still a hue because it's a big circle so it will never ever fail.

[00:04:24]
So here I'm using this to create different values as I go across the screen with this h. So I'm the binding that style. Remember, this is equivalent the bid.style. But because I don't wanna write the bid, the bid, the bid, I'm binding it with this shortcut. So this is a shortcut, and this is a shortcut.

[00:04:45]
This is a shortcut to the on mouse move, that's equivalent, but the shortcuts I'm using are at for events and just this colon for the bind. Cool. So since that wasn't the most typical use case, [LAUGH] maybe we wanna do something like a comment form. This is a little bit more app-like, right.

[00:05:10]
And we will build off of this example through the whole course. So we'll, don't worry, we'll make it a little bit more refined and do a little bit more things with it and make it a little bit better and improve on it. But for now, I'm gonna be like one of those people you post something on Facebook or Twitter or something and I'm one of those random people who says something that you're like what.

[00:05:32]
So [LAUGH] they're talking about the sea and I'm gonna say I like tacos. And as you can see, that comment is added to this. And as you could probably guess, it's an array that I'm pushing this string on to. So let's take a look at the code. So if I open up my CodePen, what I start off with in our app is I'm holding a comment array, and that's what's being outputted here.

[00:06:00]
So those are the comments. I'm also holding a string that's for new comment, that's just a placeholder so that I can type something here and it will evaluate, that I can actually capture that input. If we look over in our HTML, we have, as you might expect, Li v-for comment in comments with a key of comment.

[00:06:25]
And I'm outputting that comment here. And in input, I have the v model that establishes a relationship with new comment. I'm also saying at key up.enter add comment. So what I'm saying here is as soon as I hit an Enter key, then do a thing in methods called add comment.

[00:06:48]
So I'm writing here and as soon as soon as I hit that Enter key, it's going to go find something in methods called add comment. Our add comment is saying this.comments.push this.new comment. And as soon as I'm done pushing that onto the array, I wanna empty it out, I wanna make sure that it doesn't stay otherwise it would just stay [SOUND] whatever this is.

[00:07:18]
And what I wanna make sure of is that it empties out that input so that I can add more things. So if we looked at this in View Dev Tools, we've got all of the elements, which is what it evaluates to, the ULLi and the input. But we also have our View tab where we can go into the route, and we have a comments array that has all of the comments.

[00:07:43]
As I type new comment, I say, I like tacos. And as soon as I hit that Enter key it gets added here, and this becomes an empty string. Any questions about that before I move on? Okay, great. Here, as mentioned, we have this new comment, which is an empty string, comments array.

[00:08:10]
We're adding the comment, and this is in method. So I mentioned that this is part of the view instance, it's this big object we've got. And we've got this data which is a function that returns what we're holding as state. And the methods are anything that we would like to, any kind of function that we would like to call.

[00:08:28]
So we say add comment here. And the HTML is an Li v4 as well as as this input. This is actually not that much code to make all of that work, it's pretty declarative. What we're doing is we're holding the state, we're changing the state in some way, and we're outputting it to the page.

[00:08:49]
And if you jumped into this, you'd probably be able to understand what's going on pretty quickly. This placeholder is just regular HTML that's gonna have an add a comment placeholder for that input.