So today we look into events. So what are events? And what are different types of events? And what are some of the events that we can get started with. So before we begin, as usual, the code will be available on the get repository. So with that said, let's get started.
So one main example that we can use to jump into events is for buttons, right? So buttons, if we have a button that says, click me, and you want to run a function when the button is clicked, so you know how to add functions in view. We discussed about it. So we can use methods that says, clicked, have function and inside this function, we get an alert. Right? Now, what do I do to make sure that the method clicked, runs whenever the button is clicked?
So for that, we can use something called as events in plain JavaScript, you would use something such as on click, but in Vue JS you would use beyond click and oh, it shows us Write up, clicked. So we on his editor used for events. So we on click binds this function, click on to this button. So whenever the button is clicked, or whenever the event click happens on this button, this method is done. So we'll save it. And let's check it out.
Click me, right click, the button was clicked. Awesome. All right, now we can do much more than just displaying an alert. Suppose we have a counter counter. I know what I want is, whenever the button is clicked, I want the counter to increase. So whenever it is clicked this counter plus plus.
And he don't click me. The counter increases whenever I click the button, right. So now since this counter plus plus is just a single line, but since this increment is just one line, it doesn't need a specific function for it or specific method for it. It's To have a method for all these properties, because when someone else comes in, they know that a particular function is happening. Or when if you want to do much more than just increasing the counter, you could easily add it. But so just to show you that it can also be done, we can create, we can remove the click method from here, and we can just increment the counter right here.
So if I refresh, it still works. So if it's a single an operation, we can just do it from here, directly or through method, right? One more neat thing we what we can do is we can also use double click. So in JavaScript you have on click and on double click right. So similarly in view, to use double click, we need to say V on double click. So what happens is whenever I double click then when the value increases.
All right, that's it for this introduction of events. In the next lecture, we'll look into different types of events. events and what all we can do. And once again, this whole code will also be available on GitHub. So that's that. Alright, see you the next one.