Manejando datos

Trabajando con plantillas VueJS

Posted by in Javascript y TypeScript

Seguimos con entradas de VueJS, y al igual que expliqué con TypeScript para el uso de plantillas usando Handlebars, es necesario comprender cómo son las plantillas en VueJS. VueJS cuenta con un motor de plantillas muy similar a Handlebars, con lo que lo aprendido antes puede aplicarse de nuevo con VueJS. Plantillas VueJS Se trata de aplicar HTML con una sintaxis especial, al igual que se hizo con Handlebars, lo que permite introducir los datos en el HTML mediante el renderizado. Es similar a JSX de React, pero más liviano….read more

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