Cómo usar Vue.js

Frontend con Vue.js

Entre React, Angular y Vue, realmente trabajar con Vue.js es la opción más fácil. Estaba con duda de que camino seguir, pero mi primer Framework o Librería será Vue.js.

https://platzi.com/vue/

Sebastián Buitrago

Array con la informacion de las peliculas

[
            {
              name: "Avengers",
              available: 3,
              quantity: 0,
            },
            {
              name: "Terminator",
              available: 5,
              quantity: 0,
            },
          ]

Miguel Ángel Reyes Moreno

Realmente vue se ve más sencillo.

antonn-fernandez

Primero es tener bases de Javascript bien solidad.
Despues ir por Vue y Svelte
Finalmente podemos pasar a React y Angular.

Pum! Super Frontend Developer

Jaime Ortiz

Qué belleza de framework! Yo 💚 a VueJs!

Sebastián Buitrago

url del proyecto https://unpkg.com/[email protected]/dist/vue.global.js

Irving Juárez

Les recomiendo la documentación oficial de VueJS, ahí explican mejor como puedes hacer cositas interesantes como esta

Julian David Toro Medina

Platzi debería tener un modo cine como YouTube 🤘

Nicolas David Pastran Zamora

Personalmente me fascina vue. Todas sus características me encanta. Inicie un proyecto personal tal cual como lo hacen el el vídeo con el cdn de vue para una pantalla que en ese momento era muy compleja con vanilla js, luego ingresé a una empresa y trabaje mucho con un proyecto con vue como framework y ahora estoy trabajando de nuevo en mi proyecto personal con nuxtjs la alternativa de vue para ssr. Lo mejor es que pude copiar y pegar el código que hice con la librería de vue y funcionó sin mayor problema. Ahora la página carga en 2.5s y tiene un 97 en móvil en Google speed test. Muchachos no duden en iniciar o volverse expertos en vue es muy bueno excelente experiencia desarrollando y excelente resultados. Creo que indirectamente los vídeos demuestran la experiencia de desarrollo. *Vue*: 9min *React*: 13min *Angular*: 16min

Fabián Andrés Pacherres Bautista

el v-on se puede remplazar por @
así como el v-bin en :

Juan Pablo Jimenez

Está muy bien Vue, ahora no se cual empezar a aprender primero, si vue o React. Angular me pareció un poco más complejo pero no mucho, aunque si preferiría empezar con alguno más simple para que los conceptos me queden más claros.

Alberto Cházaro Romero

Angular, Vue y React tienen sus peculiaridades; sin embargo, yo empecé con React y debo ser sincero, a mi si me gusta combinar el HTML con JS en un mismo componente, lo que muchos califican de que el código se ve sucio jejeje

Karen Hernández

Wow Vue se ve mas sencillito, me gusto mucho

Anfernee Valera

Joder, me parece super hermoso Vue, siento que ha sido amor a primer código 😍

Max Andy Diaz Neyra

Codigo final de la clase:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <div id="root">
      <h2>Películas</h2>
      <form v-for="movie in movies">
        <h3>{{movie.name}}</h3>
        <button
          type="button"
          @click="movie.quantity -=1"
          :disabled="movie.quantity<=0"
        >
          -
        </button>
        {{movie.quantity}}
        <button
          type="button"
          @click="movie.quantity +=1"
          :disabled="movie.quantity>=movie.available"
        >
          +
        </button>
      </form>
    </div>
    <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
    <script>
      const { createApp } = Vue;

      const app = createApp({
        data() {
          return {
            movies: [
              {
                name: "Avenger",
                available: 5,
                quantity: 0
              },
              {
                name: "Terminator",
                available: 3,
                quantity: 0
              }
            ]
          };
        }
      });

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

Esteban Piedrahita

me impresiona lo fácil que es Vue, creo que voy a darle una oportunidad

Daniel Morán

Me encanta Vue, totalmente recomendable como tu primer gran framework de Js

Fabián Andrés Pacherres Bautista

Vue.js para mi, es el mejor framework para empezar en el mundo front-end

Leobardo Licona Soto

Puedo leer que hay mucho amor por Vue.js, realmente me parece el framework con menor curva de aprendizaje. Aprendamos Vue.js!

Oscar Aguilar López

Que bonito es Vue 😃

Luis Rangel Castro

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>Peliculas</h2>
      <form v-for="movie in movies">
        <h3>{{movie.name}}</h3>
        <button
          type="button"
          v-on:click="movie.quantity--"
          v-bind:disabled="movie.quantity <= 0"
        >
          -
        </button>
        {{movie.quantity}}
        <button
          type="button"
          v-on:click="movie.quantity++"
          v-bind:disabled="!(movie.quantity < movie.available)"
        >
          +
        </button>
      </form>
    </div>
    <script>
      const { createApp } = Vue;

      const app = createApp({
        data() {
          return {
            movies: [
              { name: "Avengers", available: 5, quantity: 0 },
              { name: "Wonder Woman", available: 15, quantity: 0 }
            ]
          };
        }
      });

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

Cristian Diaz

De verdad que Vue.js es comparativa más fácil (al menos para iniciar un proyecto pequeño) que React o Angular, me está como tentando este que los anteriores…

Jose Castillo

Yo me adelante un poco en el video, haciéndolo con la sintaxis que leí en la documentación , y quedo así:

<form v-for="movie in movies">
        <h3>{{ movie.name }}</h3>

        <button
          @click="movie.quantity -=1"
          type="button"
          :disabled="movie.quantity <= 0"
        >
          -
        </button>
        {{ movie.quantity }}
        <button
          @click="movie.quantity +=1"
          type="button"
          :disabled="movie.quantity >= movie.available"
        >
          +
        </button>
      </form>

Juan Guillermo Perez Cardozo

vue es la sencillez y potencia en la misma pildora

Bryan Figueroa

wtf que simple y sencillo es vue, que bonito

Abigail Perez

con vue se tardo menos 😮

Ezequiel Rodriguez Esparza

Con este video me decido por vue.js es mucho más sencillo que angular

Víctor Isaac Arias García

Me encanto como se hace desde Vue JS y eso que solo fue como libreria me quede con ganas de ver como se hace como Framework creo que me voy por Vue JS para JavaScript

Rodrigo Ramos Xochiteotzin

Creo que es la forma más sencilla de empezar a trabajar con librerías porque se parece más a lo que haces iniciando en HTML y Javascript. Con el trasfondo del curso de web components creería que es la forma más sencilla

Luis Rangel Castro

Que bonito es lo bonito!!!

Charles Duck Castillo Rosas