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.

Ejemplo usando 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.

Creación de la versión con Composition API

Como este ejemplo está usando Options API, voy a crear otro archivo para escribir allí la versión con Composition 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.

Aquí vamos a crear nuestra versión usando Composition API.

Creación de la estructura inicial

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 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.

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 pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code