Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos:
Esta lección está disponible únicamente para suscriptores.
Regístrate o inicia sesión para continuar aprendiendo:
Veamos cómo definir el estado de un componente usando Composition API.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Tenemos una etiqueta template y vamos a crear una etiqueta script. La diferencia es que en este caso vamos a agregar el atributo setup que es necesario para trabajar con Composition API. Lo primero que vamos a hacer es definir una variable "count", como hicimos anteriormente. Para poder definir variables de estado, tenemos que importar la función "ref" desde Vue. Entonces vamos a crear ahora nuestra variable "count" y vamos a definir lo usando "ref", le tenemos que indicar aquí cuál es su valor inicial. En este caso, cero. Vamos a cambiar este texto por un párrafo y vamos a agregar un H1 con el valor del contador. Vamos a imprimir aquí "count". Hasta aquí todo es muy similar. Estamos imprimiendo aquí el valor de la variable "count" y "count" se define usando la función "ref". Si volvemos a el navegador, vamos a ver aquí el valor de cero. Tal como hicimos antes, vamos a agregar ahora un botón. Este botón lo vamos a poner como texto “incrementar contador”. Guardamos hasta aquí. El botón no hace nada porque no tiene ningún evento asociado. Vamos a asociarle un evento de click a nuestro botón y vamos a aumentar el valor de "count" en 1. Guardamos cambios, nos vamos al navegador y usamos el botón. Ya funciona. Hasta aquí todo bien y ya estamos usando Composition API. Como en nuestro proyecto queremos usar TypeScript, es importante también agregar aquí el atributo “lang=ts”, en el caso contrario nos marcaron un warning.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
26
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
Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos: