Introducción

1

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

2

Vue.js: Desarrollo de Aplicaciones Web Profesionales

3

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

4

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

5

Uso de Expresiones JavaScript en Plantillas de Vue.js

6

Directivas para Atributos Dinámicos en HTML con Vue.js

7

Directivas de Renderizado Condicional en HTML con Vue.js

8

Uso de la Directiva v-for en Vue.js para Renderizar Listas

9

Manejo de Eventos en Vue.js: Click y Mouseover

10

Condiciones y Clases Dinámicas en Vue.js

11

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

12

Propiedades Computadas y Watchers en Vue.js

13

Interacción dinámica con formularios y directivas en Vue.js

14

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

15

Sistema de Componentes en Fren Word: Modularización y Reutilización

16

Creación de Componentes Personalizados en Vue.js

17

Comunicación entre Componentes en Vue.js: Props y Data Binding

18

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

19

Uso de Slots para Inyectar HTML en Componentes Hijos

20

Ciclo de Vida de Componentes en Vue.js

21

Componentes de Vue: Creación y Gestión Eficiente

22

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

23

Configuración Profesional de Vue.js con Visual Studio Code

24

Creación de Aplicaciones con Dios CLI y su Configuración Básica

25

Componentes de Archivo Único en Vue.js

26

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

27

Instalación y configuración de Tailwind CSS en proyectos HTML

28

Creación y Gestión de Componentes VUE en Proyectos Web

29

Creación de Aplicaciones SPA con Vue Router

30

Uso de Fetch API para Interactuar con Servidores HTTP

31

Filtros y Directivas para Mejorar Interfaces en JavaScript

32

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

33

Navegación Dinámica y Programática en Vue.js

34

Integración de Componentes de Terceros en Proyectos Vue.js

35

Manejo de Problemas de Reactividad en Vue.js

36

Filtros y Ordenamiento en Tablas de Datos con JavaScript

37

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

38

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

Componentes de Archivo Único en Vue.js

25/38
Recursos

¿Qué es un Single File Component en Vue.js?

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.

¿Cómo se estructura un archivo .vue?

Un archivo .vue se desglosa en tres partes principales:

  • Template: contiene el código HTML básico, el cual puede incluir expresiones y etiquetas.
  • Script: donde reside la lógica JavaScript. Aquí, los módulos de ECMAScript (ES6) son clave, usando module.exports para exportar componentes.
  • Style: donde el CSS se define, siendo el atributo scoped crucial para aplicar estilos exclusivamente a un componente específico.

¿Cómo se gestiona la instancia principal con main.js?

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.

¿Qué rol juegan los componentes en un proyecto Vue?

¿Cómo se organiza un componente App.vue?

En el componente App.vue:

  • Parte del template: puede integrar otros componentes, como HelloWorld, y HTML básico.
  • Parte del script: implica la importación de subcomponentes, siendo el patrón export default una técnica del ECMAScript moderno.
  • Name: añade una propiedad óptima para facilitar el debugging.
  • Components: permite declarar subcomponentes para su uso en el componente padre.

¿Cómo se define un componente HelloWorld.vue?

Un componente como HelloWorld.vue refleja la misma estructura con un enfoque en:

  • Props: proporciona una forma completa de manejar y validar datos entrantes, permitiendo definir tipos de datos que esperan recibir los componentes, otorgando ventaja en la prevención de errores.

¿Cómo se combinan múltiples archivos .vue?

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".

¿Qué importancia tienen las configuraciones en un proyecto Vue?

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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

25.-Single File Components

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.

  • El atributo scope nos indica que el estilo se va a aplicar únicamente a este 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 !