Un modelo reactivo eficiente
@youyuxi
Mmm.... tal vez no
Necesita ECMAScript 5
No soporta IE8 (o menores)
Pero si los demás navegadores
Con código por favor!
3 conceptos básicos:
Como en AngularJS
Para eventos (v-on)
Para "enlazar" propiedades (v-bind)
// 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>
// 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
Como en AngularJS
// js
new Vue({
data: {
person = {
name: 'Mateo Calle',
age: 23,
}
}
});
// html
// <p>{{ person.name | uppercase }}</p>
// Produce => MATEO CALLE
<app>
<app-header></app-header>
<app-menu></app-menu>
<app-content></app-content>
<app-footer></app-footer>
</app>
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
El modelo ES un objeto nativo de 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:
Usa virtual DOM diffing
shouldComponentUpdate()
La única optimización que verán será
React
Vue
React
Vue
100 juegos
100 ms
500 juegos
1000 ms
When you replace jQuery + Angular with @vuejs. pic.twitter.com/RGtx1oVJkN
— Jack McDade (@jackmcdade) March 8, 2016