Básicos

• cada vez que se ejecuta un método, Vue hace internamente una recarga de la página y todos los métodos que se encuentren interpolados se vuelven a llamar, aunque no tengan nada que ver con el otro método ejecutado. Esto se debe a que, por si acaso sí tuvieran que ver, Vue los vuelve a ejecutar para "mantener actualizados" todos los valores.
• por ello, mejor interpolar con computed properties (sólo se vuelven a ejecutar/llamar si alguna de las variables globales que contenga cambia su valor).

• Computadas: para renderizar algo en el template dinámicamente.
• Watchers: para ejecutarse sólo cuando le ocurra algo concreto a algún elemento del data/setup.

input

• Ejemplo: ejecutar función sin argumentos para mostrar en pantalla el nombre introducido por un usuario.
  • al llamar a función sin argumentos:
    • el evento será el argumento por defecto (es un objeto)
    • proporciona información sobre el elemento HTML en el que ocurrió ese evento
    • ejemplo:
      • Template: < input type="text" v-on:input="setName" />

        (Evento de tipo input)

      • Data: data() {return name: ''}
      • Función: setName(event) { this.name = event.target.value }
      De esta forma, al llamar a la función sin argumentos (mirar arriba en Template), coge por defecto
      el evento (evidentemente hay que pasarle un parámetro para que acceda al evento, como se ve arriba en Función)
      y así accedemos al valor del elemento html (input) donde ocurre el evento (input) y establecemos que su value es la variable name, retornada en el data()
  • Si quisiéramos añadir argumentos además del evento, vue nos proporciona $event para ello:
    • Template: < input type="text" v-on:input="setName($event, 'Martínez')" />
    • Data: data() {return name: ''}
    • Función: setName(event, lastName) { this.name = event.target.value }
• v-model
  • "Atajo" de Vue para hacer a la vez que el value del input sea dinámico (v-bind:value="whateverName") y asignar al evento input un método que settée esa variable (v-on:setName)
  • Ese concepto se llama Two way binding (enlazar con variables y manejo de eventos)
  • v-model="whateverName"

Prevenir comportamiento del evento (ej.: submit):

• preventDefault() (Vanilla JavaScript). Ej.: methods: {
submitForm(event) { event.preventDefault(); alert('Hello'); }
• Vue modifiers:
  • .prevent
  • otros:
    • para click
      • .right (ej. click.right, ejecuta el evento click al clickar el botón derecho)
      • .left
      • .middle
      • etc.
    • para keyup (teclas)
      • .enter (ej. :keyup.enter="confirmName"), solo ejecuta al pulsar la tecla Enter
      • etc.

• Solo se actualiza una vez el contenido de la variable
• Ej. contador que queremos muestre su estado inicial y su estado actualizado.
  < p v-once>Starting: {{counter}}< /p>
< p>Result: {{counter}}< /p>

• Diferencia con v-if:
  • v-show oculta ( display: none; ) el elemento, pero está presente y lo muestra si se cumple la condición
  • v-if elimina el elemento del DOM y lo añade si se cumple la condición

• v-for="(item, index, key) in items" :key="item.id"
  • index: índice del elemento en el array/objeto
  • key: nombre de la propiedad (si iteramos sobre un objeto) (no confundir con el atributo :key )
• :key="item.id"
  • Fundamental para diferenciar los elementos y que no se mezclen/pierdan valores
  • Así ayudamos a Vue a no tener problemas de rendimiento por detrás