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
Tarea y nuevo componente
En esta lección te propongo un pequeño ejercicio de práctica. Luego creamos un nuevo componente de ejemplo, y organizamos ambos en una carpeta.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Este ejemplo está escrito usando el estilo de Options API. ¿De qué manera puedes practicar? Bueno, puedes agregar un botón más y hacer que este botón disminuya en el contador. Hay muchas maneras de implementarlo. Una forma sería duplicar este botón, llamar a un método "increase" y hacer que ese método "increase" afecte el valor de "count" para que disminuya su valor en uno. Entonces puedes practicar de esa manera. Como este ejemplo está usando Options API, voy a crear otro archivo para escribir allí para escribir allí la versión con composición API dentro de la carpeta "src" voy a agregar una carpeta nueva que se va a llamar "examples". Aquí vamos a poner este archivo que ya existe, solo que lo vamos a renombrar. Lo vamos a llamar "ContadorOptions". Lo vamos a llamar Options porque usa options API y esto lo vamos a mover dentro de nuestros ejemplos. Ahora vamos a crear un archivo nuevo dentro de "examples" y lo vamos a llamar "ContadorComposition". Y aquí vamos a crear nuestra versión usando composición API. Vamos a empezar creando entonces una etiqueta template con un H1 que diga “Hola, soy la versión con composición API”. Guardamos esto y tenemos que asegurarnos de invocar a dicho componente que está en la carpeta de "examples" y que tiene nombre de "ContadorComposition". Tenemos que hacer este cambio porque si no se va a seguir llamando al otro componente. Guardamos. Nos vamos a nuestro navegador y tenemos esto. “Hola, soy la versión con composición API” sobre esto entonces vamos a trabajar nuestra versión con composición API.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
25
Tarea y nuevo componente
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