VueJS - Eventos

v-on es el atributo agregado a los elementos DOM para escuchar los eventos en VueJS.

Haga clic en Evento

Ejemplo

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "displaynumbers">Click ME</button>
         <h2> Add Number 100 + 200 = {{total}}</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : ''
            },
            methods : {
               displaynumbers : function(event) {
                  console.log(event);
                  return this.total =  this.num1+ this.num2;
               }
            },
         });
      </script>
   </body>
</html>

Salida

El siguiente código se utiliza para asignar un evento de clic para el elemento DOM.

<button v-on:click = "displaynumbers">Click ME</button>

Hay una abreviatura de v-on, lo que significa que también podemos llamar al evento de la siguiente manera:

<button @click = "displaynumbers">Click ME</button>

Al hacer clic en el botón, llamará al método 'displaynumbers', que toma el evento y lo hemos consolado en el navegador como se muestra arriba.

Ahora revisaremos un evento más.

Ejemplo

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : '',
               styleobj : {
                  width:"100px",
                  height:"100px",
                  backgroundColor:"red"
               }
            },
            methods : {
               changebgcolor : function() {
                  this.styleobj.backgroundColor = "green";
               },
               originalcolor : function() {
                  this.styleobj.backgroundColor = "red";
               }
            },
         });
      </script>
   </body>
</html>

En el ejemplo anterior, hemos creado un div con ancho y alto de 100px. Se le ha dado un color de fondo rojo. Al pasar el mouse por encima, cambiamos el color a verde y al hacerlo, cambiamos el color de nuevo a rojo.

Por lo tanto, durante el mouseover, un método se llama changebgcolor y una vez que sacamos el mouse del div, se llama un método originalcolor.

Esto se hace de la siguiente manera:

<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>

Se asignan dos eventos (mouseover y mouseout) al div como se muestra arriba. Hemos creado una variable styleobj y le hemos dado el estilo requerido para ser asignado al div. La misma variable se enlaza al div usando v-bind: style = ”styleobj”

En changebgcolor, estamos cambiando el color a verde usando el siguiente código.

changebgcolor : function() {
   this.styleobj.backgroundColor = "green";
}

Usando la variable stylobj, estamos cambiando el color a verde.

Del mismo modo, el siguiente código se utiliza para volver a cambiarlo al color original.

originalcolor : function() {
   this.styleobj.backgroundColor = "red";
}

Esto es lo que vemos en el navegador.

Cuando pasamos el mouse, el color cambiará a verde como se muestra en la siguiente captura de pantalla.

Modificadores de eventos

Vue tiene modificadores de eventos disponibles en el atributo v-on. Los siguientes son los modificadores disponibles:

.una vez

Permite que el evento se ejecute solo una vez.

Sintaxis

<button v-on:click.once = "buttonclicked">Click Once</button>

Necesitamos agregar un operador de punto mientras llamamos a los modificadores como se muestra en la sintaxis anterior. Usémoslo en un ejemplo y entendamos el funcionamiento del modificador once.

Ejemplo

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
         Output:{{clicknum}}
         <br/><br/>
         <button v-on:click = "buttonclicked"  v-bind:style = "styleobj">Click Me</button>
         Output:{{clicknum1}}
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               buttonclickedonce : function() {
                  this.clicknum++;
               },
               buttonclicked : function() {
                  this.clicknum1++;
               }
            }
         });
      </script>
   </body>
</html>

Salida

En el ejemplo anterior, hemos creado dos botones. El botón con la etiqueta Hacer clic una vez ha agregado el modificador una vez y el otro botón no tiene ningún modificador. Esta es la forma en que se definen los botones.

<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
<button v-on:click = "buttonclicked"  v-bind:style = "styleobj">Click Me</button>

El primer botón llama al método "buttonclicked una vez" y el segundo botón llama al método "buttonclicked".

buttonclickedonce : function() {
   this.clicknum++;
},
buttonclicked : function() {
   this.clicknum1++;
}

Hay dos variables definidas en clicknum y clicknum1. Ambos se incrementan cuando se hace clic en el botón. Ambas variables se inicializan a 0 y la pantalla se ve en la salida anterior.

Al hacer clic en el primer botón, la variable clicknum aumenta en 1. En el segundo clic, el número no se incrementa ya que el modificador le impide ejecutar o realizar cualquier elemento de acción asignado al hacer clic en el botón.

Al hacer clic en el segundo botón, se lleva a cabo la misma acción, es decir, se incrementa la variable. Con cada clic, el valor se incrementa y se muestra.

A continuación se muestra el resultado que obtenemos en el navegador.

.evitar

Syntax

<a href = "http://www.google.com" v-on:click.prevent = "clickme">Click Me</a>

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <a href = "http://www.google.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  color: '#4CAF50',
                  marginLeft: '20px',
                  fontSize: '30px'
               }
            },
            methods : {
               clickme : function() {
                  alert("Anchor tag is clicked");
               }
            }
         });
      </script>
   </body>
</html>

Output

Si hacemos clic en el enlace clickme, se enviará una alerta como "Se hizo clic en la etiqueta de anclaje" y se abrirá el enlace. https://www.google.com en una nueva pestaña como se muestra en las siguientes capturas de pantalla.

Ahora bien, esto funciona de forma normal, es decir, el enlace se abre como queremos. En caso de que no queramos que se abra el enlace, debemos agregar un modificador 'prevenir' al evento como se muestra en el siguiente código.

