No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Single File Components

25/38
Recursos

Aportes 34

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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 馃槮

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

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 鈥渆l鈥 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 !