¿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 |
19 ALUMNOS MATRICULADOS
FORMULARIOS EN VUE3
Excelente curso, no me dejo de sorprender, y aprender con Israel. Gracias, ha sido la mejor página de cursos hay.
Muchas gracias Cristian, me alegra mucho que la plataforma te esté ayudando a conocer nuevas herramientas.