Componentes de Archivo Único en Vue.js

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:36

Componentes de Archivo Único en Vue.js

Curso Básico de Vue.js 2

Clase 25 de 38

Clase 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!

Jose L. Figueroa

Hace 5 años

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

Jorge Alejandro Ake Bojorquez

Hace 5 años

Hola, Amigo ¿Qué es un Tuling?

Comentarios (41)41 comentarios

Daniel Muñoz Martín

Hace 7 años

Javier Mendoza

Hace 6 años

Luis Josué Santana Pérez

Eduardo Martin Rico Sotomayor

jonathan sanchez

Andrés Felipe Lopez gomez

Carlos Eduardo Gomez García

Juan Valentin Perdomo Bonilla

Elvis Milan

Gonzalo Pimentel

Seba Cardoso

Henry Gabriel Rodríguez Tovar

Nacho Anaya

Profesor

Diego Camino Reinoso

Andrés Antonio Azuara Portillo

Juan Pablo Cely W.

Eduard José Carrillo Ortega

Carlos Daniel

Jhonatan Ferney Ospina

Juan Pablo Jimenez

David Campos

Platzi Team

Jhon Penagos

Daniel Adolfo Ordoñez Rubio

Renato Renzo Luna Herrera

Antonio Luis Fernandez Dromundo

Karla

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

Componentes de Archivo Único en Vue.js