Preview
Video Player
00:00
00:00
Basic Event Handling
5:53Learn about the Vue directive v-on, and how to use how to use it in conjunction with Vue methods to respond to user events, such as button clicks.
Most applications need to
deal with user interactions.
0:00
To engage with our content,
users need to click buttons,
0:04
enter information, and so on.
0:06
For these various user interactions,
Vue offers us a directive called v-on.
0:09
v-on accepts any of the browser's standard
events, click, double click, mouse enter,
0:14
key up, key down, key press, and so on.
0:19
It's called v-on because you can think
of it like saying, hey Vue on click,
0:22
or on double click, or on key up,
etc., do something, run a function.
0:28
Let's use this directive.
0:33
If you want to follow along,
0:36
we're going to use a new example
in the next couple of videos, so
0:37
be sure to download and open the new
project files from the link on this page.
0:40
Open up app.js, and
you'll see I've created a Vue instance
0:45
with several pieces of data that
make up the details of a book.
0:49
In the index.html, I have a template
where I've bound the title, author, and
0:53
summary from our Vue instance.
0:57
And as we did before,
the ID of our template matches
1:00
The value of the el property
in our Vue instance.
1:07
So if we open this up in a browser, we
can see all of our information displayed.
1:12
So let's add an event that alerts
Hello each time the h2 is clicked.
1:18
I'll start by adding the v-on
directive to the h2.
1:28
I'll follow v-on with a :, and
1:35
then specify the event that I wanna
listen for, in this case, a click.
1:37
Inside of these quotes,
1:44
I'll tell Vue which method I want
to run when the element is clicked.
1:45
When the h2 is clicked,
I want to run a method called sayHello,
1:50
which we will write in our Vue
instance in just a minute.
1:54
Note that the v-on directive
also has a short hand.
1:59
I can actually delete v-on and
just use and @ symbol here.
2:02
Again I won't be using shortcuts in this
course, but just know that it's an option.
2:08
Now, I need to create the sayHello method.
2:12
To create a method, we can add a property
called methods to our Vue instance.
2:16
I'll add that right after the data object.
2:24
Methods is an object on which we can
define any number of methods we wanna use.
2:31
Inside of the methods object, I'll save
an anonymous function to the property,
2:37
sayHello.
2:41
Inside of sayHello, And
2:45
this is just regular JavaScript,
I will alert Hello.
2:49
Now save, and refresh the browser.
2:53
Now whenever the header is clicked,
the sayHello method runs, and
2:58
the user is alerted, Hello.
3:02
Excellent.
3:03
Let's run through the flow of this one
more time to make sure you understand
3:07
what's happening.
3:10
In the template, we're saying when this
h2 is clicked, run the sayHello method.
3:12
The Say Hello method is defined inside
the method object in our Vue instance.
3:19
And the sayHello method contains
code that alerts the string, Hello.
3:25
Note that inside of a Vue method,
3:29
the keyword this gives you direct access
to the data object on our Vue instance.
3:31
So it's easy to reference data from
the data object within our method.
3:37
I'll show you what I mean.
3:42
Inside the sayHello method, I can alert
3:43
this.title, save, refresh the browser.
3:49
And now when the h2 is clicked,
3:55
whatever the value of the property
title is will be alerted.
3:57
So, title here refers to title here.
4:05
Now because this is all inside of
an object, your intuition might be
4:10
to refer to this dot data dot title.
4:15
But thanks to Vue magic,
4:19
you can access the value of title
simply by saying this .title.
4:21
Let's open up Chrome Dev Tools and
4:27
change the value of title like
we did in an earlier video.
4:29
I'll change the title to New Title.
4:35
I forgot.
4:44
Our Vue instance is actually called book.
4:46
Now when I click on title,
I see my new value.
4:57
Note that if you use ES6 arrow
functions inside a method here,
5:00
it won't work because it
changes the context of this.
5:04
So if I convert this to a fat arrow
function, when I click the header,
5:08
I'm going to be alerted, undefined.
5:13
And that's because now this here no
longer refers to the Vue instance.
5:15
So to get around this, you could
reference the Vue instance by name.
5:21
So we've name our instance book.
5:26
So, I could do this book.title.
5:31
Refresh and that works.
5:35
However, the view documentation recommends
5:39
avoiding using arrow functions when
defining methods on a Vue data object.
5:41
So, I'll undo to revert to
a more traditional syntax.
5:46