Download - Vue.js: El framework javascript para muggles
![Page 1: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/1.jpg)
![Page 2: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/2.jpg)
DESARROLLO WEB 101HTML Estructura y ContenidosCSS PresentaciónJavascript Interacción
![Page 3: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/3.jpg)
PROGRAMAR JAVASCRIPT
SIN LIBRERÍAS NI FRAMEWORKS
![Page 4: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/4.jpg)
![Page 5: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/5.jpg)
JAVASCRIPT CON JQUERYSimplePotenteLigeroEstá muy bien ... para cosas sencillas
![Page 6: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/6.jpg)
EJEMPLO
![Page 7: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/7.jpg)
COMO DEBE FUNCIONARA la izquierda hay un listado de comentariosA medida que el vídeo avance, se debe resaltar elcomentario pertinenteSi pulsamos en el comentario, reposiciona el vídeo
![Page 8: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/8.jpg)
HASTA AQUÍ, BIENEs factible hacerlo con jQueryDe hecho, estaba asíPero llegan nuevas especificaciones
Contador de tiempo real (Hora de inicio +timestamp)Controles play/pause adicionalesAl hacer pause, queremos cambiar la url
![Page 9: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/9.jpg)
JQUERY EMPIEZA A QUEDARSE PEQUEÑOCódigo confuso, frágil y difícil de modificarTodos las funciones tienen que saber de todoPor ejemplo, el botón de pause debe:
Poner el vídeo en pausaCambiar la URLCambiar su propia imagen (de a )Parar el contador de tiempo real
![Page 10: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/10.jpg)
![Page 11: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/11.jpg)
ENTORNOS REACTIVOS
Para resolver estos problemas se desarrollanframeworks reactivos, que se basan en:
El patron MVVM (Modelo Vista VistaModelo)data-binding y two way data-binding
![Page 12: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/12.jpg)
EL PATRON MVVM (MODELO VISTA VISTAMODELO)
Es una versión del patron MVC. En este caso tenemosun modelo y una vista (o vistas). Pero la interacciónentre ellos es automática, no se implementa con un
controlador sino que se declara.
![Page 13: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/13.jpg)
DATA-BINDIBG
Al cambiar un dato en el modelo, este cambio serefleja o propaga de inmediato a la vista o vistas que
dependan de él
![Page 15: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/15.jpg)
![Page 16: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/16.jpg)
OBSÉRVESE QUE...Al iniciar Vue especificamos el elemento en el quepuede actuar, en este caso, #app. Vue nointeractuará ni afectará nada que no esté dentro deese elementoUsamos los delimitador {{, }} para realizar unenlace o binding entre la página y nuestro modelo.La página es reactiva
![Page 17: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/17.jpg)
VUE TAGS: V-HTML
Podemos vincular con el contenido, respetando lasmarcas html con la directiva v-html
Lab 2: La directiva v-html
![Page 18: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/18.jpg)
![Page 19: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/19.jpg)
OBSÉRVESE QUE...Podemos almacenar el resultado de la llamada aVue en una variable (vm en este caso)Todas las directivas de vue empieza con v-
![Page 20: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/20.jpg)
VINCULAR UN ATRIBUTO HTML
Podemos vincular un dato de nuestro modelo con unatributo; para ello usamos la directiva v-bind
Lab 3: La directiva v-bind
![Page 21: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/21.jpg)
![Page 22: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/22.jpg)
OBSÉRVESE QUE...Lo más habitual es para cambiar la clase, aunque sepuede modificar cualquier atributoSe puede abreviar de la siguiente manera:
v-bind:href ≌ :href
![Page 23: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/23.jpg)
TWO-WAY DATA BINDINGPodemos realizar una vinculación de doble sentidoLos cambios en el modelo se reflejaran en la vista, ylos cambios en la vista se reproducirán en el modelopara ello usamos la directiva v-model
Lab 4: La directiva v-model
![Page 24: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/24.jpg)
![Page 25: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/25.jpg)
LAS DIRECTIVAS V-IF Y V-SHOWLas dos permite controlar si un elemento aparece ono en la páginaLa diferencia es que con v-if el elementorealmente estará o no en el arbol DOM,dependiendo del predicado, pero con v-show elelementos siempre estará, y será visible o no enfunción del predicado
Lab 5: La directiva v-if
![Page 26: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/26.jpg)
![Page 27: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/27.jpg)
OBSÉRVESE QUE...Dentro de la condición podemos incluir expresionesen javascript (solo una línea)Si queremos que la directiva afecte a variasetiquetas, podemos agruparlas <template v-if="..."> y </template>, estas desaparecenen el resultado finalExiste la directiva v-else
![Page 28: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/28.jpg)
LA DIRECTIVA V-FORPodemos usar la directiva v-for para recorrer unalista de datosLa sintaxis usa la forma v-for="item initems"
Lab 6: iterar con la directiva v-for
![Page 29: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/29.jpg)
![Page 30: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/30.jpg)
OBSERVACIONESPodemos obtener el índice con la sintaxis (item,index) in itemsTambién se puede iterar por las propiedades de unobjetoOjo con los métodos que no modifican un array, sinoque devuelven uno nuevoCuidado: Cambios por el índice no son detectadospor Vue, usar siempre shift, unshift, pop, etc...
![Page 31: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/31.jpg)
MÉTODOS CON V-ONPodemos vincular acciones con métodos usando ladirectiva v-on:eventoTenemos que definir nuestros métodos en laentrada methods de Vue.
Lab 7: Métodos y la directiva v-on
![Page 32: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/32.jpg)
![Page 33: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/33.jpg)
![Page 34: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/34.jpg)
![Page 35: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/35.jpg)
OBSERVACIONESEl contenido de v-on es javascript, pero lo normal esque sea una llamada a un métodoExisten modificadores del evento, en la forma v-on.event.modifier, por ejemplo v-on:keyup.enter solo se activa si la tecla pulsadaes enterPodemos abreviar v.bind:evento=... como@evento=...
![Page 36: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/36.jpg)
FILTROSVue.js permite definir filtros para presentación yformateo de resultadosSe usan igual que los filtros de Django, después delcaracter pipe "|"Podemos encadenar varios filtrosPueden tener argumentos adicionales (Y más deuno, no como Django)Se declaran en la entrada filters
![Page 37: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/37.jpg)
COMPONENTESPodemos hacer componentes, que son comoinstancias pequeñas de vue con sus propiasplantillas, métodos, modelos, etc...Muy interesantes y muy potentesLos componentes pueden usar otros componentes,lo que permite estructurar la aplicación a modo debloques
![Page 38: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/38.jpg)
COSAS QUE NO PODREMOS VER HOY
Pero resultan interesantes
Sobre todo si tienes javascript en el servidor
Componentes en un solo fichero .vueIncludes dinámicos de código javascriptVuex para gestionar el estado de la aplicaciónPluginsTestingOne-page appsA lot of stuff...
![Page 39: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/39.jpg)
YO VINE AQUÍ A HABLAR DE MI LIBRO (1/2)
![Page 40: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/40.jpg)
YO VINE AQUÍ A HABLAR DE MI LIBRO (2/2)
![Page 41: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/41.jpg)
MEJORAS OBTENIDASDe jquery a Vue.js, con la misma funcionalidadinicial, produjo un código ≊ 30% más pequeñoCon la nueva funcionalidad, ≊ 90% código que en laversion anterior con jQuery (Awesome!)Mucho más fácil de comprender, reparar y/oextenderPuedes seguir usando jQuery, no son incompatibles
![Page 42: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/42.jpg)
TRUCO 1: USAR EN DJANGOLas plantillas de Django usan el mismo sistema queVue; los delimitadores {{ y }}Para usar Vue.js desde Django con comodidad, hayun parámetro en la configuración, delimitersque permite usar como delimitadores los que túespecifiques, yo cambio {{ }} por [[ ]]
delimiters: ['[[', ']]'],
![Page 43: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/43.jpg)
TRUCO 2: HAZ QUE DESAPAREZCAN LOS BIGOTES {{ }}En la carga de la página, se pueden ver, las marcasde plantilla hasta que Vue haya terminado decargarse e inicializarse. Feo.Para resolverlo, Vue aplica inicialmente la directivav-cloak a todo lo que tenga bajo su control, ycuando ya esté completamente operativo la quita.En resumen, esto en tu hoja de estilos deberíaresolver el problema:
[v-cloak] { display:none; }
![Page 44: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/44.jpg)
FRAMEWORKS SIMILARES A VUE.JS
Ember, Polymer, Backbone... You named it
Angular.jsReactKnockout.js
![Page 45: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/45.jpg)
¿POR QUÉ VUE.JS? (1/2)
WARNING: ABSOLUTELY SUBJECTIVE OPINIONS AHEAD!
Pequeño tamañoLos modelos son simples objetos javascript, no hayque heredar, registrar, llamarlos de deteminadamanera, etc...Se puede empezar a usar simplemente añadiendo lalibrería vue.js (Luego si quieres te puedes liar lamanta a la cabeza, pero no es obligatorio instalar 20dependencias para el hola mundo)
![Page 46: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/46.jpg)
¿POR QUÉ VUE.JS? (2/2)
WARNING: ABSOLUTELY SUBJECTIVE OPINIONS AHEAD!
No es de facebookPara componentes usa los tres lenguajes que yaconocemos: Html, css y javascript para contenidos,presentacion y lógicaSi quieres, puedes entender lo que pasainternamente, no hay "magia"
![Page 47: Vue.js: El framework javascript para muggles](https://reader034.vdocuments.co/reader034/viewer/2022042611/5a6e91dd7f8b9a38568b4c5f/html5/thumbnails/47.jpg)
Por eso esta presentación se llama...
VUE.JS - EL FRAMEWORK JAVASCRIPT PARAMUGGLES
Juan Ignacio Rodriguez de León Licenciado en Frameworks Mágicos por la escuela de Magia de Hogwarts
euribates at gmail.com · en twitter Esta presentación se puede descargar de
@jileonhttps://githu.com/euribates/vuelab/