Introducción: fundamentos de Vue.js

1

Desarrollo de Aplicaciones Web con Vue.js 3

2

Fundamentos de Vue JS: Construyendo Aplicaciones Reactivas

3

Vue.js: Framework Progresivo y Reactivo para Aplicaciones Web

4

Aplicación Básica con JavaScript y Renderizado Declarativo

5

Capa Declarativa y Virtual DOM en Vue.js

Reactividad a profundidad

6

Paradigma de Reactividad: Conceptos y Aplicaciones Prácticas

7

Creación de Framework Reactivo con Proxies en JavaScript

8

Creación de un Mini Framework Reactivo desde Cero

9

Programación Reactiva con Proxies en JavaScript

10

Uso de Reflect para Simplificar Proxies en JavaScript

11

Programación Reactiva: Efectos, Track y Trigger en JavaScript

12

Reactividad en JavaScript: Efectos, Trackers y Triggers

Templates de Vue.js

13

Templates de HTML en Vue.js: Mejores Prácticas Esenciales

14

Implementación de Vue.js en Proyecto eCommerce Reactivo

15

Expresiones

16

Atributos Dinámicos en Vue.js: Uso de Clases y Estilos Reactivos

17

Rendering Condicional en View.js: Uso de v-show y v-if

18

Renderizado de Listas en HTML con VueJS

19

Eventos y Dinamismo en Templates HTML con Vue JS

APIs internas de Vue.js

20

Options API vs. Composition API

21

Diferencias entre Options API y Composition API en Vue.js

22

Creación de Métodos Personalizados con Vue JS Options API

23

Creación de Métodos Personalizados con Composition API en Vue.js

24

Uso de Reactive para Agrupar Estados en Composition API

Segunda capa: componentes de Vue.js

25

Creación de Componentes en Vue para Aplicaciones Modulares

26

Conexión de Datos entre Componentes en VueJS: Usando Props y Composition API

27

Creación de Componentes Personalizados en Aplicaciones Web

28

Creación de Eventos Personalizados en Vue para Comunicación entre Componentes

29

Eventos personalizados con Composition API en Vue.js

30

Observadores Personalizados con Watchers en Vue.js

31

Creación de Observadores Personalizados en Vue Composition API

32

Propiedades Computadas en Vue: Simplificación y Dinámica Reactiva

33

Propiedades Computadas con Composition API en Vue.js

34

Ciclos de Vida en Vue.js: Uso Práctico y Carga de Datos desde API

35

Ciclos de Vida en Composition API de Vue.js

Siguientes pasos

36

Desarrollo de Frontend para Ecommerce con Vue.js 3

37

Reactividad y Programación en Vue: Efectos y Ciclos de Vida

Creación de Componentes Personalizados en Aplicaciones Web

27/37

Lectura

Ahora que sabes cómo podemos crear Componentes en nuestra aplicación, tu reto será crear un componente personalizado que mantenga los badges de cada producto.

...

Regístrate o inicia sesión para leer el resto del contenido.

Aportes 13

Preguntas 1

Ordenar por:

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

Listo:
.
Product.js

...
<h4>{{ product.name.toUpperCase() }} {{ product.stock == 0 ? "😭" : "😎" }}</h4>

<badge :product="product"></badge>

<p class="description__status" v-if="product.stock == 3">Quedan pocas unidades</p>
...

index.html

...
    <script src="./Badge.js"></script>
    <script src="./Product.js"></script>

    <script>
        app.mount("#app");
    </script>
    
</body>
</html>

Badge.js

app.component("badge", {

    template: /* vue-html */ `
        <span class="badge new" v-if="product.new">Nuevo</span>
        <span class="badge offer" v-if="product.offer">Oferta</span>
    `,

    props: ["product"]

});

El código es el mismo para Options y Composition, dejo el repositorio completo:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/fcc9c3e03c7e44b2e5e7a49d2f6e03bfd3856006

Listo xD

# Badge.js
app.component("badge", {
  template: `
<span class="badge new" v-if="product.new">Nuevo</span>
<span class="badge offer" v-if="product.offer">Oferta</span>
`,
  props: ['product']
});

