-
*** UPDATE!
Vue 3 y esta clase ha reemplazado con una nueva para cubrir esta nueva versión:
https://www.skillshare.com/classes/In-Depth-Vue-3-para principiantes/1881663970
***
Llevar tus habilidades HTML, CSS y Javascript al siguiente nivel aprendiendo uno de los marcos más avanzados de Javascript disponibles hoy en día, Vue.js.
Si no sabes con vue.js, o bibliotecas de marcos de marcos de referencia en general, algunas de las preguntas que puedes hacer es lo siguiente:
¿Qué es Vue.js?
Y ¿por qué debería aprender en primer lugar?
Vue.js es un marco de marco de Javascript muy divertido y fácil de usar para crear interfaces de usuarios
El núcleo del marco es muy ligero y rápido, y puede utilizarse en proyectos de cualquier tamaño
Desde el fácil de sumergirlo en un sitio web o aplicación existente para controlar una parte de él, como la adición de nuevos componentes,
Aplicaciones de una página media o grande
Teniendo el tamaño ligero del núcleo de vue.js, sigue lleno de características que aprenderás durante este curso.
Durante este curso, construirás 2 proyectos divertidos, emocionantes y desafiantes, para aplicar todo lo que aprenderás instantáneamente.
Comenzamos con una aplicación de lista de invitados en la que los usuarios pueden agregar su nombre a una lista de invitados de evento. Es una aplicación simple, pero te guiará por todo el aspecto de vue.js como:
- de dos maneras de conectar datos
- Manejo de eventos
- Plantillas y el DOM virtual
- Lista y procesamiento condicional
- Atribuciones y estilos
- La instancia de Vue
- Expresiones de javascript
- Propiedades de la instancia: datos, computados, observadores, métodos, filtros, etc.
- bucles de y filtros
- Refs y otras propiedades de ejemplo y métodos
- Vue lifecycly
- ¡mucho más!
Luego se construirá este conocimiento, creando una aplicación de tarjeta de felicitación, donde el usuario puede crear y editar su propia tarjeta de felicitación personalizada. Pueden agregar su propio texto e imágenes para crear una tarjeta personalizada.
Este proyecto introduce más conceptos como:
- Componentes (archivo local, global y único)
- La CLI de Vue para proyectos de scaffolding con herramientas de construcción como Webpack y Babel
- Instalación de nodos y NPM
- Pasar de datos con $emit
- Stores y recuperación de imágenes de Firebase
- Accesorios y validación de accesorios
- Ranuras y alcance de la ranura
- Vincular de opciones de menú para cambiar fuentes y estilos
- Autobús de evento
- Mixtos
- ¡mucho más!
Así que estás listo para aprender uno de los de los marcos más modernos y próximos de Javascript disponibles.
Acompáñame ahora y estoy ansioso por tenerte a bordo.
Overview
Syllabus
-
- ¡Hola!
- ¿Qué es Vue.js y por qué debería utilizarlo?
- Instalación de Visual Studio
- Sección de introducción: Fundamentos de Vue
- Descarga tu proyecto de inicio
- Instalación de Vue.js
- La instancia Vue y el objeto de datos
- Plantillas y el DOM virtual
- Vinculación bidireccional de datos con v-model
- Manejo de eventos y métodos
- Procesamiento de la lista
- Procesamiento condicional en Vue
- Vinculación de elementos con atributos
- Estilos de vinculación
- Sintaxis abreviada de Vue
- Salida de texto y HTML
- V-if vs. v-show
- Uso de expresiones de Javascript
- Sección final: Fundamentos de Vue
- Sección de introducción: Una mirada más profunda a Vue
- Añadir una barra de progreso
- Propiedades computarizadas
- Observadores
- Eventos y modificadores clave
- Filtros
- Más sobre el bucle: claves y números de índice
- Uso de múltiples instancias en Vue
- Bucle con objetos
- Añadir nuestros enlaces y claves de navegación
- Acceso a instancias Vue externas
- Propiedades y métodos de instancia en Vue
- Referenciación de elementos con ref
- Uso de plantillas de cadenas
- El ciclo de vida de Vue
- Hooks del ciclo de vida de Vue en acción
- Sección final: Una mirada más profunda a Vue
- Sección de introducción: Herramientas de construcción y flujo de trabajo
- Instalación de nodos y NPM
- Proyectos de andamiaje con vue-cli
- Explorar el diseño de nuestros proyectos y las herramientas de construcción
- Uso del objeto de datos con plantillas de archivos individuales
- Sección final: Herramientas de construcción y flujo de trabajo
- Sección de introducción: Introducción a los componentes
- ¿Qué son los componentes?
- Registro de componentes globales
- Registro de componentes locales
- Creación de componentes de un archivo único
- Añadir el componente del frente de la tarjeta
- Emitir datos a los componentes principales
- Componentes dinámicos
- Creación de los componentes adicionales de la tarjeta
- Creación del componente de entrada de texto
- Recibir datos de la entrada de texto
- Creación del componente de salida de texto
- Pasar datos con accesorios
- Mantener los componentes vivos
- Estilos CSS de alcance
- Validación de apoyos
- Pasar datos de accesorios a un objeto de estilo
- introducción a los slots
- Alcance del slot y contenido predeterminado
- Slots nombrados
- Sección final: Introducción a los componentes
- Sección de introducción: Componentes continuados y almacenamiento Firebase
- Configuración de FireBase
- Creación del componente ImageUpload
- Subir imágenes a FireBase
- Vista previa de la imagen en miniatura
- Barra de progreso de carga y datos del archivo $emit
- Componente de salida de imagen
- Descargar imágenes desde FireBase
- Botón de fijar la imagen
- Menú de opciones de texto: tamaños de fuentes
- Menú de opciones de texto: alineación de texto
- Menú de opciones de texto: estilo de fuentes y peso
- Botón de quitar la imagen
- Pasar datos con callbacks
- Cómo hacer imágenes arrastrables
- Terminar el componente de CardInsideLeft
- Terminar el componente de CardInsideRight
- Terminar el componente de CardBack
- Introducción al bus de eventos
- Envío de eventos al bus de eventos
- Recepción de eventos del bus de eventos
- Añadir mixins
- Sección final: Componentes continuados y almacenamiento Firebase
- Sección de introducción: transiciones y animaciones
- Clases de transición
- Añadir transiciones CSS
- Añadir animaciones CSS
- Transiciones de componentes y modos de transición
- Introducción a los hooks de Javascript
- Hooks de Javascript en acción
- Mezclar animaciones y transiciones
- Clases de transición personalizadas
- Transiciones iniciales de procesamiento
- Transiciones y claves de los elementos
- Transiciones de grupo
- Clase V-move y nombres de transición dinámicos
- Sección final: Transiciones y animaciones
- Gracias
- ¡Sígueme en Skillshare!
