Event Handling

At this point, this chapter has referenced only the click event, however, there are many more. Event handlers must be bound with v-bind or @ if you are to reference a function in your Vue Instance.

index.html

<div id="app">
  <button @click="showAlert">A Call to Action Button</button>
</div>

app.js

var vm = new Vue({
  el: '#app',
  methods: {
    showAlert() {
      alert('Hey, look at me!');
    },
  },
});

Since the click event was registered via v-bind or @ to the button, clicking on that button will display an alert to the user. You can even pass arguments into the click event inline:

index.html

<div id="app">
  <button @click="showAlert('Some string.')">A Call to Action Button</button>
</div>

app.js

var vm = new Vue({
  el: '#app',
  methods: {
    showAlert(string) {
      alert(string);
    },
  },
});

This will display an alert with the text, “Some string.” Other events include submit and keyup. With submit, executing a method when an HTML <form> has been submitted.

<form @submit="someFunction">
...
</form>