# Product.js
<badge :product="product"></badge>

# index.html
  <script src="./Badge.js"></script>


No es mucho, pero es trabajo honesto.
Lo que hice fu lo siguiente:

Agregue un nuevo array de badges a los productos

badges: [
	{	
        	title: 'Nuevo',
                name: 'new',
                status: true,
         },
        {
                title: 'Oferta',
                name: 'offer',
		status: true,
	},
]
                                	   

lo recorro de la siguiente forma:

<badge v-for="badge in product.badges" :badge="badge" />

Badges.js

app.component("badge", {
    template: /* vue-html */`
        <span class="badge" :class="badge.name"  v-if="badge.status">{{ badge.title }}</span>
    `,
    props: ["badge"]
});

Dejo mi aporte de como lo hice. Tengo una estructura un poco diferente porque estoy usando Typescript y y archivos .vue.

<template>
  <span class="badge new" v-if="product.new">Nuevo</span>
  <span class="badge offer" v-if="product.offer">Oferta</span>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name:"BadgesComponent",
    props:{ product : {}}
})
</script>

Budge.js

app.component("budge", {
    template: /* vue-html */`
    <span class="badge new" v-if="budge.new">Nuevo</span>
    <span class="badge offer" v-if="budge.offert">Oferta</span>
    `,
    props: ["budge"],
});

Product.js

<budge :budge="product"></budge>

index.html

<script src="./Budge.js"></script>

Es tal cual, copiar y pegar.
Esta seria la unica linea nueva como tal
<script src="./Badge.js"></script>

Hola, aquí como lo logré:

index.html

<script src="Badge.js"></script>

product.js

<Badge :product="product"></Badge>

Badge.js

app.component("Badge", {
  template: /* vue-html */`
    <span class="badge new" v-if="product.new" >Nuevo</span>
    <span class="badge offer" v-if="product.offer" >Oferta</span>
  `,
  props: [
    "product"
  ]
});

no me gusto el hecho de estar repitiendo el span una y otra vez, pero bueno, recien estoy aprendiendo vue y funciono xd

En Product.js:

<badges :product="product"></badges>
      <!-- <span class="badge new" v-if="product.new">Nuevo</span>
      <span class="badge offer" v-if="product.offer">Oferta</span> -->

En Badges.js:

app.component("badges", {
  template: `
    <span class="badge new" v-if="product.new">Nuevo</span>
    <span class="badge offer" v-if="product.offer">Oferta</span>
  `,
  props: ["product"]
})

Y en el index.html agregue, antes del script del Product.js :

  <script src="./Badges.js"></script>
  <script src="./Product.js"></script>

Mi solución:
//Product.js

            <section class="description">
            <h4>{{product.name.toUpperCase()}} {{ product.stock === 0 ? "😌" : "🥰" }}</h4>
            <badges :product="product"/>
            (...)

//Badjes.js

app.component("badges", {
    template: /* vue-html */`
        <span class="badge" 
        :class="{new: product.new}">{{product.new ? "Nuevo" : ""}}</span>
        <span class="badge" 
        :class="{offer: product.offer}">{{product.offer ? "Oferta" : ""}}</span>
    `,
    props: ["product"],

})

Listo el reto 😎🚀

Badge.js 👌

app.component("badge", {
  template: /* vue-html */ `
        <span class="badge new" v-if="product.new">Nuevo</span>
        <span class="badge offer" v-if="product.offer">Oferta</span>
    `,
  props: {
    product: {
      required: true,
      type: Object,
      default: () => {},
    },
  },
});

Product.js 🦾

<badge :product="product"></badge>

Pues la verdad no me funciona ni copiando el código directamente.

Realizado.

Index.html

Agrupo los valores

badge: { new: true, offer: true },

e inserto

<script src="./bagde.js"></script>

Product.js

<badge :badge="product.badge"></badge>

Badge.js

app.component("badge", {
  template: /*vue-html */ `
    <section>
        <span class="badge new" v-if="badge.new">Nuevo</span>
        <span class="badge offer" v-if="badge.offer">Oferta</span>
    </section>
  `,
  props: ["badge"],
});

izy