Cómo siempre Nacho explicando qué es cada cosa, porqué está ahí y para qué sirve. Que gran profesor!
Introducción
Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web
Vue.js: Desarrollo de Aplicaciones Web Profesionales
Creación de aplicaciones reactivas con Vue.js y HTML
Rendering Declarativo y Manipulación de DOM
Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados
Uso de Expresiones JavaScript en Plantillas de Vue.js
Directivas para Atributos Dinámicos en HTML con Vue.js
Directivas de Renderizado Condicional en HTML con Vue.js
Uso de la Directiva v-for en Vue.js para Renderizar Listas
Manejo de Eventos en Vue.js: Click y Mouseover
Condiciones y Clases Dinámicas en Vue.js
Estilos Dinámicos en JavaScript: Cambios de Color Interactivos
Propiedades Computadas y Watchers en Vue.js
Interacción dinámica con formularios y directivas en Vue.js
"Crear un Tracker de Cursos con Vue.js"
Sistema de Componentes
Sistema de Componentes en Fren Word: Modularización y Reutilización
Creación de Componentes Personalizados en Vue.js
Comunicación entre Componentes en Vue.js: Props y Data Binding
Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos
Uso de Slots para Inyectar HTML en Componentes Hijos
Ciclo de Vida de Componentes en Vue.js
Componentes de Vue: Creación y Gestión Eficiente
Componente Modal y Componente Principal en Vue.js
Ambiente de Desarrollo
Configuración Profesional de Vue.js con Visual Studio Code
Creación de Aplicaciones con Dios CLI y su Configuración Básica
Componentes de Archivo Único en Vue.js
Comandos esenciales para proyectos con Vue CLI y configuración de entorno
Platzi Exchange
Instalación y configuración de Tailwind CSS en proyectos HTML
Creación y Gestión de Componentes VUE en Proyectos Web
Creación de Aplicaciones SPA con Vue Router
Uso de Fetch API para Interactuar con Servidores HTTP
Filtros y Directivas para Mejorar Interfaces en JavaScript
Creación de Rutas Dinámicas en Vue.js para Criptomonedas
Navegación Dinámica y Programática en Vue.js
Integración de Componentes de Terceros en Proyectos Vue.js
Manejo de Problemas de Reactividad en Vue.js
Filtros y Ordenamiento en Tablas de Datos con JavaScript
Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js
¡A producción!
Publicación de Aplicaciones con Git y Netlify
Rendering Declarativo y Manipulacion de DOM
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Los Single File Components (componentes de archivo único) son una innovación poderosa introducida por Vue.js que permite a los desarrolladores operar en un entorno altamente organizado. Estos archivos .vue permiten integrar la lógica de JavaScript, el estilo en CSS y la estructura HTML dentro de un solo archivo, creando un flujo de trabajo unificado y eficiente.
El navegador por sí solo no puede interpretar archivos .vue, por lo tanto, el proceso JavaScript en el backend, configurado por herramientas como Vue CLI, se encarga de convertirlos en códigos compatibles que los navegadores pueden entender.
Un archivo .vue se desglosa en tres partes principales:
module.exports
para exportar componentes.scoped
crucial para aplicar estilos exclusivamente a un componente específico.El archivo main.js
actúa como el corazón del Proyecto Vue, importando tanto el núcleo de Vue como el componente principal. A través de funciones como $mount
y render
, se configura la aplicación para funcionar en el entorno del navegador. La primera línea de código generalmente importa las librerías necesarias desde npm, mientras que líneas posteriores traen los componentes deseados, como el App
.
En el componente App.vue
:
HelloWorld
, y HTML básico.export default
una técnica del ECMAScript moderno.Un componente como HelloWorld.vue
refleja la misma estructura con un enfoque en:
La arquitectura de Vue permite ensamblar múltiples componentes al tener un componente principal y varios subcomponentes organizados de manera modular. Esto facilita una mantención y escalabilidad más eficientes del proyecto al evitar el "código espagueti".
Los archivos de configuración como ESLint, PostCSS, y Babel son vitales para establecer un entorno de desarrollo robusto. El contenido estático y la inyección de scripts dinámicos se gestionan a través del index.html
. Al ejecutar npm run serve
, el CLI de Vue utiliza herramientas como Webpack para compilar todos los archivos .vue, generando un paquete listo para funcionar en producción.
Estos conceptos se alinean armoniosamente para convertir Vue.js en una herramienta poderosa y flexible para desarrolladores, permitiendo una estructuración profesional y organizada del código. ¡Así que no dudes en explorar y practicar más para dominar la creación de aplicaciones eficientes y escalables con Vue!
Aportes 34
Preguntas 7
Cómo siempre Nacho explicando qué es cada cosa, porqué está ahí y para qué sirve. Que gran profesor!
Es genial que explique cada linea!
Con Vue podemos crear componentes de múltiples formas, la más sencilla es cómo vismo en un post anterior donde utilizamos el método Vue.component().
Sin embargo esa forma, aunque es la más sencilla y práctica, no es la más escalable, ya que nos obliga a escribir el HTML dentro del método Vue.component() o a utilizar múltiples <templates> en el HTML.
Para solventar esto, existe una solución que junto con Webpack y un módulo (vue-loader) nos permite tener en un único fichero la vista (template), el diseño (css) y la lógica (javascript). Estos ficheros tienen una extensión .vue
Justo estaba pidiendo VueCLI en una clase pasada y aquí está xD
La diferencia entre usar VueCLI y usar Vue como un script en HTML, demás de verse más organizado y profesional, es que a nivel de código es más eficiente, pues con Vue CLI es nuestra computadora kla que se encarga de compilar los archivos .vue y dejar ya preparado el HTML puro para que el navegador solo lo cargue y lo ejecute, a diferencia de VueJS en un script que es menos eficiente (Y malo para SEO) pues de manera inicial se van a cargar las etiquetas desconocidas de Vue y demás, y va a ser la computadora del usuario la que se va a encargar de ejecutar todo el código de Vue, haciendo que la carga de la página sea más lenta
Postcss fue removido en la nueva version!!!
Que satisfacción que exista Vue!!! Vengo del curso de Angular y que laberinto(para mí)! Antes de conocer Angular odié Vue, luego de conocerlo lo amé jaja
Asi se ve hoy el main.js
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
Me gustaría tener el código usado en cada clase, así como una breve descripción en cada contenido, como en otros cursos 😦
Al parecer la versión que instalé de Vue CLI 4.3.1 ya no genera el archivo de postcss.
Nacho! que buena clase! Gracias!
¿Cómo se llama el tema y los iconos que usas?
Single File Components
Son archivos .vue que nos ofrece el Framework para poder trabajar con la lógica, con el CSS o los estilos y con el template, el HTML de un mismo componente. Es decir, en un mismo archivo tendremos el HTML, la parte de lógica con el JS y los estilos con el CSS.
Estos archivos no son soportados por los Browsers, por la parte detrás se tendrá se tendrá todo un Tuling generado por el CLI generando un archivo entendible por el browser a partir del .vue. Es decir tomará todos los archivos vue, convirtiéndolos a JS que sea entendible por el browser.
Importar componentes:
Lo que se realiza es importar el componente en dónde se requiere utilizar, y se declara dentro de la propiedad componentes para decirle que está disponible en la propiedad componentes para ser utilizado.
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld,
},
};
De ésta forma se importa un componente, se declara dentro de componente y se utiliza así en el HTML:
<HelloWorld msg="Welcome to Your Vue.js App" />
Qué clase tan genial
Son archivos .vue que nos ofrece el framework para poder trabajar con la lógica, con el css y con el HTML dentro de un mismo componente, es decir dentro de un mismo archivo vamos a tener las 3 partes. Estos archivos no son soportados por los browsers por lo que tendremos todo un tooling por detrás configurado por el CLI que se encarga de que generemos un código entendible por el browser a partir de el .vue
Las librerías no tienen “./” o ruta relativa.
$mount(’#app’) tiene el mismo propósito que que el “el” en las primeras prácticas.
La función render es una forma de reemplazar la instancia de la app dentro de nuestro componente, es decir, que esa configuración equivale a lo que hacíamos dentro de las apps que hemos hecho.
Cuando corremos npm run serve lo que hace el CLI es usar webpack y otras cosas para generar una app.
Los Single File Components (componentes escritos en archivos) son archivos con la extensión .vue que nos ofrece el framework para trabajar la lógica, el CSS y el HTML de un componente en un solo archivo.
Este archivo es compilado por Vue gracias a las configuraciones del CLI para generar archivos para el navegador.
El atributo scoped dentro de la etiqueta style indica que esos estilos solo serán aplicados al componente donde están.
Que genial esta clase, excelente forma de explicar los componentes creados.
para una posible actualización de este curso, se recomienda comenzar desde este punto.
Como siempre, el profesor deconstruyendo el por que de las cosas ❤️
Son archivos .vue que nos ofrece el framework para poder trabajar con la lógica, con el CSS y el template de JavaScript dentro del mismo componente.
EXCELEEEEENTE EXPLICACION!!!👌🏼👌🏼👌🏼👌🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼
Es Genial la explicación!.
Excelente explicacion del profe
Año 2021 Y creo que gran parte ha desaparecido como babel, postcss y algunos otros.
También existe otra forma de como cargar un componente. como lo muestro en el siguiente ejemplo:
Excelente clase!
Que bueno que explica para que sirve
Me viene gustando MUCHO Vue ❤️
Ahora a construir nuestra primera App profesional en Vue
Asi con esa estructura ya se ve mas bonito Vue!
Sencillamente lo hace todo mas facil, muchas gracias Ignacio, nos muestra lo maravilloso y bien estruturado que es Vue
muy buen profesor, excelente…
👌
Excelente
Vue es genial !
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?