Curso de Introducción a Vue.js 3

Clases del Curso de Introducción a Vue.js 3

Instruido por:
Samuel Burbano
Samuel Burbano
Básico
4 horas de contenido
Ver la ruta de aprendizaje
MiniVue
Proyecto del curso
MiniVue

Crea tu propio mini-framework con (casi) la misma sintaxis de Vue.js. Descubre cómo desarrollar un framework reactivo con Proxies y Reflects para comprender mucho mejor cómo construyeron Vue.js 3 One Piece.

Curso de Introducción a Vue.js 3

Curso de Introducción a Vue.js 3

Progreso del curso:0/37contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/37contenidos(0%)

Introducción: fundamentos de Vue.js

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

00:37 min

Material Thumbnail

La magia de aprender JavaScript

02:08 min

Material Thumbnail

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

06:26 min

Material Thumbnail

Declarative rendering con JavaScript

05:09 min

Material Thumbnail

Declarative rendering con Vue.js

05:39 min

Reactividad a profundidad

Material Thumbnail

¿Qué es la reactividad?

03:49 min

Material Thumbnail

¿Qué es un Proxy?

06:29 min

Material Thumbnail

Crea tu propio miniframework: MiniVue

07:04 min

Material Thumbnail

Implementando un Proxy en MiniVue

06:06 min

Material Thumbnail

Implementando Reflect en MiniVue

09:29 min

Material Thumbnail

Reactividad con effect, track y trigger

03:53 min

Material Thumbnail

Implementando effect, track y trigger en MiniVue

07:39 min

Templates de Vue.js

Disclaimer sobre los Templates

00:21 min

Material Thumbnail

Proyecto: PlatziCommerce con Vue.js

06:53 min

Material Thumbnail

Conditional rendering

08:53 min

APIs internas de Vue.js

Material Thumbnail

Options API vs. Composition API

05:14 min

Material Thumbnail

Métodos personalizados con Options API

08:36 min

Material Thumbnail

Métodos personalizados con Composition API

07:25 min

Segunda capa: componentes de Vue.js

Material Thumbnail

Componentes de Vue con Options API

06:56 min

Material Thumbnail

Componentes de Vue con Composition API y props

14:13 min

Reto con componentes

00:37 min

Material Thumbnail

Custom events o eventos personalizados con Options API

04:28 min

Material Thumbnail

Custom events o eventos personalizados con Composition API

03:57 min

Material Thumbnail

Watchers con Options API

08:53 min

Material Thumbnail

Watchers con Composition API

08:19 min

Material Thumbnail

Computed properties con Options API

05:17 min

Material Thumbnail

Computed properties con Composition API

06:20 min

Material Thumbnail

Ciclos de vida de un componente

08:19 min

Material Thumbnail

Ciclos de vida de un componente: Composition API

06:03 min

Siguientes pasos

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

00:58 min

Material Thumbnail

Siguientes pasos con Vue.js

01:11 min

nuevosmás votadossin responder
Daniel Rodriguez Davila
Daniel Rodriguez Davila
Estudiante

oiga, y en linux, como hago para hacer los emojis?

1
Williams Tzoc Ixcoy
Williams Tzoc Ixcoy
Estudiante

¿ es necesario llevar el curso de Vue.js2 para entender el 3, o puedo comenzar de una con Vue.js3? Y¿Vue.js2 ya quedó obsoleto o no?

1
Christian Lopez
Christian Lopez
Estudiante

Hasta ahora lo que he visto es que el options API es igual que en vue 2… me equivoco?

1
Ricardo
Ricardo
Estudiante

Una pregunta Samuel, por que si tengo un solo producto en la API me genera error al tratar de renderizar:

Uncaught (in promise) TypeError: Cannot read property ‘0’ of undefined
at Proxy.render (eval at compileToFunction ([email protected]:14656), <anonymous>:50:32)
at renderComponentRoot ([email protected]:2408)
at componentEffect ([email protected]:6384)
at reactiveEffect ([email protected]:410)
at effect ([email protected]:385)
at setupRenderEffect ([email protected]:6337)
at mountComponent ([email protected]:6296)
at processComponent ([email protected]:6254)
at patch ([email protected]:5867)
at patchKeyedChildren ([email protected]:6633)

1
luis felipe guarin pastrana
luis felipe guarin pastrana
Estudiante

