Eventos Vue: directiva v-on y métodos format

La interacción del usuario define la experiencia. Con eventos en Vue puedes responder a clics, formularios y cargas del navegador de forma clara y mantenible. Aquí verás cómo enlazar la directiva v-on, organizar funciones en methods y transformar textos con split, join y toUppercase, reforzando la manipulación del DOM, watchers, computed e inputs.

¿Cómo manejar eventos con la directiva v-on en Vue?

Los eventos son, junto con los inputs, la vía de interacción del usuario con la aplicación. Con la directiva /v-on/ enlazas un evento del browser a un método del view model de forma explícita y legible.

¿Dónde declarar methods y para qué se usan?

• Define funciones dentro del objeto /methods/.
• Un método no siempre está ligado a un evento.
• Puedes reutilizar métodos desde otros métodos, watchers o computed properties.

¿Cómo enlazar un click a un método con v-on?

• Usa la sintaxis: v-on:click="nombreDelMetodo".
• El argumento tras los dos puntos es el tipo de evento del browser.
• El valor es el nombre del método declarado en methods.

<!-- Template -->
<input v-model="name" placeholder="Escribe tu nombre" />
<button v-on:click="format">format</button>
<p>{{ formattedName }}</p>

// Script
export default {
  data() {
    return {
      name: '',
      formattedName: ''
    }
  },
  methods: {
    format() {
      // Implementación descrita en el contenido
    }
  }
}

¿Cómo formatear textos con split, join y toUppercase?

La idea es formatear una frase reemplazando espacios por guiones y, opcionalmente, convertir todo a mayúsculas. Para ello se encadenan métodos nativos de JavaScript sobre un string y un array.

¿Qué hacen split y join en este flujo?

• split(' '): separa el string por espacios y devuelve un array.
• join('-'): une el array usando guiones y devuelve un string.
• Resultado: reemplazas espacios por guiones de forma controlada.

methods: {
  format() {
    // 1) separar por espacios -> array
    const parts = this.name.split(' ')

    // 2) unir con guiones -> string
    const withHyphens = parts.join('-')

    // 3) convertir a mayúsculas (opcional)
    this.formattedName = withHyphens.toUpperCase()
  }
}

• Clave: el valor formateado se asigna a una propiedad reactiva, por ejemplo, formattedName.
• Así puedes mostrarlo en un párrafo y validar que el evento click dispara el formateo.

¿Qué errores comunes y atajos evitar y aprovechar?

Trabajar con nombres coherentes evita fallos. Además, hay atajos que simplifican la escritura de directivas.

¿Cómo evitar errores de nombre en variables?

• Usa un único nombre en todas partes: data, template y método.
• Un pequeño typo como escribir "forma name" en lugar de "format name" rompe el flujo.
• Renombrar a formatted name puede dar más claridad a la intención.

¿Qué otros eventos del browser puedes usar?

• No solo click: también submit en formularios.
• load en imágenes u otros elementos del browser.
• Cualquier evento soportado por JavaScript es enlazable con v-on.

¿Cuál es el shorthand de v-on?

• Puedes escribir @evento en lugar de v-on:evento.
• Ejemplo: @click="format" es equivalente a v-on:click="format".
• Este atajo mantiene el código más breve y legible.

En conjunto, has conectado eventos del usuario con funciones en methods, transformado strings con herramientas nativas de JavaScript y renderizado resultados en el DOM. Si te quedó alguna duda o quieres compartir tu ejemplo con v-on y @, cuéntalo en los comentarios.