VueJS 2.0

How to Handle Events in VueJS 2.0

How to Handle Events in VueJS 2.0
Written by Yogesh Koli

How to Handle Events in VueJs 2.0?

In this tutorial you will learn how to handle events in vuejs 2.0, in last tutorial on vuejs we have learn from very basic steps to get started with vuejs, event handling will be next steps we are going to have user interaction with our application, we will have few basic example to demonstrate few basic events.

If you want learn getting started tutorials you can read from following tutorial links:

VueJS 2.0 data binding, Listing Data, Render Select Field Options

VueJS 2.0 dynamic Attribute binding Class Name binding

What is Event in VueJS?

It is common concept in programming for the application, whenever user is going to interact with user interface for example click on something or type information or submit the information



 Using Events to Call VueJS Methods:

Let’s  get started by creating a simple To-List application where we are going to have following features:

  • Add Task in to the list
  • Remove Task from the list
  • Mark Task as completed
Have a look on above code line by line, you will see first thing in the body section we have a text box with the button where we have vuejs event handing, ex. v-on:click="addTask()". here are are using click event to call addTask() method, next we simply listing data using v-for directive.

also, look at the script section where we have added new property call, methods, which is used to add vuejs methods.

You can checkout the live example here – VueJS To-Do List Live Example

Conclusion of the tutorial:

What you learned from this tutorial:

  1. how to handle events in vuejs
  2. how to create methods in vuejs
  3. how to call methods with events in vuejs
  4. how to create a simple todo list application in vuejs

Next Tutorial – How to Use Computed Properties in VueJS

Previous Tutorial – VueJS 2.0 dynamic Attribute binding Class Name binding

 

Happy Learning!

About the author

Yogesh Koli

Yogesh Koli is a software engineer & a Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 5+ years of experience working with the front-end, back-end, web application development, and system design.