Porque me sale este error??
"Write operation failed: computed value is readonly"
Ayudaaa!!

 const{ createApp, ref, reactive, toRefs, watch, computed } = Vue;

        const app = createApp({
        setup() {
          const products = ref([
            {
              name:"Camara",
              price:450_000,
              stock:3,
              content: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
                atque dolorum corporis, reiciendis eaque temporibus quod magnam amet
                ea natus delectus? Aut placeat ipsam minus labore voluptas. Porro,
                vel aliquid!`,
              images: [
                {
                  image:"./img/camara.jpg",
                  thumbnail:"./img/camara-thumb.jpg"
                },
                {
                  image:"./img/camara-2.jpg",
                  thumbnail:"./img/camara-2-thumb.jpg"
                }
              ],
              offer: true,
              new: true,
              quantity:1
            },
            {
              name:"Microfono",
              price:950_000,
              stock:3,
              content: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
                atque dolorum corporis, reiciendis eaque temporibus quod magnam amet
                ea natus delectus? Aut placeat ipsam minus labore voluptas. Porro,
                vel aliquid!`,
              images: [
                {
                  image:"./img/camara.jpg",
                  thumbnail:"./img/camara-thumb.jpg"
                },
                {
                  image:"./img/camara-2.jpg",
                  thumbnail:"./img/camara-2-thumb.jpg"
                }
              ],
              offer: true,
              new: true,
              quantity:1
            },
            {
              name:"Camara PL",
              price:250_000,
              stock:2,
              content: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
                atque dolorum corporis, reiciendis eaque temporibus quod magnam amet
                ea natus delectus? Aut placeat ipsam minus labore voluptas. Porro,
                vel aliquid!`,
              images: [
                {
                  image:"./img/camara.jpg",
                  thumbnail:"./img/camara-thumb.jpg"
                },
                {
                  image:"./img/camara-2.jpg",
                  thumbnail:"./img/camara-2-thumb.jpg"
                }
              ],
              offer: true,
              new: true,
              quantity:1
            },
            {
              name:"Audifonos PL",
              price:750_000,
              stock:5,
              content: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
                atque dolorum corporis, reiciendis eaque temporibus quod magnam amet
                ea natus delectus? Aut placeat ipsam minus labore voluptas. Porro,
                vel aliquid!`,
              images: [
                {
                  image:"./img/camara.jpg",
                  thumbnail:"./img/camara-thumb.jpg"
                },
                {
                  image:"./img/camara-2.jpg",
                  thumbnail:"./img/camara-2-thumb.jpg"
                }
              ],
              offer: true,
              new: true,
              quantity:1
            }
          ]);

          const cartState = reactive({
            cartOpen: false,
            cart: [],
            total: computed(()=> {
              return cartState.total = cartState.cart.reduce((prev, curr) => {
              const prevPrice = prev.price || prev;
              const prevQuantity = prev.quantity || 1;
              return prevPrice * prevQuantity + curr.price * curr.quantity;
              }, 0);
            })
            /* total: 0 */
          });

          /* const total = computed(()=>{
            return cartState.total = cartState.cart.reduce((prev, curr) => {
              const prevPrice = prev.price || prev;
              const prevQuantity = prev.quantity || 1;
              return prevPrice * prevQuantity + curr.price * curr.quantity;
            }, 0);
          }) */

          function addToCart(product) {
          const prodIndex = cartState.cart.findIndex(prod => prod.name === product.name);
            if (prodIndex >= 0) {
              cartState.cart[prodIndex].quantity += 1;
            } else {
              cartState.cart.push(product);
            }
            product.stock -= 1;
          }

          /* watch(cartState.cart, (value, oldValue) => {
            cartState.total = cartState.cart.reduce((prev, curr) => {
                const prevPrice = prev.price || prev;
                const prevQuantity = prev.quantity || 1;
                return prevPrice * prevQuantity + curr.price * curr.quantity;
              }, 0);
          }) */return {
            ...toRefs(cartState),

            addToCart,

            products
          };
        }
      });
1
Juan Camilo Palacio Alvarez
Juan Camilo Palacio Alvarez
Estudiante

Cual es la diferencia de trabajar en product como parametro a product como contexto (this)? Es un tema de rendimiento? accesibilidad?

1
jgarciafi
jgarciafi
Estudiante

Falta mucho por explicar no?
Tema de routas? hacer diferentes paginas links a otras webs etc etc etc,

1
Jaime Eduardo Falla Cardozo
Jaime Eduardo Falla Cardozo
Estudiante

Me queda la pregunta entonces son data() y ref no se maneja reactividad o son formas diferentes de manejarla? ¿Cuál es la mejor?

1
Fabian Oswaldo Hernandez Murcia
Fabian Oswaldo Hernandez Murcia
Estudiante

SI quisiera traer un listado de productos de un back (php) o json, puedo hacer un ajax antes donde reciba los datos de los productos, y decir por ejemplo: products:resultado ?

1
Brayan Israel Rios Martinez
Brayan Israel Rios Martinez
Estudiante

porque en :class="{ 'bg-gray': index & 1 }">

se tuvo que agregar comillas simples a la clase bg-gray

1