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 app for example. Currently we can type in an item to add to the list but we need some kind of UI, 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. btnPrimary.
We'll give it the label of Save Item. We can also wrap our inputs and our button inside of a div with the class of Add Item Form. And let's actually move our button below our high priority checkbox. Now that we have our button in place, we can take advantage of the vOn directive.
On our button, we'll want to listen for the click event that gets triggered when a user presses the button. push and then push it an item with the label specified in the new item data property. In order to generate a new ID for the item, I'll use the item's length plus one, and I'll clean up the template just a little bit. If we head over to our browser, we can see that when we fill out our input and click our button, that our new item gets added right to the end of our list.
While responding to the click event is great, V on lets us listen for other events as well. 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. So, let's add another von directive to our input. Here, we'll need to listen to the keyup event, but how will we know that we're clicking enter and not any other key?
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. enter to listen for the enter key.
Then, we'll duplicate our code from earlier. Give things a quick cleanup. Now, we can press enter. to save our newest item without writing any additional boilerplate code.
Besides Enter and Click, View 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. At this point, our template is starting to look a little verbose. Fortunately, von has a shorthand syntax that we can use.
That is, the at symbol. In our template, we can replace our two vons with the at symbol to decrease the length of our event listeners. Using the von shorthand makes our templates look a little nicer, it's a little easier to type, and is honestly the only way I ever write it. This is great progress.
But we still have some long, duplicated JavaScript in our V-ons. In the next lesson, we'll see how to extract that code to a method. 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 app for example.
Currently we can type in an item to add to the list but we need some kind of UI, 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. btnPrimary. We'll give it the label of Save Item. We can also wrap our inputs and our button inside of a div with the class of Add Item Form.
And let's actually move our button below our high priority checkbox. Now that we have our button in place, we can take advantage of the vOn directive. On our button, we'll want to listen for the click event that gets triggered when a user presses the button. push and then push it an item with the label specified in the new item data property.
In order to generate a new ID for the item, I'll use the item's length plus one, and I'll clean up the template just a little bit. If we head over to our browser, we can see that when we fill out our input and click our button, that our new item gets added right to the end of our list. While responding to the click event is great, V on lets us listen for other events as well. 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.
So, let's add another von directive to our input. Here, we'll need to listen to the keyup event, but how will we know that we're clicking enter and not any other key? 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. enter to listen for the enter key. Then, we'll duplicate our code from earlier. Give things a quick cleanup.
Now, we can press enter. to save our newest item without writing any additional boilerplate code. Besides Enter and Click, View 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.
At this point, our template is starting to look a little verbose. Fortunately, von has a shorthand syntax that we can use. That is, the at symbol. In our template, we can replace our two vons with the at symbol to decrease the length of our event listeners.
Using the von shorthand makes our templates look a little nicer, it's a little easier to type, and is honestly the only way I ever write it. This is great progress. But we still have some long, duplicated JavaScript in our V-ons. In the next lesson, we'll see how to extract that code to a method.