Vue.js
Un modelo reactivo eficiente
¿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'
}
});
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
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>
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
A cada propiedad se le añade un getter y un setter (con el método de ES5 Object.defineProperty)
Esto permite:
- Rastreo de dependencias
- Notificación de cambios
AngularJS
- Usa dirty-checking
- Cada que se hace $scope.apply(), se revisan todas las variables de $scope.
- Optimizaciones como one-time bindings
React
Usa virtual DOM diffing
shouldComponentUpdate()
La única optimización que verán será
track-by
Ejemplo de la vida real
- Hecha por Football Radar
- 50 partidos de fútbol actualizados cada segundo durante 30 segundos
- Se tienen en cuenta: Reloj, puntaje, jugadores, tarjetas, entre otros
React
Vue
Modificando las variables
React
Vue
100 juegos
100 ms
500 juegos
1000 ms
Ecosistema
Herramientas => vue-devtools
Routing => vue-router
Manejo de estado => vuex
HTTP => vue-resource
CLI => vue-cli
Single file components
Producción
Browserify => vuefy
Webpack => vue-loader
Recursos
When you replace jQuery + Angular with @vuejs. pic.twitter.com/RGtx1oVJkN
— Jack McDade (@jackmcdade) March 8, 2016
Vue.js
By mathius17
Vue.js
- 972