Using v-on Events 0:00So now that we understand how to type into an input, register an event listener, and then append to an array, why don't we take a moment to optimize things. This is still the traditional way. Use vanilla JavaScript to add an event listener, and then dive into the DOM, fetch a value, and then push to our data. So we're kind of mixing and matching approaches here. Instead, take a look at this. I'm going to get rid of our ID, and we'll use a directive here. V on. This is how we can register event listeners with Vue.V on. This is how we can register event listeners with Vue. Now specifically, what event do I want to listen for? The click event. So I will pass the click argument here. Generally, with directives, you just need to learn this. This will be the name of the directive, and if you do have a colon, anything after it could be considered the argument. So when we click on it, what do we want to do? And here's the great thing.So when we click on it, what do we want to do? And here's the great thing. We can reference any expression here. I could update names itself. So I could change names entirely. Or I could reference a method, such as onClick, if you like that. And then we could define a method for that. It's very, very simple. And even better, this replaces the need for this. So let's try it out. Creating addName Method 1:04And even better, this replaces the need for this. So let's try it out. Any custom methods that we add should be nested within the methods object. So if we want a method name called addName. Oh, and by the way, I am using the ES2015 syntax here. This will work in modern browsers. You will need to do a little bit of work for older browsers, and we do cover that at Lericast, or there's lots of information on using tools like Babel. Otherwise, you can always default to the traditional syntax. This is the equivalent.Otherwise, you can always default to the traditional syntax. This is the equivalent. Okay? But I like using the new form. It's very clean. So why don't we just say addingName to prove that this is all working. So we get rid of this entirely. We'll comment it out. And now we're saying, when you click on the button, call a method with a name of addName. And that will simply alert.And now we're saying, when you click on the button, call a method with a name of addName. And that will simply alert. Okay. Refresh. AddName. And we get the alert. So, so easy. With Vue, you don't even have to think too much. It all just makes sense out of the box. But that does beg the question, we still need to fetch the value of input here. Binding Input with v-model 2:00It all just makes sense out of the box. But that does beg the question, we still need to fetch the value of input here. Well, we learned about the vmodel directive in the very first episode, didn't we? So why don't we say vmodel equals newName. We can then set it here and initialize it to an empty string. And then, when we call addName, all we have to do is take the value of newName and append it to the array. Like this. This.names. Now here's what I want you to note.This.names. Now here's what I want you to note. When referencing properties in your data object, everything will be proxied correctly. So that means you can call this.names, and it will automatically refer to the value within your data object. Okay. So once again, we're going to push this.newName to our list. And let's see if that works. There's a reason. addName.There's a reason. addName. And it does. So think about it. All of this junk, where we register an event listener, we fetch an element, we update some data, none of that was necessary. We can remove it entirely, and then simply defer to something like this. When you click on me, I'm going to trigger this addName method, the addName method will fetch whatever was typed into the input and append it to the array. But we still have a couple improvements. Clearing Input Reactively 3:08fetch whatever was typed into the input and append it to the array. But we still have a couple improvements. One, we type a name, and it doesn't get removed. Okay, let's fix that. Do we once again dive into the DOM and clear that value? No. We have reactivity here. What if we just update newName to an empty string? Shouldn't that work? We've changed it to nothing.Shouldn't that work? We've changed it to nothing. That should trigger a DOM update and should clear the input. Let's try it. Susan. addName. She gets added there, and the input is cleared. You gotta love this. If I scroll up, we listen for one type of event. Click. Handling Additional Events 3:42If I scroll up, we listen for one type of event. Click. But yeah, you can register as many as you want. I could say V on, and how about key up? And then we'll call addName. Okay, well this is silly, but just to demonstrate, now if I type a letter, as soon as I let go of that key, we trigger the method, as you can see here. And generally, yeah, you can just refer to any of the native event names and then apply them here. Now, in closing, I will show you one bit of shorthand. v-on Shorthand Syntax 4:08them here. Now, in closing, I will show you one bit of shorthand. You're going to find for your projects that you register events over and over, and this does get kind of old. So there is a shorthand. Rather than V on colon, you can replace it with the at symbol. And I kind of like this. Button. When we click on it, trigger an addName method. But now in this case, you can see the syntax highlighting's a little off.When we click on it, trigger an addName method. But now in this case, you can see the syntax highlighting's a little off. For most editors, you can probably find a view syntax highlighter. For example, in Sublime, you can use it through package control and pull that in. I think I already have that, so I should be able to set the syntax to view, and that looks a little better. All right, so just remember, if you see V on or at symbol and then the event name, those two are equivalent. This is just shorthand. And you know what?This is just shorthand. And you know what? Throughout the series, this syntax is almost always what I will use. Okay, keep playing around with this, and I will see you in step five.
