Made withVue.jsClip

Vue JS 2 Tutorial #5 - Events

N

Net Ninja

Creator on the Vue.js channel

Watch on YouTube ↗

181K viewsApr 13, 201710:54 runtime

Learn how to make your Vue.js applications interactive by handling DOM events. This tutorial covers the essential `v-on` directive for listening to user actions like `click`, `dblclick`, and `mousemove`. You'll see how to execute inline JavaScript, refactor logic into component…

Chapters

#vuejs#clip#frontend

Handling DOM Events in Vue.js

Vue provides the v-on directive to listen for DOM events on an element and execute JavaScript when they are triggered.

Basic Syntax

The core syntax is v-on:event-name="handler". The handler can be either an inline statement or a method name.

<!-- Listen for a click event -->
<button v-on:click="..."></button>

<!-- Listen for a mouse movement event -->
<div v-on:mousemove="..."></div>

Event Handlers

There are two primary ways to handle an event:

Inline Handlers: For very simple logic, you can write JavaScript directly in the HTML attribute. The code has access to the component's data and methods.
```
<button v-on:click="age++">Add a Year</button>
<button v-on:click="age--">Subtract a Year</button>
```
Method Handlers: For more complex logic, it's best to bind the event to a method defined in the methods object of your Vue instance. This keeps your templates clean.
```
// In your Vue instance
// ...
methods: {
  add() {
    this.age++;
  }
}
```
```

<button v-on:click="add">Add a Year</button>
```

Note
When binding directly to a method name without passing arguments (e.g., v-on:click="add"), you can omit the parentheses (). Vue automatically knows to call the method when the event occurs.

Passing Parameters to Methods

You can pass custom arguments to your methods from the template. When you do this, you must include the parentheses ().

<!-- Pass a number to the method -->
<button v-on:dblclick="add(10)">Add 10 Years</button>

// The method now accepts a parameter
methods: {
  add(increment) {
    this.age += increment;
  }
}

The Native Event Object

When a method is used as an event handler, Vue automatically passes the native DOM event object as the first argument.

methods: {
  updateXY(event) {
    // We can access properties of the event object
    console.log(event.offsetX, event.offsetY);
    this.x = event.offsetX;
    this.y = event.offsetY;
  }
}

Shorthand Syntax

Vue offers a convenient shorthand for v-on: using the at-symbol (@).

<!-- Standard syntax -->
<button v-on:click="add"></button>

<!-- Shorthand syntax -->
<button @click="add"></button>

Introduction & Project Setup

How gang, welcome to your fifth Vue.js tutorial. In this video I want to talk about events.

Okay, so I'm pretty sure you know what DOM events already are: things like click or mouseover events, and we can react to those in JavaScript, right? In normal JavaScript. Now in this video I want to show you how we can react to those different types of events in Vue.js, right? So say we have a couple of buttons and we want to react to click events, I'm going to show you how we can do something like that in Vue.js.

So right now I've just emptied out this div right here, and inside the instance I've just got this one property in the data which is age, and I want to output this now to the browser. So I'm just going to do a p tag and then inside here I'm going to say, "My age is" in double curly braces, age, right? So this is going to output now the age to the browser, which is currently 25. Okay, cool.

So now what I want to do is create a couple of buttons which is going to either add one to this age or subtract one from this age, right? So let's add those buttons. Inside this one I'm going to say "Add a year", and down here, going to do another button which is going to say "Subtract a year". Okay, so if we click this button I want to add one to this property. If we click this button I want to subtract one from this age property. How are we going to do that?

Handling Click Events with v-on

Well, we need to listen to these DOM events, these click events. And the way we do that in Vue.js is by using the directive v-on. Okay, so remember a directive is just something we pop in here like an instruction. This time it's v-on, then we do a colon and say what type of event we want to listen to. Is this a mouseover event, is this a click event, a double click event, etc. And there's a whole list of different DOM events. I'm going to show you where you can get those from later on.

In this case I just want to do a simple click event, right? Then I'm going to set that equal to, and then in quotations, we can fire some code within these quotations, right? So whatever we put in here, Vue.js is going to execute when this button is clicked. So I can access the age right here, this variable, inside here and add one to it. So I could say age++ just like that.

And I could do something similar down here. If I copy this, add a click event to this button, this time I want to take one from the age, age--, which takes one. This should work. Let's have a look in a browser. If we add a year, yep, it's going up. If we take a year, yep, it's going down. So this is working, this code is being fired when we listen for a click event, and we do that using the v-on directive.

Refactoring Logic to Methods

Now, we don't have to fire the code inside these quotations right here. We can kind of externalize this code. We can add the code into methods right here on the Vue instance. So say for example, we want to fire a method called add and we want to fire a method called subtract when these buttons are clicked, then we can do that. Let's just save this and create these methods right here on the instance.

First of all, add is going to be a function and it's going to do exactly the same thing. It's going to access the age, so I can say this.age and then I can say ++, right, that's going to add one to the age. I'm going to do the exact same thing for subtract, and this time it's going to be this.age--. Okay, so that's going to take one away from the age.