<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>

Una vez agregado, si hacemos clic en el botón, enviará un mensaje de alerta y ya no abrirá el enlace. El modificador de prevención evita que se abra el enlace y solo ejecuta el método asignado a la etiqueta.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  color: '#4CAF50',
                  marginLeft: '20px',
                  fontSize: '30px'
               }
            },
            methods : {
               clickme : function() {
                  alert("Anchor tag is clicked");
               }
            }
         });
      </script>
   </body>
</html>

Output

Al hacer clic en el enlace, mostrará el mensaje de alerta y ya no abre la URL.

Evento - Modificadores de teclas

VueJS ofrece modificadores clave basados ​​en los cuales podemos controlar el manejo de eventos. Considere que tenemos un cuadro de texto y queremos que el método sea llamado solo cuando presionamos Enter. Podemos hacerlo agregando modificadores clave a los eventos de la siguiente manera.

Sintaxis

<input type = "text"  v-on:keyup.enter = "showinputvalue"/>

La clave que queremos aplicar a nuestro evento es V-on.eventname.keyname (como se muestra arriba)

Podemos hacer uso de múltiples nombres de clave. Por ejemplo,V-on.keyup.ctrl.enter

Ejemplo

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter your name"/>
         <h3> {{name}}</h3>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name:'',
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.name=event.target.value;
               }
            }
         });
      </script>
   </body>
</html>

Salida

Escriba algo en el cuadro de texto y veremos que se muestra solo cuando presionamos Enter.

Eventos personalizados

El padre puede pasar datos a su componente usando el atributo prop, sin embargo, necesitamos informar al padre cuando hay cambios en el componente hijo. Para ello, podemos utilizar eventos personalizados.

El componente principal puede escuchar el evento del componente secundario usando v-on atributo.

Ejemplo

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div id = "counter-event-example">
            <p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
            <button-counter
            v-for = "(item, index) in languages"
            v-bind:item = "item"
            v-bind:index = "index"
            v-on:showlanguage = "languagedisp"></button-counter>
         </div>
      </div>
      <script type = "text/javascript">
         Vue.component('button-counter', {
            template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
            data: function () {
               return {
                  counter: 0
               }
            },
            props:['item'],
            methods: {
               displayLanguage: function (lng) {
                  console.log(lng);
                  this.$emit('showlanguage', lng);
               }
            },
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
               languageclicked: "",
               languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
            },
            methods: {
               languagedisp: function (a) {
                  this.languageclicked = a;
               }
            }
         })
      </script>
   </body>
</html>

Salida

El código anterior muestra la transferencia de datos entre el componente principal y el componente secundario.

El componente se crea utilizando el siguiente código.

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

Hay un v-foratributo, que se repetirá con la matriz de idiomas. La matriz tiene una lista de idiomas. Necesitamos enviar los detalles al componente secundario. Los valores de la matriz se almacenan en el elemento y en el índice.

v-bind:item = "item"
v-bind:index = "index"

Para hacer referencia a los valores de la matriz, primero debemos vincularla a una variable y la variable se hace referencia mediante la propiedad props de la siguiente manera.

Vue.component('button-counter', {
   template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
   data: function () {
      return {
         counter: 0
      }
   },
   props:['item'],
   methods: {
      displayLanguage: function (lng) {
         console.log(lng);
         this.$emit('showlanguage', lng);
      }
   },
});

La propiedad props contiene el elemento en forma de matriz. También podemos referirnos al índice como -

props:[‘item’, ‘index’]

También hay un evento agregado al componente de la siguiente manera:

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

El nombre del evento es showlanguage y llama a un método llamado languagedisp que se define en la instancia de Vue.

En el componente, la plantilla se define de la siguiente manera:

template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',

Hay un botón creado. El botón se creará con tantos recuentos en la matriz de idiomas. Al hacer clic en el botón, hay un método llamado displayLanguage y el elemento en el que se hace clic en el botón se pasa como un parámetro a la función. Ahora el componente debe enviar el elemento en el que se hizo clic al componente principal para su visualización, lo que se hace de la siguiente manera:

Vue.component('button-counter', {
   template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
   data: function () {
      return {
         counter: 0
      }
   },
   props:['item'],
   methods: {
      displayLanguage: function (lng) {
         console.log(lng);
         this.$emit('showlanguage', lng);
      }
   },
});

El método displayLanguage llamadas this.$emit(‘showlanguage’, lng);

$emitse utiliza para llamar al método del componente principal. El método showlanguage es el nombre del evento dado en el componente con v-on.

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

Estamos pasando un parámetro, es decir, el nombre del idioma en el que se hizo clic al método de la instancia principal de Vue, que se define de la siguiente manera.

var vm = new Vue({
   el: '#databinding',
   data: {
      languageclicked: "",
      languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
   },
   methods: {
      languagedisp: function (a) {
         this.languageclicked = a;
      }
   }
})

Aquí, los activadores de emisión muestran lenguaje que a su vez llama languagedispde los métodos de instancia de Vue. Asigna el valor del idioma en el que se hizo clic a la variablelanguageclicked y lo mismo se muestra en el navegador como se muestra en la siguiente captura de pantalla.

<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>

A continuación se muestra el resultado que obtenemos en el navegador.