Última actualización:

¿Qué voy a aprender?

En este curso aprenderás a desarrollar formularios en Vue 3 utilizando Composition API, desde cosas 'sencillas' hasta formularios con múltiples pasos (Wizard), campos dependientes y mucho más que a continuación te explico.

Desarrollaremos un total de cinco formularios para cubrir muchos casos de uso, todos ellos utilizando las mismas dependencias pero de diferentes formas. Las dependencias utilizadas son estables y están 100% actualizadas, algo de lo que me he preocupado para que tengas las mejores herramientas para trabajar con formularios en Vue 3.

Todo el curso se llevará a cabo utilizando Tailwind CSS, te explicaré cómo configurarlo de forma completa en Vue 3 para que lo puedas exprimir al máximo.

También te explicaré cómo configurar ESLint en IntellIj o WebStorm. Si no sabes nada acerca de ESLint, simplemente debes saber que es una herramienta que nos ayuda a escribir mejor código.

Formulario para números de teléfono

El primer formulario será algo sencillo con un único campo para introducir un número de teléfono. Para que sea algo realmente útil, haremos uso de máscaras, también aplicaremos del código del país, en España por ejemplo es +34. Así forzaremos al usuario que nos visita que utilice un teléfono con el formato que nosotros deseamos.

Este formulario tendrá deshabilitado el botón de submit hasta que haya pasado la validación, que en este caso será el formato del teléfono.

Formulario para coincidencia y fortaleza de contraseñas

El segundo formulario es un caso muy utilizado en la web, la meta es aprender a validar la fortaleza de una contraseña añadiendo componentes para que visualmente el usuario que utiliza dicho formulario sepa si su contraseña es débil o fuerte.

Además, también aprenderemos a validar la coincidencia de contraseñas, es decir, que la confirmación haga match con la contraseña introducida, algo completamente necesario para evitar errores futuros de acceso.

Formulario con campos dependientes

Aunque en todo momento estaremos trabajando con Vue 3, prepararemos una serie de datos en archivos .json que consumiremos en esta sección del curso. Aquí aprenderás a construir formularios que tengan dependencia entre ellos mismos. La idea es ir filtrando los siguientes campos conforme el usuario va seleccionando opciones.

Al finalizar el proceso completo del formulario le brindaremos los resultados que hemos encontrado para sus intereses, un campo muy típico en muchas aplicaciones.

Formulario para pagar con tarjeta

Los formularios de pago están a la orden del día desde hace ya demasiado. En este bloque aprenderás a crear el tuyo propio de forma completa, pero recuerda, siempre en el cliente, no nos comunicamos con APIs ni nada parecido.

En este formulario tendremos varios datos sensibles que controlar, a nivel de interfaz pero también de validación, tales como titular de tarjeta, número de tarjeta, fecha de expiración y código de verificación. Hasta que todos estos campos no sean correctos no podremos realizar el pago, como la vida misma.

Formulario Wizard con múltiples pasos

La guinda del pastel para el final, un formulario con múltiples pasos pero que únicamente valide los datos para cada paso, y no para todo el esquema de validación definido. La idea es simple, si en pantalla sólo vemos dos campos, ¿por qué validar el resto?

En este bloque además de aprender a crear formularios Wizard con Vue 3, aprenderás otras muchas cosas por el camino que estoy seguro te resultarán muy útiles en tu día a día, sinceramente no tiene desperdicio.

Gracias a este curso dominarás los formularios en Vue 3 como un master, y mira que no me gusta nada esa palabra, pero te garantizo que lo que aprenderás aquí te va a facilitar el trabajo de una forma tremenda en tu día a día.

Si quieres aprender a crear formularios en Vue 3 ni lo dudes, suscríbete ahora a la plataforma y accede al path de Vue 3, que junto con este curso te brindan todo lo necesario para ser un PRO en el mejor framework para desarrollar interfaces en el cliente con JavaScript y HTML.

Requisitos recomendados para tomar el curso

Haber seguido los cursos anteriores de la ruta de aprendizaje con Vue 3.

¿Para quién es este curso?

Desarrolladores que trabajen con Vue 3 y Composition API y deseen adentrarse de lleno en el trabajo con formularios de forma correcta.

¿Qué hago si tengo dudas a lo largo del curso?

Si estás suscrito al plan Trimestral o Anual cuentas con soporte completo en menos de 24 horas dentro de días laborables.

Contenido del Curso

Introducción
Formularios en Vue 3: Archivos del curso y comandos para instalar dependencias 00:00:00
Formularios en Vue 3: ¿Qué vamos a hacer? GRATIS 00:08:00
Preparando nuestro proyecto
Formularios en Vue 3: Crear proyecto y dependencias 00:07:00
Formularios en Vue 3: Configurar Tailwind CSS con PostCSS 00:06:00
Formularios en Vue 3: Eliminar archivos innecesarios y crear navegación 00:03:00
Formulario para validar teléfonos
Formularios en Vue 3: Composable CallMe 00:07:00
Formularios en Vue 3: Formulario CallMe 00:13:00
Formulario para gestionar fortalezar contraseñas
Formularios en Vue 3: Composable fortaleza contraseñas 00:17:00
Formularios en Vue 3: Componentes para medir la fortaleza de la contraseña y submit button 00:07:00
Formularios en Vue 3: Formulario fortaleza de la contraseña completo 00:10:00
Formulario con campos dependientes
Formularios en Vue 3: Crear API falsa para formulario dependiente 00:05:00
Formularios en Vue 3: Composable formulario dependiente 00:14:00
Formularios en Vue 3: Crear campos de selección y range 00:05:00
Formularios en Vue 3: Desarrollar formulario dependiente completo 00:18:00
Formulario tarjetas bancarias
Formularios en Vue 3: Composable formulario tarjetas de crédito/débito 00:12:00
Formularios en Vue 3: Formulario completo tarjetas crédito/débito 00:14:00
Formulario Wizard (múltiples pasos)
Formularios en Vue 3: Composable Wizard 00:17:00
Formularios en Vue 3: Toolbar y botones de acción para el Wizard 00:05:00
Formularios en Vue 3: Componente FormStep 00:02:00
Formularios en Vue 3: Componente para el primer paso del Wizard 00:05:00
Formularios en Vue 3: Carga dinámica componentes Wizard y ver que funciona bien 00:04:00
Formularios en Vue 3: Componente para el segundo paso 00:05:00
Formularios en Vue 3: Componente para el tercer paso (textarea) 00:04:00
Formularios en Vue 3: Componente para el cuarto paso (final y despedida) 00:06:00

Valoraciones del curso

5

2 valoraciones
  • 5 estrellas
  • 4 estrellas
  • 3 estrellas
  • 2 estrellas
  • 1 estrellas
  1. Cristian Sepúlveda Caro7 febrero, 2021 at 7:24 pmResponder

    FORMULARIOS EN VUE3

    Excelente curso, no me dejo de sorprender, y aprender con Israel. Gracias, ha sido la mejor página de cursos hay.

  2. La mejor plataforma para aprender de Vue 3!

    Si quieres volverte un Pro en Vue 3 aprendiendo desde lo basico hasta avanzado con las mejorares practica esta es la plataforma correcta, muchas gracias profe Israel por enseñarnos lo mejor

Más valoraciones
HACER ESTE CURSO
  • Opciones de Precio +
  • ACCESO PARA SIEMPRE
  • Número de unidades24
  • 3 horas, 14 minutos
35 ALUMNOS MATRICULADOS
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register