Crear Componentes Custom

Hasta ahora lo que va de curso lo he entendido perfectamente, aprovecho para felicitar al profesor por su forma tan clara de explicar, y mejor aun ir directo al tema, sin divagar mucho en trivialidades! 👍🏼

Codepen visto en clase: https://codepen.io/ianaya89/pen/KKPOdzO

Wao!. Está superhipermega genialisimo!

En resumen, para crear un componente se utiliza la propiedad component de Vue, la cual tiene casi los mismos metodos que la instancia de Vue donde veniamos haciendo todo, nada mas que este tiene el metodo template donde va a ir el “html” de nuestro componente 😄

Que gran profesor, muy clara su forma de explicar

Toda mi carrera he trabajado solamente backend y hasta hace poco me animé a empezar este nuevo mundo del front desde cero. Y este curso es perfecto! Gracias

Algo que no explico es que la ventaja de trabajar con componentes es que cada componente puede manejar su propia data individual. Es decir; puedes tener más de un botón y cada botón manejara su contador propio. Les invito a hacer la prueba.

En mi trabajo cuantas veces no soñaron con hacerlo todo por componentes y siempre terminábamos haciendo (como se dice coloquialmente en México) “un desmadre”, esto es mil veces genial

https://codepen.io/robertosd22/pen/QWjZOXO

Vue.component()
.
Es la función que permite registrar un componente nuevo y asignarle un nombre. Recibe dos parámetros, el primero es el nombre y el segundo es un objeto donde tenemos las mismas propiedades (data, computed, etc) que tenemos en la instancia de Vue.
.
Con la propiedad template, podemos definir el HTML que va a tener el componente en formato de string.
.
Dentro de un componente comenzamos a tener la estructura:

• data
• methods
• template

Spoiler alert = ‘Vue.component’ se puede utilizar en forma de etiqueta para nuestro html. Con ello podemos tener varios componentes para poder utilizar mas de una vez en nuestro código de manera sencilla.

Un componente es una etiqueta custom que creamos nosotros para hacer alguna sección que funcione por su propia cuenta y eso se logra a través del método Vue.component

Muy bien explicado, como podemos crear y usar los componentes de vue.

Me parece que está bien claro todo lo que explica el profe, me pregunto cuando sacarán la continuación

Mas sencillo que en react, aunque me gusta mas el jsx

otros ejemplos
https://www.youtube.com/watch?v=iBcFO5qcd44&list=PLPl81lqbj-4J-gfAERGDCdOQtVgRhSvIT&index=11

complemento
Registro Global del componente
"Estos componentes son registrados globalmente. Lo que significa que ellos pueden ser usado en la plantilla de cual instancia raíz de Vue(new Vue) creada después del registro. Por ejemplo:"

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })```

<div id=“app”>
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>```

https://es.vuejs.org/v2/guide/components-registration.html

16.-Crear Componentes Custom

Vue.component() es la función que nos permite registrar un componente nuevo y asignarle un nombre en el primer parámetro, y el segundo es un objeto.

Dentro de template va la parte de HTML que queremos para ese componente.

Vue solo nos permite tener un único elemento padre al momento de crear los componentes.

Hasta el momento todo muy claro.
Me da paz ir entendiendo todo el curso y que todo lo que hago funciona OK.
Gracias Ignacio!

Que bien explicado, gracias!

😮

lo entendí de maravilla explicas muy bien nacho!

esto es una maravilla ❤️

Excelente, muy bien explicado

Component:
Características de Vue que permiten extender elementos HTML básicos para encapsular código re utilizable. Son elementos personalizados a los que el compilador de Vue les añade comportamiento

El problema viene a la hora de pasar la data de un componente o muchos componentes arriba o abajo D:

Que gran curso, yo no sabia que se podían crear nuevos componentes con tanta facilidad

Excelente clase, quedo muy claro como funciona y como se estructura un componente.

No saben lo feliz que me puse al lograrlo :3

Vue.component('counter', {
  data(){
    return{
      counter: 0,
    }
  },
  methods:{
    count(){
      this.counter++
    }
  },
  template: `
    <div>
      <button @click="count"> Click Me! - {{ counter }}</button>
    </div>
  `
})

Vue es maravilloso!

Los componentes son porciones de tu codigo que te ayudan a organizar tu proyecto!!!

Componentes

La función Vue.component() nos permite registrar un componente nuevo y asignarle un nombre, el 1er parámetro de la función es el nombre del componente y el 2ndo parámetro es un objeto. Dentro del objeto se pueden disponer de las mismas configuraciones utilizadas dentro de la instancia de Vue, se puede disponer de data, methods, computed.

