Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Options API: Métodos
Veamos cómo definir métodos para nuestro componente, usando Options API.
Definiendo Métodos en Vue
Nosotros podemos escribir código JavaScript directamente aquí para que se ejecute cuando se haga clic sobre un botón.
Pero esto no es recomendable porque generalmente queremos tener una lógica más extensa que consta de varias líneas.
Es por eso que Vue nos permite también definir métodos.
Así como este data permite definir el estado de nuestro componente, podemos definir métodos para nuestro componente.
Creando un Método
Por ejemplo, vamos a definir un método increase para incrementar el valor de nuestro contador.
Entonces aquí haremos:
count += 1;
Cuando queremos acceder a un estado de nuestro componente, tenemos que escribir al inicio this.
De esta manera, podemos acceder a las variables de estado que definimos dentro de este objeto que es devuelto por data.
Accediendo al Estado del Componente
Entonces, de esta manera vamos a aumentar nuestro contador en 1.
Recuerda que esto es equivalente a escribir:
count = count + 1;
Es lo mismo. Simplemente estamos abreviando la asignación del valor aumentado en 1.
Llamando al Método
Aquí ya no vamos a ejecutar esta lógica directamente, sino que simplemente vamos a llamar al método increase.
Guardamos los cambios.
Nuestro contador vuelve a cero, pero si usamos el botón, aún podemos seguir aumentando el valor del contador.
De esta manera es como podemos definir métodos en Vue.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Nosotros podemos escribir código JavaScript directamente aquí para que se ejecute cuando se haga click sobre un botón. Pero esto no es recomendable porque generalmente queremos tener una lógica más extensa que consta de varias líneas. Es por eso que Vue nos permite también definir métodos. Así como este "data" permite definir el estado de nuestro componente, podemos definir métodos. Podemos definir métodos para nuestro componente. Por ejemplo, vamos a definir un método "increase" para incrementar el valor de nuestro contador. Entonces aquí haremos "count+=1". Cuando queremos acceder a un estado de nuestro componente tenemos que escribir al inicio "this". De esta manera podemos acceder a las variables de estado que definimos dentro de este objeto que es devuelto por "data". Entonces, de esta manera vamos a aumentar nuestro contador en 1. Recuerda que esto es equivalente a escribir “count=count+1”. Es lo mismo. Simplemente estamos abreviando la asignación del valor aumentado en 1. Entonces aquí ya no vamos a ejecutar esta lógica, sino que simplemente vamos a llamar al método "increase". Guardamos los cambios. Nuestro contador vuelve a cero. Pero si usamos el botón, aún podemos seguir aumentando el valor del contador. De esta manera es como podemos definir métodos.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
23
Options API: Métodos
30
35
38
44
48
49
56
79
81
82
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript