Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Ejemplo, tutorial práctico de VueJS
Actualizado el 27 Mayo, 2017 y leído 2,354 veces
Calificación: 10.00 / 10

Ejemplo, tutorial práctico de VueJS

Anexsoft

¿Qué es VueJS?

Es un framework para crear interfaces con javascript, podemos crear hasta aplicaciones SPA porque maneja routers, etc. Pero esto último de hacer APP SPA no estoy tan seguro, lo que si nos va ayudar mucho con el desarrollo de componentes reutilizables y ahorrar varias líneas de código. VueJS implementa el patrón MVVM.

 

Ventajas

  • Vamos ahorrar mucha lineas de código porque cualquier cambio que hagamos una propiedad, el watcher de VueJs lo detecta y refrescará el DOM sin tener que actualizar todo, y evitando que tengamos que hacer los cambios manualmente.
  • Buen Performance, hice la prueba de Riot VS Vue con 2 mil registros y RiotJs hizo colapsar el navegador.
  • Comunidad muy amplia.
  • Implementa una API solida a diferencia de RiotJS, todo tiene un porque. Aquí no es, te doy las cosas y hazlo a tu manera, no, sigue las cosas como dicen en al documentación. Tranquilo, mi trabajo es resumirte la documentación y hacerlo ver fácil.
  • Curva de aprendizaje menor a React, Angular (aunque yo prefiero no compararlo con Angular).
  • No mezcla código javascript con HTML..

 

¿En que consiste el ejemplo?

Vamos a desarrollar un componente que nos permita crear una libreta de los pagos que tenemos en un mes, mediante este vamos a poder determinar los que no falta pagar y lo que hemos pagado.

 

Ejemplo realizado

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Vue Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1 class="jumbotron">VueJs</h1>
        <div id="app">
          <table class="table table-stripped">
            <thead>
              <tr>
                <th style="width:40px;"></th>
                <th>Descripción</th>
                <th style="width:200px;">Monto</th>
                <th style="width:100px;">¿Cancelado?<th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td></td>
                <td>
                  <input type="text" class="form-control" v-model="newEntry.name" />
                </td>
                <td>
                  <input type="text" class="form-control" v-model="newEntry.amount" />
                </td>
                <td>
                  <button @click="add()" type="button" class="btn btn-success btn-block">Agregar</button>
                </td>
              </tr>
              <tr v-if="items.length === 0">
                <td colspan="4" class="text-center">
                  No hay registros por mostrar
                </td>
              </tr>
              <tr v-for="item, index in items">
                <td>
                  <button 
                    @click="remove(index)"
                    type="button" class="btn btn-danger btn-xs">
                    <i class="glyphicon glyphicon-trash"></i>
                  </button>
                </td>
                <td>{{ item.name }}</td>
                <td>{{ item.amount.toFixed(2) }}</td>
                <td class="text-center" :title="item.paid ? 'Si' : 'No'">
                  <button
                    @click="changeToPaid(item)"
                    class="btn btn-default btn-sm"
                    :class="{ 'btn-success': item.paid  }">

                      <i v-if="item.paid" class="glyphicon glyphicon-ok"></i>
                      <i v-if="!item.paid" class="glyphicon glyphicon-remove"></i>

                    </button>
                </td>
              </tr>
            </tbody>
            <tfoot>
              <tr class="text-danger">
                <td></td>
                <td class="text-right">Por pagar</td>
                <td>{{ totalAmount(0) }}</td>
                <td></td>
              </tr>
              <tr class="text-success">
                <td></td>
                <td class="text-right">Pagado</td>
                <td>{{ totalAmount(1) }}</td>
                <td></td>
              </tr>
              <tr class="text-info">
                <td></td>
                <td class="text-right">Total</td>
                <td>{{ totalAmount(2) }}</td>
                <td></td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  </div>
  <script src="https://unpkg.com/vue"></script>
  <script>
    var app = new Vue({
      el: '#app', // Elemento
      data: { // Parametros
        newEntry: {
          name: '',
          amount: 0
        },
        items: [{
            name: 'Servicios',
            amount: 200,
            paid: false
          },
          {
            name: 'Hosting de Anexsoft',
            amount: 90,
            paid: true
          },
        ]
      },
      methods: {
        remove: function(index) {
          this.items.splice(index, 1);
        },
        // Ecmascript 6 syntax
        add() {
          this.items.push({
            name: this.newEntry.name,
            amount: parseFloat(this.newEntry.amount),
            paid: false
          });

          this.newEntry.name = '';
          this.newEntry.amount = 0;
        },
        changeToPaid(item) {
          item.paid = !(item.paid);
        },
        totalAmount(t){
            var total = this.items.reduce(function(a, b) {
              switch(t) {
                case 0: return a + (!b.paid ? b.amount : 0);
                case 1: return a + (b.paid ? b.amount : 0);
                case 2: return a + b.amount;
              }
            }, 0);

            return total.toFixed(2);
        }
      }
    });
  </script>
</body>
</html>

 

Cualquier duda me dejan un comentario.

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.