Proyecto: PlatziCommerce con Vue.js

Curso de Reactividad con Vue.js 3

Introducción: fundamentos de Vue.js

¿Cómo convertirte en frontend developer con Vue.js?

La magia de aprender JavaScript

¿Qué es Vue.js? Frameworks, librerías y componentes

Declarative rendering con JavaScript

Declarative rendering con Vue.js

Reactividad a profundidad

¿Qué es la reactividad?

¿Qué es un Proxy?

Crea tu propio miniframework: MiniVue

Implementando un Proxy en MiniVue

Implementando Reflect en MiniVue

Reactividad con effect, track y trigger

Implementando effect, track y trigger en MiniVue

Templates de Vue.js

Disclaimer sobre los Templates

Proyecto: PlatziCommerce con Vue.js

Expresiones

Atributos

Conditional rendering

List rendering

Event handling

APIs internas de Vue.js

Options API vs. Composition API

data() y ref()

Métodos personalizados con Options API

Métodos personalizados con Composition API

reactive()

Segunda capa: componentes de Vue.js

Componentes de Vue con Options API

Componentes de Vue con Composition API y props

Reto con componentes

Custom events o eventos personalizados con Options API

Custom events o eventos personalizados con Composition API

Watchers con Options API

Watchers con Composition API

Computed properties con Options API

Computed properties con Composition API

Ciclos de vida de un componente

Ciclos de vida de un componente: Composition API

Siguientes pasos

Continúa tu ruta de aprendizaje profesional con Vue.js

Siguientes pasos con Vue.js

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 13

Preguntas 1

Ordenar por:

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

Tomás Eduardo González Quiñones

hace 4 años

Adjunto el codigo de los estilos para que copien y peguen nomas 😉

body {
        font-family: sans-serif;
        font-size: 18px;
      }
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      header {
        display: flex;
        height: 40px;
        justify-content: space-between;
        align-items: center;
        background: rgb(104, 104, 209);
        color: #fefefe;
      }
      header h3 {
        margin-left: 8px;
      }
      header .cart {
        background: rgb(82, 82, 194);
        padding: 8px;
        color: white;
        border: none;
        height: 100%;
        cursor: pointer;
        outline: none;
      }
      header .cart-content {
        position: absolute;
        right: 0;
        top: 40px;
        background: white;
        padding: 16px;
        color: black;
        border-bottom: 1px solid black;
        border-left: 1px solid black;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
      }
      header .cart-content .cart-content__product {
        display: flex;
        align-items: center;
        padding: 8px;
        border-radius: 8px;
        background: rgb(129, 129, 129, 0.2);
        margin-bottom: 4px;
      }
      header .cart-content .cart-content__product.bg-gray {
        background: rgb(129, 129, 129, 0.4);
      }
      header .cart-content .cart-content__product img {
        width: 50px;
      }
      main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
      }

      main .product {
        display: grid;
        grid-template-columns: 0.2fr 0.8fr;
      }

      main .product .product__thumbnails {
        width: 90px;
      }
      main .product .product__thumbnails .thumb {
        width: 100%;
        height: 90px;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: 8px;
      }
      main .product .product__thumbnails .thumb.active {
        border-bottom: 1px solid rgb(82, 82, 194);
      }

      main .description h4 {
        display: inline-block;
        font-size: 24px;
      }
      main .description .description__status {
        font-size: 16px;
        font-weight: lighter;
        color: rgb(129, 129, 129);
      }
      main .description .description__price {
        font-weight: bold;
        color: rgb(104, 104, 209);
      }
      main .description .description__content {
        margin-top: 8px;
      }
      main .description .discount {
        margin: 8px 0 8px 0;
      }
      main .description .discount span {
        font-size: 14px;
        margin-right: 8px;
      }
      main .description .discount input {
        padding: 8px;
        border: 1px solid #616161;
        border-radius: 4px;
      }
      main .description button {
        padding: 8px;
        font-size: 18px;
        background: rgb(104, 104, 209);
        color: #fefefe;
        border: none;
        border-radius: 8px;
      }
      main .description button:disabled {
        background: rgb(159, 159, 228);
      }
      .badge {
        font-size: 14px;
        font-weight: normal;
        padding: 8px;
        border-radius: 8px;
        color: white;
        margin-right: 4px;
        vertical-align: text-top;
      }
      .badge.new {
        background-color: rgb(103, 172, 13);
      }
      .badge.offer {
        background-color: rgb(197, 107, 33);
      }```

RetaxMaster

hace 4 años

¡Ahora sí vamos con Vue! 😄
.
Soy un VueLover así que esto me emociona xD Al igual que con el Mini Vue iré dejando en mi repositorio de GitHub los códigos de cada clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/7424dba6ade1ecf4a77d5cfd7c808dd03077c1d7

Sebastián Buitrago

hace 3 años

Por si perdieron el script aqui se los dejo

<script src="https://unpkg.com/vue@next"></script>

Martín S. Campos

hace 3 años

La notación de clases realizada se le conoce como BEM (Block, Element, Modifier) el cual realiza especificaciones a un elemento para su mejor manipulación con CSS. Comparto un link con mas información.

Carlos Rafael Córdova Flores

hace 4 años

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Platzi Commerce</title>
  </head>
  <body>
    <div id="app">
      <header>
        <h3>Platzi Commerce</h3>
        <button class="cart">Carro (0)</button>
        <div class="cart-content">
          <div class="cart-content__product">
            <img src="" alt="" />
            <span>Producto - $ 100.00</span>
          </div>
        </div>
      </header>
      <main>
        <section class="product">
          <div class="product__thumbnails">
            <div class="thumb"></div>
          </div>
          <div class="product__image">
            <img src="" alt="" />
          </div>
        </section>
        <section class="description">
          <h4>Producto</h4>
          <span class="badge new">Nuevo</span>
          <span class="badge offer">Oferta</span>
          <p class="description__status"></p>
          <p class="desction__price">$ 100.00</p>
          <p class="description__content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
            dicta quis repellendus facilis unde! In enim tempora culpa dolorum
            recusandae ipsa rem. Reiciendis et ipsum officia eius corporis sequi
            libero.
          </p>
          <div class="discount">
            <span>Código de descuento:</span>
            <input type="text" placeholder="Ingresa tu código" />
          </div>
        </section>
      </main>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
      const { createApp } = Vue;
      const app = createApp();
      app.mount("#app");
    </script>
  </body>
</html>

ericgomez

hace 3 años

Emmanuel Rodríguez

hace 4 años

Una estructura tan simple que describe la entrada de un sistema completo.
Me emociona Vue como herramienta pero la respeto como Framework. Y es que como dice el principio KISS (Keep It Simple Stupid):

const { createApp } = Vue;
const app = createApp();
app.mount('#app');

Miguel Ángel Reyes Moreno

hace 3 años

Ivan Camilo Buitrago Buitrago

hace 5 meses

creo que el editor tiene el suficiente campo como para hacer mas grande el texto, hay se llevan menos 1 punto por temas de accesibilidad, no esta tan facil el visualizar el codigo

Jose Barboza

hace 4 años

bueno empecemos con vue mi primera vez con un framework front

Jose Barboza

hace 3 años

const { createApp } = Vue;

const app = createApp();
app.mount("#app")

Naldo Duran

hace 4 años

👌

Alejandro Vega Meneses

hace 4 años

Voy con toda a aprender Vue3!! La versión 2 me encantó y por eso me decidí a usar este framework