Now, if we try this out in a browser, then refresh. I'm going to add one, yep it still works. Oh, subtract doesn't work and that is because sub... we've spelled it incorrectly. So save that. Now subtract works. Cool.

Okay, so we don't have to write our code here. We can just externalize our code into the Vue instance itself. Then we can just call these different methods from here. And notice I do not have to add on the parentheses right here, right? Vue.js knows that when we get a click event, it's going to fire this function. All right, it expects some kind of code to execute. So it's going to look for that function without adding these parentheses, right? We only have to add the parentheses if we're just outputting the result of a function right here, for example test(). Right, then we have to do it. But in this case, when we're attaching it to an event, we don't have to add it on.

Passing Parameters to Methods

Okay, cool. So what if now we want to react to a different kind of event? Let's say we want to react to a double click. I'm going to create two more buttons and down here I'm going to say on:dblclick, right? So these are double click events, dblclick. And this time I want to add 10 years or subtract 10 years. Okay, so when these buttons are double clicked, we either add 10 or subtract 10 from the age.

Now we could make new methods here saying like add10 and subtract10 and place them down here, but I don't see the point. I just want to keep these methods right here. So what we'll do is just add on the parenthesis to pass through a parameter, right? So in these cases, we're adding or subtracting one, so we're passing through a parameter. And in these cases we're going to add or subtract 10, like so. That makes sense, right? And then we can call the same functions and just pass through these different values, which we can take right here. So we'll either take an inc or dec, right? So we're taking that value that we want to either decrease by or increment by. So instead of doing ++ we'll say += inc, and then -= inc. So this is either going to be 1 or 10, and 1 or 10. So it's going to either add one or add 10 to the age, or minus one or minus 10 from the age.

So this now should work if we check it out. So this still works. This doesn't work... so that's not working. Let's check out what's happened. Subtract one... let's have a look. Subtract, this... Oh, that's why because we need to say dec. So subtract here still works. Adds one. Now if we single click on this, doesn't do anything. If we double click, adds 10. Subtracts 10. Cool, so this all works. That's fine.

The `mousemove` Event and Event Object

Now I want to show you one more event, and that is going to be a mousemove event. And this time what I want to do is just add some more HTML down here. I want to add a div and this ID is going to be equal to canvas right here. Okay. Now what I want to do is quickly add some styles to style this canvas. So I've already got these on my GitHub, I'm just going to copy them and paste them in right here. You can get them from the repository as well. Just adding a width, some padding, text-align, and a border. And if we view this in a browser you're going to see it, right? This thing right here.

So what I want to do is track the movement of my mouse within this canvas, kind of box, and I want to output the coordinates of my mouse relative to this box in the center right here. So let's go to the index first of all and I want to output two variables. These variables are going to be called x and y. Now I've not created these just yet, so let's go and create them. Let's go to the app and add them in the data property. So x is going to start off at zero and y is also going to start off at zero. So if we check these out now, we're going to see zero and zero in a box. I want these to update as I move my mouse around. So how the heck are we going to do that?

Well let's add an event listener right here to this canvas. So we do that by saying v-on: then the event type, which is going to be mousemove. So whenever the mouse moves over this canvas, right? And this is going to be equal to a function which we're going to call updateXY. So if I save that, now we need to define that function right here. So I'll say updateXY which is going to be a function.

Right then, to output the coordinates I need access to the event object, right? So when we perform a DOM event, like a click event or a move event, then we get an event object, we get access to it, and we can pass it through right here. Right, we don't need to explicitly pass it through here, we don't need to say event or anything like that. We get that automatically when there's an event. So what we can do is log this to the console just to have a look at it and see what properties we've got available to us. I'll say console.log(event) and I'm going to just check this out in a browser. So that when I move over this, you can see this event, it's a mouse event. And if you expand one of these things right here, all these different properties we have access to. Now the ones I want are the offset properties: offsetX and offsetY, which are the coordinates from this top left down corner, right? So I can access that by saying event.offsetX and event.offsetY.

So let's update those x and y properties with this information. Let's go back here and say this.x, which is going to refer to this thing right here, is equal to the event.offsetX, and then this.y is going to be equal to the event.offsetY. Makes sense? So now every time we move our mouse this event is going to update and we're going to set the x property and the y property equal to the new offsetX and offsetY property on that event, and it's going to update therefore in the canvas the numbers that we see. So let's save this and check it out in a browser. And now when we move around, it's updating those properties right there.

The `@` Shorthand and Conclusion

Okay, pretty cool. So just very quickly, one more thing I want to show you. We don't have to write v-on all the time. We can just say @click or @dblclick, right? That is like the shorthand for the v-on: right there. Now, I'm not going to do this, I'm going to use v-on just so it's explicit in what I'm going to be doing, all right, and there's no confusion. But just let you know you can use that instead. So there we go. I'm just going to save this and show you in fact that this still works. So if we add one, still working. Add 10, still working. All right, so there we go. That is events in a nutshell. In the next tutorial, we're going to take these events one step further.