vue.component('counter', {
  data () {
    return {
      counter: 0
    }
  }
})

new Vue({
  el: '#app',

  data() {
    return {
      title: 'Hola Vue!'
    }
  }
})

La propiedad template, permite definir el template el que va a tener el componente, es decir el HTML que va a tener el componente en formato de string. Para ello se utilizan los storing literals y se escribe dentro de ellos el código HTML.

Counter no es una etiqueta HTML válida, a través de Vue es posible crear nuestros propios tags HTML, agrupar componentes en comportamientos similares y el poder reutilizar éste código a lo largo de la aplicación, todas las veces que se quiera.

Vue.component('counter', {
  data () {
    return {
      counter: 0
    }
  },

  template: `
    <div>
      <button>Click me!</button>
      <span>{{ counter }}</span>
    </div>
  `

})

En el HTML:

<div id="app">
  <h1>{{ title }}</h1>
  <counter></counter>
</div>

Dentro del template se tiene sin div que actúa como contenedor, es importante, ya que Vue exige tener un único elemento padre al momento de crear nuestros propios componentes. De la misma forma que en la aplicación de Vue, todo depende del div que tiene el div app, con los componentes se mantiene la estructura de árbol, se tiene una única ruta o elemento llamado Root, donde todos los elementos son hijos de ese elemento padre.

Siempre tendremos una única instancia Vue que es la que representa a nuestra aplicación y los componentes que se vayan creando posteriormente dependen de esa instancia.

Se utilizó la función Vue.component() para registrar y crear un componente nuevo. Se le asigna un nombre, que es el que se utiliza en el HTML, y finalmente se le asigna un objeto, que tiene prácticamente la misma estructura de la instancia de Vue, tiene las propiedades data, methods y template donde se puede definir las etiquetas HTML que van a definir al componente.

Finalmente se incluye el nuevo componente en el HTML con el nombre asignado.

Para crear un componente se empieza por utilizar la propiedad component de Vue, que recibe el nombre del componente y su propio objeto de configuración.

Dentro del objeto se puede usar una nueva propiedad llamada template, que es básicamente la estructura HTML propia del componente. Se define dentro de string literals.

Cabe mencionar que el template debe tener un único elemento padre, en términos prácticos significa que debe estar todo dentro de un div.

Hola colegas.

Existe un curso de webcomponents en platzi para tener mejor entendimiento acerca del tema de los compoenntes Custom

Me gusta modularizar mi código, y que cada componente se pueda volver a utilizar.

llevo muy poco aprendiendo VUE , el curso va bien!

¿Cómo hago para que la la template no este en string literal, sino en un template html?

Excelente!

Felicidades al instructor. He entendido los conceptos básicos

Vue.component('name', {

})

Vue.component("componentName", {
	data() {
		return {

		}
	},
	methods: {

	},
	template: `

`
})

Al nombrar el componente quise ponerle “footer” y no me dejó. Supongo que por ser una etiqueta reservada. Lo que hice fue crear la etiqueta <footer> y dentro crear otra llamada <mifooter></mifooter> y todo funcionó bien.

Profesor muy bueno, me gusta la manera de como explica, alguien tendrá el dato de que otros cursos imparte?

Por lo que entiendo, un componente custom es como un nuevo Vue dentro de el Vue principal o root.

🤯🤯 Puede que no sea Vue exactamente ya que no he visto los demás cursos como Angular o React, Pero siempre me preguntaba cuando veía el código de alguna pagina pro, porque tenia esos nombres las etiquetas, Esto ya me hace un dia de como lo manejan, Genial ♥

Hola Nacho , anteriormente data no tenia las paréntesis cuando lo declarabas a que se debe el cambio ?

Me encanta, EL TEMA de componentes, mi duda es que en backend yo utilizo django 3, pero todavia no quiero usar vue cli, as{i que de esta forma en que me beneficiaría usar vue en vez de jquery o js vanila?

Muchas gracias profe, puede comprender todo a la perfeccion

como su nombre dice componentes separa el codigo en componentes para que sea más facil el trabajo

Excelente curso hasta el momento !!! práctico y directo …👏👏

podemos acortar el método auto sumando la variables el mismo componente

👌

si hacen esto entenderán porq es un componente reutilizable.

<div id="app">
  <h1>{{title}}</h1>
  <counter></counter>
  <counter></counter>
  <counter></counter>
</div>

asta ahora me va gustando el curso ♥ 10/10 facil de entender

En algunos ejemplos en otros códigos he encontrado que cuando usan la directiva v-on:click también la utilizan v-on:click.native ¿alguien tiene alguna explicación de este tipo de propiedad?

Esto es maravilloso