Manejando datos

Propiedades computadas de VueJS

Posted by in Javascript y TypeScript

Seguimos aprendiendo Vue, y más cositas de las plantillas. En esta ocasión toca hablar de las propiedades computadas de VueJS. Se trata de una de las características más simples de todo lo que te ofrece Vue, y que no es sino la opción de evitar lógica compleja en la vista, y hacerlo más aseguible dentro del objeto Vue. Propiedades computadas El mejor ejemplo de cómo utilizar, o el por qué utilizar las propiedades computadas es el que viene recogido en la documentación oficial: https://vuejs.org/v2/guide/computed.html. Se trata de poner una cadena…read more

Eventos en VueJS

Posted by in Javascript y TypeScript

Seguimos aprendiendo VueJS, y tras una introducción, un primer ejemplo, y avanzar un poco más, toca experimentar con los eventos en VueJS. En el ejemplo de hoy, aprenderemos a cumplimentar los métodos que soporta el objeto Vue, cómo están relacionados los «data» y «methods» mediante «this», y cómo trabajar con eventos. Ejecución de eventos en VueJS Lo primero que hay que conocer es que necesitamos incluir v-on:evento=»funcion_evento» para generar un evento, pero también puede ser acortado con un @evento=»funcion_evento». Y el resultado es: que al pulsar el boton, se convierte…read more

Condicionales con VueJS

Posted by in Javascript y TypeScript

Seguimos aprendiendo VueJS, y ahora le toca el turno a las condicionales con VueJS. Se trata de utilizar los if … then, o if … else if … else … El ejercicio que vamos a realizar es bastante sencillo, y dentro del código HTML se utiliza la directiva v-if, v-else-if o v-else. El objetivo El objetivo del ejercicio de hoy es disponer de 2 botones, uno para «Me gusta» y otro para «No me gusta«, que están controlados por una variable like y notlike. Si pulso un botón, cambiaré el…read more

Herramientas para desarrollar con VueJS

Posted by in Javascript y TypeScript

Sin duda, VueJS es un framework que está teniendo una aceptación tremenda en el desarrollo web, y yo soy uno de ellos. Normalmente, el que tenga éxito un framework suele venir acompañado de herramientas de desarrollo vinculadas al mismo, y al igual que Facebook está al frente de React y se han desarrollado herramientas, algo similar sucede con las herramientas para desarrollar con VueJS. Vuejs DevTools En Firefox hay una extensión llamada Vue.js devtools que puedes incorporar: Al incorporar VueJS a las herramientas de desarrollador, encontrarás un icono arriba que…read more

ES6: funciones flecha: arrow functions

Posted by in Javascript y TypeScript

Seguimos profundizando en ES6, y tras la primera entrega sobre trucos, hoy está dedicado por completo a las funciones flecha, arrow functions. El concepto de detrás de estas funciones es reducir la sintaxis, son anónimas, no están vinculadas con «this», y siempre tienen algo que devolver. Están definidas por una fecha: () => { } La sintaxis más sencilla es: que equivale a: Cómo puede comprobar, es más reducido en síntaxis, y varia si incluye argumentos o no. Por lo general, se da por supuesto que devuelve un valor, y…read more