JavaScript wouldn't be the powerful language that it is without the ability to listen to events from all kinds of user input. Vue certainly is no different. It harnesses the power of JavaScript events in a short declarative syntax that makes it easy to react to clicks, scrolling, mouse movement, and more. Let me show you how simple events are in Vue with the von directive.
Take this shopping list out, for example. Currently, we can type in our input. But we need some kind of UI element, a button, for instance, for the user to interact with. And then we need to be able to listen for the click event of that button to actually add the item to the list below.
All right. In the code, we'll add a button. And we'll give it a class of btn and btn-primary, just to give it a little styling. Finally, I'll give it the label of save item.
Nice. Let's also wrap our inputs and our button inside a div with the class of add item form. And this is just for styling purposes. Now that we've got our button in place, we can take advantage of the V on directive.
On our button, we'll want to listen for the click event that gets triggered when a user presses the button. To do that, we can add V on click to our button. push and push it a new item with the label specified in the new item data property. Then in order to generate a new ID for the item, I'll use the item's length plus one.
Lastly, let me just clean up the template a little bit here so it's easier to read. Cool. If we go over to the right-hand side now, we can see that when we fill out our input and click on our button, that our new item gets added right to the end of our list. Awesome.
While responding to the click event is great, Vyond also lets us listen to other events. When we're adding lots of new items to our list, it would be nice if we could just hit Enter to save an item instead of clicking on our button. All right, well, to do that, let's add another beyond directive, this time to our input. Here, we'll need to listen for the key up event.
But how will we know that we're clicking Enter and not some other key? Well, in order to do this, we can use one of Vue's key modifiers to explicitly target the Enter key. A key modifier is an event modifier that applies to keyboard-based events. Event modifiers allow us to alter the behavior of events using a declarative syntax.
It's really pretty nice. enter to listen for the Enter key. Then to get the same functionality as on the button, we'll just duplicate our code from earlier. And lastly, I'll just give it a quick cleanup.
All right, cool. Now we can press Enter to save our newest item. And we did it without writing any additional boilerplate code. besides enter and click.
View also lets us respond to every event that JavaScript can. So we could respond to tab, escape, delete keys, or write and command clicks, focus and mouse over, and more. There's also one more way we could go about doing the exact same thing. Let me show you, as this will probably be the more common way that you'll see this done in real life.
I'll change the div with the class of AddItemForm to an actual form element. And make sure to update the closing tag. Then I'll take the V on from the button and paste it onto the form. Finally, the event that I want to listen to now is not the click event.
Instead, it is the form's submit event. Awesome. This means we can remove the event listener from the text input. Why?
Because when you click a button in a form, that fires the submit event. But that same submit event is also fired any time you click Enter with inside one of the form's inputs. So we get the same functionality, just with less code. When I try it out, I'll hit Enter.
And you actually notice that the page refreshed. That's because there's one more thing we need to do to our event. That is, we need to add a modifier, the dot prevent modifier. This modifier is the same as calling prevent default on a normal JavaScript event and will be necessary when you use the submit event on forms.
Let's try it one more time. Awesome. So pressing Enter works. And so does hitting Save Item.
Sweet. Lastly, Vue provides a shorthand for the V on syntax. That is, using an at symbol. Using the V on shorthand makes our templates look a little nicer.
And it's a little easier to type. And to be honest, it's the only way I ever write it. All right, this is great progress. In the next lesson, let's learn how to encapsulate our logic to add a new item into its own method.