Botones de Vue.js y actualización de valores

Introducción

En este proyecto, aprenderás a configurar un entorno de Vue.js e implementar la funcionalidad de los botones para actualizar un valor que se muestra en una página web.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar un entorno de Vue.js
• Cómo implementar la funcionalidad de los botones - y + para actualizar el valor
• Cómo probar la funcionalidad de los botones

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Configurar una aplicación básica de Vue.js
• Crear un objeto de datos reactivo y actualizar sus valores
• Utilizar controladores de eventos para llamar a funciones y actualizar la interfaz de usuario

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── css
│   └── style.css
├── index.html
└── js

Entre ellos:

• index.html es la página principal a reparar.
• css es la carpeta que almacena los estilos del proyecto.
• js es el archivo Vue en el que el proyecto depende.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

A continuación, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página. Haz clic en los botones - y + de la página y verás que el valor del medio no se puede cambiar. El efecto de la página es el siguiente:

Función de reparación

En este paso, debes corregir el error para que al hacer clic en los botones "-" y "+" de la página, los valores del centro cambien en consecuencia.

1. En el archivo index.html, localiza la sección // TODO:
2. Modifícalo con el siguiente código:

// TODO
let { value } = toRefs(data);

3. En los controladores de eventos @click de los botones "-" y "+", llama a la función update y pasa el valor actualizado como argumento.
4. En la función update, actualiza la propiedad value con el nuevo valor pasado como argumento.

Después de completar estos pasos, haz clic en los botones "-" y "+" de la página y los valores del centro cambian en consecuencia.

El efecto después de la finalización es el siguiente:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.