Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Vue.js Basics

Well done!

You have completed Vue.js Basics!

Sign up for Treehouse Back to Library

Basic Event Handling

5:53 with Treasure Porth

Learn 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.

v-on

A Vue directive used for event handling. Accepts events as arguments, such as:

  • click
  • dblclick
  • keypress
  • keydown
  • keyup
  • mouseover
  • submit

v-on Syntax Example

<div id="app">
  <h1 v-on:mouseover="functionToRun">Click Me!</h1>
</div>

 new Vue({
   el: '#app',
   data: {
     ...
   }, 
   methods: {
     functionToRun: function() {
      //Do stuff on mouseover
     }
   }
});

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up