![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](https://image.slidesharecdn.com/intro-to-vue-170913091718/85/Introduccion-a-VueJS-7-320.jpg)
![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](https://image.slidesharecdn.com/intro-to-vue-170913091718/85/Introduccion-a-VueJS-11-320.jpg)
Introducción a VueJS
- 1. Vue.js ¿a que viene tanto hype?
- 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
- 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/
Notas del editor
- #7: Declarative Rendering: vue compila las templates en una funcion render… (como React, pero automáticamente) Conditionals and Loops Events Bindings
- #8: v-if también hay v-show
- #9: como el ng-click funciona con todos los eventos: @hover @load ver las herramientas de desarrollo
- #13: ¿cómo funciona? la diferencia con Angular.js la diferencia con React Angular.JS Tabla de bindings - ciclo de $digest… se repite hasta que no cambia nada REACT Virtual DOM, re-renderizar toda la aplicación siempre, diff con el DOM real y hacer los mínimos cambios ‘shouldComponentUpdate’ para optimizar
- #17: $ npm install -g vue-cli $ vue init webpack-simple my-project $ cd my-project $ npm install $ npm run dev
- #21: la vista principal tiene un <router-view></router-view> el router selecciona un componente para renderizar en ese punto a partir de la URL y mucho más: rutas anidadas, parámetros, guardas…