Vue.js

Un modelo reactivo eficiente

Mateo Calle M.

Twitter: @Mathius17

Github: Mathius17

¿Qué es?

Framework (?) de frontend
Librería para construir interfaces interactivas
Creado por Evan You
Inspirado en AngularJS
25.79kb min + gzip
20k+ estrellas en Github

@youyuxi

Compatible con todos los navegadores

Mmm.... tal vez no

Necesita ECMAScript 5

No soporta IE8 (o menores)

Pero si los demás navegadores

¿Quién lo usa?

Pagekit (CMS)
Alibaba
Baidu
Xiaomi
Incluso facebook!
Y muchos más

Conceptos

Con código por favor!

Baja curva de aprendizaje

3 conceptos básicos:

Directivas
Componentes
Filtros

Directivas

Como en AngularJS

v-if
v-show
v-for (listas)
v-model
otras más

Para eventos (v-on)

v-on:click
v-on:submit.prevent
@click
@keyup.enter

Para "enlazar" propiedades (v-bind)

v-bind:class
v-bind:src
:class
:disabled

Two-way binding

// js
new Vue({
  el: '#demo',

  data: {
    nombre: 'Mateo'
  }
});

demo

Como en AngularJS

<!DOCTYPE html>
<html>
<head></head>
<body id="app">
  <p>Hola {{ nombre }}!</p>

  <input
    type="text"
    v-model="nombre"
  >
</body>
</html>

Computed properties

// js
new Vue({
  el: '#demo',

  data: {
    centigrados: 20
  },

  computed: {
    farenheit: function() {
      return this.centigrados * (9 / 5) + 32;
    }
  }
});


// html
// <p>{{ farenheit }} F</p>
// produce => 68 F

demo

Filtros

Como en AngularJS

// js
new Vue({
  data: {
    person = {
      name: 'Mateo Calle',
      age: 23,
    }
  }
});

// html
// <p>{{ person.name | uppercase }}</p>
// Produce => MATEO CALLE

Basado en componentes

<app>
  <app-header></app-header>

  <app-menu></app-menu>

  <app-content></app-content>

  <app-footer></app-footer>
</app>

demo

Modelo reactivo eficiente

Ember.js

const Person = Ember.Object.extend({
  nombre: 'Mateo',
  apellidos: 'Calle',
  edad: 18
});

let me = Person.create();

// Obtener nombre
me.get('nombre'); // Retorna => Mateo
me.set('edad', 23); // Cambia edad a 23

Modelo

El modelo ES un objeto nativo de JS

Modelo en Vue.js

let me = {
  nombre: 'Mateo',
  apellidos: 'Calle',
  edad: 18
};

let vm = new Vue({
  data: {
    persona: me;
  }
});

vm.persona.nombre; // Retorna => Mateo
vm.persona.edad = 23; // Cambia edad a 23