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

Contenido del curso

Introducción

CLI y Dev Tools

Manipulación del DOM

REST y HTTP

Sistema de Componentes

Vue Router

Extendiendo VueJS

Clases, Animaciones y Transiciones36

38
Animaciones CSS3 con transiciones en Vue
06:54 min

Vuex

Nuxt.js

Deploy a Producción con Now

Conclusiones

50
Cómo hacer deploy de tu app Vue.js
00:49 min

Bonus

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:12

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

Curso Profesional de Vue.js 2

Clase 17 de 53

Clase 17 / 53

Recursos

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.

Introducción

Aplicaciones profesionales con Vue.js

Vue como framework progresivo y reactivo

CLI y Dev Tools

Instalación de Vue.js: Node, Dev Tools y CLI

Crear una aplicación Vue con CLI y webpack

Cómo funciona webpack.config.js

Babel: transpilador de JavaScript moderno

ESLint con Standard JS: linteo automático en webpack

Configuración de Sass y Bulma en Vue

Cómo configurar Pug en Vue con webpack

Diseño de Mockups: Práctica y Colaboración en Comunidad

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

Expresiones en Vue: sintaxis doble llave

Diferencia entre v-show y v-if en el DOM

Qué es data binding en Vue.js

Computed properties en Vue.js: cómo crearlas

Qué son los watchers de Vue

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

Cómo construir una interfaz de búsqueda completa en Vue

Manipulación del DOM con Vue.js: Práctica y Ejercicios

REST y HTTP

Creando servicios HTTP con Fetch API

Configurar Trae con Fetch para peticiones HTTP

Cómo conectar servicios a componentes Vue

Sistema de Componentes

Cómo crear componentes en Vue

Componentes Layout en Vue con Bulma

Reactividad en Vue: $set y Object.assign

Hooks del ciclo de vida en Vue.js

Comunicación padre-hijo con props en Vue

Eventos en Vue: comunicar hijo a padre

Slots: HTML dinámico en componentes Vue

Plugin Event Bus: comunicar componentes sin relación en Vue

Vue Router

Vue Router para single page applications

Instalación de View Router paso a paso

<target-language> Spanish </target-language> Navegación programática con Vue Router

Extendiendo VueJS

Vue modifiers: cómo simplificar eventos

Filtros en Vue: conversión milisegundos a minutos

Directivas personalizadas en Vue: v-blur

Mixins Vue: compartir lógica entre componentes

Clases, Animaciones y Transiciones36

Animaciones CSS3 con transiciones en Vue

Vuex

Cómo Vuex centraliza estados en Vue

Instalación de Vuex con estado único

Cómo usar mutations y commit en Vuex

Getters de Vuex: mapGetters y store sincronizado

Cómo dispatch ejecuta actions asincrónicas en ViewX

Instalación de Viewex en Platzi Music

Nuxt.js

Server Side Rendering: ventajas y limitaciones

Instalación y configuración de Next.js en View

Copiar componentes Vue.js a Nuxt con SSR

Deploy a Producción con Now

Instalación y login de Now para Vue.js

Deploy de aplicación React con Now

Conclusiones

Cómo hacer deploy de tu app Vue.js

Bonus

Internacionalización con Vue I18n: configurar multiidioma

Configuración de unit tests en Vue con webpack

JWT con Vue Router: autenticación completa

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