Una introducción rápida al framework de JavaScript VueJS. Se da un ligero repaso a los frameworks de JavasCript, señalando las ventajas de VueJS, su funcionamiento interno y algunas de sus características. Transparencias de la charla del 12 de Septiembre de 2017 en el Madrid International Lab para el Meetup VueJS Madrid.

1. Vue.js
¿a que viene tanto hype?

2. El problema fundamental

3. Frameworks de JS
1ª generación
2ª generación
3ª generación

4. ¡ Se dice /vjuː/ !
¿ Sabes que estoy
aprendiendo vue ?

5. Lo simple es fácil
<script src="https://unpkg.com/vue"></script>

6. Lo simple es fácil
<div id="app">
{{message}}
</div>
Declarative
Rendering
var app = new Vue({
el: '#app',
data: {
message: 'hola vue!',
},
});
HTML JavaScript

7. Condicionales y Bucles
var app = new Vue({
el: '#app',
data: {
frameworks: ['React',
'Vue.js',
'Angular.io'],
},
methods: {
isCool(framework) {
return framework === 'Vue.js';
},
},
});
<div id="app">
<ul>
<li v-for="framework in frameworks">
{{framework}}
<span v-if="isCool(framework)">
, so cool!
</span>
</li>
</ul>
</div>
HTML JavaScript

8. Eventos
var app = new Vue({
...
methods: {
isCool(framework) {
return this.cool.indexOf(framework) !== -1;
},
toggleCool(framework) {
if( this.isCool(framework) )
this.cool.splice(this.cool.indexOf(framework),1);
else
this.cool.push(framework);
}
},
});
<ul>
<li
v-for="framework in frameworks"
@click="toggleCool(framework)">
{{framework}}
<span v-if="isCool(framework)">
, so cool!
</span>
</li>
</ul>
HTML JavaScript

9. Enlazando (binding) atributos
<ul>
<li class="framework-item"
:class="{cool: isCool(framework)}"
v-for="framework in frameworks"
@click="toggleCool(framework)">
{{framework}}<span v-if="isCool(framework)">, so cool!</span>
</li>
</ul>

10. Observando cambios (watches)
data: {
…
},
methods: {
…
},
watch: {
cool() {
console.log("sending data to server");
console.log(JSON.stringify({cool: this.cool}));
},
},
computed: {
…
}

11. Propiedades
Calculadas
var app = new Vue({
…
data: {
…
bkColor: 'red',
},
methods: {
…
changeColor() {
var colors = ['red', 'blue', … ];
var idx = Math.round(Math.random() * colors.length);
this.bkColor = colors[idx];
},
},
computed: {
howMany() {
console.log('recomputing howMany');
return this.cool.length;
}
}
});
…
<div
@click="changeColor"
:style="{'background-color': bkColor}">
There are {{ howMany}} cool frameworks
</div>
…
HTML JavaScript

12. Reactividad

13. Object.defineProperty()* Getters + Setters
Object.defineProperty(this, 'temperature', {
get: function() {
console.log('get!');
return temperature;
},
set: function(value) {
temperature = value;
archive.push({ val: temperature });
}
});
* Disponible en JavaScript desde ES5, http://caniuse.com/#feat=es5

15. Componentes
vue instances

16. Single-File components
// MyComponent.vue
<template>
<div></div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style lang="less">
</style>
js
css
webpack
(o browserify)

17. Comunicación entre Componentes
• de padres a hijos
• props
• slots
• de hijos a padres
• eventos

18. Comunicación entre Componentes
• entre componentes en general
• bus de eventos
• vuex

19. Vuex

20. Routing

21. Otras cosas
• axios
• filtros
• directivas
• mixins
• SSR
• typescript
• vue devtools
• time machine? claro!

22. Referencias
• https://jdonsan.gitbooks.io/desarrolla-aplicaciones-con-
vuejs/content/
• https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-
2017-comparison-c5c52d620176
• https://carlosazaustre.es/vue-single-file-components/
• https://www.udemy.com/vuejs-2-the-complete-guide/
• https://vuejs.org/v2/guide/