{"id":22682,"date":"2024-02-08T07:14:56","date_gmt":"2024-02-08T06:14:56","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/directivas-vue-v-on-gestiona-eventos-en-vue-js\/"},"modified":"2024-06-03T17:28:24","modified_gmt":"2024-06-03T16:28:24","slug":"directivas-vue-v-on-gestiona-eventos-en-vue-js","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/vue-v-on-directives-manage-events-in-vue-js\/","title":{"rendered":"Vue V-on Directives: Manage events in Vue.js"},"content":{"rendered":"<p>In web application development, it is crucial to be able to efficiently handle user interaction with the interface. Vue.js, one of the most popular frameworks for building user interfaces, offers a wide range of directives that allow us to control the behavior of our HTML elements and respond to specific events. One of these key directives is <strong>v-on<\/strong>.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-v-on-directives-manage-events-in-vue-js\/#%C2%BFQue_es_la_directiva_V-on_en_Vuejs\" >What is V-on directive in Vue.js?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-v-on-directives-manage-events-in-vue-js\/#Uso_de_la_directiva_V-on_para_manejar_eventos_en_Vuejs\" >Using the V-on directive to handle events in Vue.js<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-v-on-directives-manage-events-in-vue-js\/#1_Metodos_en_el_componente\" >1. Methods in the component:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-v-on-directives-manage-events-in-vue-js\/#2_Expresiones\" >2. Expressions:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-v-on-directives-manage-events-in-vue-js\/#3_Modificadores_de_eventos\" >3. Event modifiers:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-v-on-directives-manage-events-in-vue-js\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-v-on-directives-manage-events-in-vue-js\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-v-on-directives-manage-events-in-vue-js\/#%C2%BFPuedo_usar_directivas_v-on_en_cualquier_elemento_HTML\" >Can I use v-on directives on any HTML element?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-v-on-directives-manage-events-in-vue-js\/#%C2%BFComo_puedo_pasar_argumentos_a_un_metodo_utilizando_v-on\" >How can I pass arguments to a method using v-on?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-v-on-directives-manage-events-in-vue-js\/#%C2%BFEs_posible_utilizar_v-on_para_escuchar_eventos_personalizados\" >Is it possible to use v-on to listen to custom events?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_la_directiva_V-on_en_Vuejs\"><\/span>What is V-on directive in Vue.js?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In Vue.js, <strong>v-on<\/strong> is a board specialized in event management. This directive allows us to listen to events from the DOM and execute JavaScript code when those events occur. In other words, it allows us to bind methods or expressions to specific events in our HTML elements.<\/p>\n<p>The basic syntax of <strong>v-on<\/strong> it is simple. We simply add the directive to an HTML element followed by a tag indicating the event we want to listen to. For example:<\/p>\n<pre><code><button>Click here<\/button><\/code><\/pre>\n<p>In this case, we have used the directive <strong>v-on<\/strong> with the event <strong>click<\/strong> to bind the method <strong>showMessage<\/strong> to a button. When the user clicks the button, the code associated with the method will be executed <strong>showMessage<\/strong>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Uso_de_la_directiva_V-on_para_manejar_eventos_en_Vuejs\"><\/span>Using the V-on directive to handle events in Vue.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Directive <strong>v-on<\/strong> offers a wide variety of options for handling events in Vue.js. Some of the most used options are:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Metodos_en_el_componente\"><\/span>1. Methods in the component:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>We can directly bind methods defined in our component to specific events. For example:<\/p>\n<pre><code>methods: { showMessage() { alert(&#039;Hello from Vue.js!&#039;); } }<\/code><\/pre>\n<p>Then we can use the directive <strong>v-on<\/strong> to associate this method with the event <strong>click<\/strong>, as shown in the example above.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Expresiones\"><\/span>2. Expressions:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In addition to binding methods, we can also use expressions directly in the directive <strong>v-on<\/strong>. For example:<\/p>\n<pre><code><button>Increase counter<\/button><\/code><\/pre>\n<p>In this case, every time the user clicks the button, the counter value will be incremented by 1.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Modificadores_de_eventos\"><\/span>3. Event modifiers:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Vue.js also allows us to use event modifiers to customize its behavior. For example, we can use the modifier <strong>.prevent<\/strong> to prevent a link&#039;s default event from firing. This is especially useful when working with forms:<\/p>\n<pre><code><form>...<\/form><\/code><\/pre>\n<p>In this case, the method <strong>send form<\/strong> will be executed when the user tries to submit the form, but page reload will be prevented by using the modifier <strong>.prevent<\/strong>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Directive <strong>v-on<\/strong> Vue.js is a powerful tool to handle events and control user interaction in our applications. Whether we need to execute custom methods, use expressions, or apply event modifiers, Vue.js gives us the flexibility to create interactive and dynamic user experiences.<\/p>\n<p>At NelkoDev, we offer tutorials and resources related to Vue.js and other web development topics. If you want to deepen your knowledge in these technologies, be sure to visit our <a href=\"https:\/\/nelkodev.com\/en\/\">website<\/a>, where you will find a variety of educational content and practical examples.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFPuedo_usar_directivas_v-on_en_cualquier_elemento_HTML\"><\/span>Can I use v-on directives on any HTML element?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, you can use the v-on directive on any HTML element that supports events, such as buttons, links, forms, etc.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_pasar_argumentos_a_un_metodo_utilizando_v-on\"><\/span>How can I pass arguments to a method using v-on?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You can pass arguments to a method using the square brackets [] syntax and the event object. For example: v-on:click=&quot;myMethod(argument, $event)&quot;.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFEs_posible_utilizar_v-on_para_escuchar_eventos_personalizados\"><\/span>Is it possible to use v-on to listen to custom events?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, Vue.js allows us to define and listen to custom events using the v-on directive.<\/p>","protected":false},"excerpt":{"rendered":"<p>When developing web applications, it is crucial to be able to efficiently handle user interaction with the interface. Vue.js, one of the most popular frameworks for building user interfaces, offers a wide range of directives that allow us to control the behavior of our HTML elements and respond to specific events. One of the most [\u2026]<\/p>","protected":false},"author":1,"featured_media":22683,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1122],"tags":[205,563,551,565,564,566,562,796],"class_list":["post-22682","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-vuejs","tag-blog","tag-directivas","tag-eventos","tag-gestiona","tag-v-on","tag-vue","tag-vue-js","tag-vuejs"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=22682"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22682\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/22683"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=22682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=22682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=22682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}