As with any framework, Vue lets us add reactivity to our applications and websites through events. The great thing about Vue events is they mimic Vanilla Javascript, so all the events you're used to using in Javascript can also be used in Vue. Events in Vue The most basic event frequently used in Vue, as well as in most Javascript, is . The component below is a simple counter which increases by 1 every time the button is clicked. To do this, we use an inline event: click @click <script> export default { data() { return { counter: 0 } } } </script> <template> <button @click="++counter"> {{ counter }} </button> </template> Since we can write inline Javascript straight into our events, we can simply write to increase our counter data. As such, the above will increase any time we click the button and display that in our element. ++counter counter button As mentioned before, we aren't just limited to . All other Javascript events work too, in the same format. This means you can use: @click @keydown @mousedown @pointerdown @pointerup @scroll etc. We aren't just limited to running Javascript in line with our events. We can trigger a method or function if one is defined in our Vue Javascript. Here is the same code using a method instead: <script> export default { data() { return { counter: 0 } }, methods: { incrCounter: function() { ++this.counter } } } </script> <template> <button @click="incrCounter"> {{ counter }} </button> </template> vs in Vue v-on @ You may have seen events written as vs . Both of these mean the same thing and are interchangeable, so use whichever one you are comfortable with! v-on:click @click Mouse Specific EVents We can further modify any mouse events by using the , , and modifiers. left middle right If you are firing a mouse-related event, like , or , then will only track right mouse clicks, or will only track middle mouse clicks. click mousedown mousedown.right mousedown.middle <!-- left mouse clicks --> <button @mousedown.left="incrCounter"> {{ counter }} </button> <!-- right mouse clicks --> <button @mousedown.right="incrCounter"> {{ counter }} </button> <!-- middle mouse clicks --> <button @mousedown.middle="incrCounter"> {{ counter }} </button> How to use Event Data for Vue Events? Sometimes, we want to access the event or object in our events. In situations where we simply want to access itself with no other arguments, we don't have to mention - it is automatically passed directly to the function. e e e For example, the code below will still console log and whenever the user clicks the button: e.clientX e.clientY <script> export default { data() { return { counter: 0 } }, methods: { incrCounter: function(e) { ++this.counter console.log(e.clientX, e.clientY) } } } </script> <template> <button @click="incrCounter"> {{ counter }} </button> </template> Things become a little trickier when you have more than 2 arguments. In these situations, there are two ways to access data. Either encapsulate the function or use the predefined variable. event $event For example, let's say we want to increase the counter by a custom amount, and continue to console log and . This is achievable by using to pass the event data to our function: e.clientX e.clientY $event <script> export default { data() { return { counter: 0 } }, methods: { incrCounter: function(amount, e) { ++this.counter console.log(e.clientX, e.clientY) } } } </script> <template> <button @click="incrCounter(5, $event)"> {{ counter }} </button> </template> Alternatively, we could also pass the object directly to the function as follows: e <button @click="(e) => incrCounter(5, e)"> {{ counter }} </button> Custom Key Events in Vue Events Vue tries to simplify events as much as possible. If you've made key events in the past, you'll know that frequently we only want to access a specific key. Therefore, with events, we can tie common keys directly to the event. For example, in this input, we will fire an event any time the user presses a event: key keyup <input @keyup="someFunction" /> But if you want to fire only when the user presses , we can do that with the following event: @keyup enter <input @keyup.enter="someFunction" /> You can use any , converted to kebab case. For example, is a keyboard key defined value, but in Vue, we write : defined keyboard key-value PageDown page-down <input @keyup.page-down="someFunction" /> Finally, Vue has defined some commonly used keys which are not defined values. These are , , , , , , , , , as well as the keyboard modifiers , , and . enter tab delete esc space up down left right ctrl alt shift meta Keyboard modifiers and keys We just mentioned the keyboard modifiers , , and , and these can be combined with our key values from before, to add another layer of functionality. ctrl alt shift meta For example, the below will fire the event, and therefore , whenever and are both pressed within the input: keydown someFunction shift enter <input @keydown.shift.enter="someFunction" /> Exact modifier Finally, we can make sure only one key is being pressed by using . The below, for example, will only fire if is pressed alone. exact enter If is pressed with a combination of other keys, the event will not fire: enter <input @keydown.enter.exact="someFunction" /> Final Thoughts Event control in Vue is an essential element in building any complete Vue application. I hope you've enjoyed this guide. Also Published Here You can find more . Vue content here
