VueJS – Templates y eventos

En el capítulo anterior vimos como crear un componente de manera sencilla.
Hoy veremos (en base al ejemplo que ya tenemos) algunas de las directivas de VueJS, como v-if, v-else, @click, y la creación de métodos auxiliares.

Este será el código con el que trabajaremos hoy:

<html>
  <body>
    <div id="components-demo">
      <button-counter></button-counter>
    </div>
  </body>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  
  <script>
    Vue.component('button-counter', {
	  methods: {
		reset : function() {
			this.setTo(0);
		},
		setTo : function(number) {
			this.count = number;
		}		
	  },
      data: function () {
        return {
          count: 0
        }
      },

      template: 
	  `<div>
   		    <button v-on:click="count++">
				<span v-if="count==0">Púlsame</span>
				<span v-if="count!=0">Me ha pulsado {{ count }} </span>
				<span v-if="count==1">vez.</span>
				<span v-if="count>1">veces.</span>
			</button><br /><br />
			<button @click="reset">Reset</button>
			<button @click="setTo(5)">establecer en 5</button>
			<br /><br >
			<template v-if="count % 2">
			  <small>Se pulso un numero de veces PAR</small>
			</template>
			<template v-else>
			  <small>Se pulso un numero de veces IMPAR</small>
			</template>			
		</div>`
    })
    
    var app = new Vue({ el: '#components-demo' });
  </script>
</html>

La única diferencia radica en la propiedad ‘template’, que tiene un poco mas de elaboración, y en la propiedad ‘methods’, las cuales explicaremos a continuación:

Templates

<button v-on:click="count++">
	<span v-if="count==0">Púlsame</span>
	<span v-if="count!=0">Me ha pulsado {{ count }} </span>
	<span v-if="count==1">vez.</span>
	<span v-if="count>1">veces.</span>
</button>

vamos a concentrarnos en las directivas v-if. Estas renderizan o no el tag que las contienen si la condición que tienen es verdadera.
En este ejemplo se utiliza para mejorar la visualización de la etiqueta del botón, siendo esta:

  • “Púlsame” si todavía no se ha pulsado el botón,
  • “Me ha pulsado 1 vez.” cuando pulsas por primera vez (ver la lógica utilizada para imprimir “vez.” o “veces.”)
  • “Me ha pulsado .. veces” si se pulsó mas de una vez.

Nótese que esta directiva solo se aplica al tag que la contiene. Si quisieramos aplicarlo a varias lineas HTML entonces tenemos que englobarlos dentro de un tag template, como se puede ver a continuación:

	<template v-if="count % 2">
	  <small>Se pulso un numero de veces PAR</small>
	</template>
	<template v-else>
	  <small>Se pulso un numero de veces IMPAR</small>
	</template>	

Eventos

Para asignar eventos a botones utilizamos la directiva v-on:click (que se puede abreviar como @click) y lo que hace es llamar a un método cuando clickeamos en un botón.

	<button @click="reset">Reset</button>
	<button @click="setTo(5)">establecer en 5</button>

Vamos a detenernos en @click=”reset” y “setTo(5)”, y (v-on:click=”count++” no merece mayor explicación).
Aquí lo que está haciendo es llamar a los métodos “reset” y “setTo”,los cuales definimos en la propiedad “methods”.
Estos métodos podremos llamarlos tanto desde el template, como dentro del componente (ej en reset() llamamos a this.setTo(0)). Tambien incluyo un ejemplo “setTo”, en el que podemos ver como le pasamos un parámetro.

El código funcionando a continuación:

Y esto es todo por hoy, en el próximo capitulo vamos a ver un poco mas de métodos, para optimizar mejor lo que hicimos hoy, y el renderizado de listas. ¡Hasta la próxima!