To understand this tutorial, you should be familiar with events in JavaScript. We’ll learn how to change or prevent an element’s behavior by listening to the event, intercepting it, and handling it using the methods described below. In this article, we’ll cover the basics of handling events in Vue, and we’ll learn how to apply event handling in a real-world application. Adding these types of events provides a rich UX for the end user. There are several different ways to handle events in Vue, but the best solution will depend on the type of event you are listening to, how you want to react to the event, and what you hope to achieve with the event.įor example, if a user clicks a button, submits a form, or even just moves their mouse, you might add a reaction, like showing an animation or calling a function. To drive these types of interactions on our website or web application, we can use event handling. When building a dynamic website, you need to listen for different types of events. In my spare time, I contribute to open source projects. ![]() I am also passionate about web accessibility and building communities. To retrieve the code of a key, you can go to the site "".Amarachi Amaechi Follow I am a frontend developer with a passion for designing clean and intuitive applications for the web and an eye for design with a user-driven approach to development. You can also make key combinations with the keys: ".ctrl", "alt", ".shift" and ".meta" (Windows key, apple, cmd, call it as you like )).Įxample of combination with these keys, if I do "control" + "a" (code: 65):Īnd they can be chained together. Some code have an alias, for the "enter" key I will do this: įor example, if I want to run my callMethod method when I press the "1" key (code 49) in the text field I will do this: ), they can only be used on key-specific events (keyup, keydown. These instructions will be used as modified events, but instead of following the standard javascript events (onclick etc. When you want to capture the keyboard keys that have been typed by the user, VueJS provides specific instructions called "key modifiers". once ensure that the event is launched only once.Įvent modifiers can be combined when they are written to the string. self does not start the function on this element unless the event is indeed on this element and not on one of the elements "son" capture captures the events that would occur in the "child" elements prevent prevents the submit event from reloading the page ![]() Just put one of the following keywords after the name of the event in your v-on statement: To avoid this work, and to simplify your code, VueJS has planned what is called an "event modifier" for the v-on function. Often when you want to do a processing following an event, you call a javascript method like event.preventDefault() for example. The callMethod function will get the "title" and display in by putting "Hello: " at the start. You can also do it with the "change" event, to launch the function each time the text in the input field change:Īnd with the "keyup" event, you can trigger the function each time you use your keyboard on the selected element: You can see here v-on:click="callMethod" it allows us to tell VueJS "on this input element,for each "click" event,you will launch the "callmMethod" function. When an event is triggered on a DOM element, then the associated function will be unlinked.įor exemple, the following code (/src/App.vue): ![]() In order to observe certain events under VueJS, the "v-on" function can be used. As for the lessons before, we start from the code of the previous tutorial.Įvents allow you to trigger a particular process when an action happens during an event (a click in an area, a mouse over a zone, when you press a key). We now meet to talk about the events with VueJS.
0 Comments
Leave a Reply. |