VueJS

Directiva v-for en Vue JS

Resumen

En este post te mostraré cómo repetir cosas en la vista de una app con Vue.JS usando v-for.

v-for permite iterar arreglos, objetos y también hacer ciclos.

Veremos cómo usar v-for, además de proporcionar la clave con :key y finalmente tomar el índice y el valor por separado.

Nota: a través de los ejemplos usaré Bootstrap 4 para un mejor diseño, aunque esto no va a interferir con el tema principal de v-for y Vue.

Continue reading…

Sistema web de pagos y cooperaciones open source con PHP

Hoy vengo a presentar un sistema gratuito y open source para el control de pagos y cooperaciones creado con PHP, MySQL, Twig, Bootstrap y Vue

Este sistema de pagos está creado con PHP para el lenguaje del servidor, utiliza Twig para renderizar las plantillas, mismas que tienen un diseño usando Bootstrap. La persistencia de datos es gracias a MySQL.

Del lado del cliente se utiliza Vue para consumir la API y traer los datos.

Entre sus características encontramos:

  • Software para el control de pagos de personas
  • Registro de personas
  • Posibilidad de registrar usuarios para iniciar sesión
  • Impresión de comprobantes de pago en impresora térmica
  • Reporte de totales abonados por personas
  • Responsivo y accesible desde teléfono, tableta o computadora

Con algunas modificaciones, este software podría controlar el sistema de abonos de ventas de productos, cooperaciones de personas, pagos, etcétera.

Puede servir para estudiar un proyecto de PHP o para usarlo directamente en producción (de hecho yo lo estoy usando)

A continuación voy a explicar cómo funciona, además de mostrar el código fuente y otras cosas más.

Continue reading…

Validar formularios en Vue con Vee Validate

Vee Validate es un plugin de Vue.js que sirve para validar formularios de una manera fácil pero poderosa.

Lo que destaca es:

  • Su simplicidad, pues no se tiene que estudiar demasiado para comenzar a usarlo
  • La flexibilidad que ofrece
  • Soporte para otros idiomas (entre ellos el español)
  • Mensajes de error predefinidos
  • Simple sintaxis y validadores por defecto
  • Reglas personalizadas
  • Manejo del evento que desencadena la validación

En este artículo vamos a dar un repaso y explicación de VeeValidate con algunos ejemplos.

Al final tendremos un ejemplo completo que se puede ver aquí, que es como en la imagen:

Validación de formularios con Vue.js, VeeValidate y Bootstrap

Continue reading…

Configurar VSCode y Vetur para programar con Vue

Vetur es una extensión para Visual Studio Code y proporciona una caja de herramientas para programar con Vue. Entre sus principales características encontramos:

  • Remarcado de sintaxis
  • Algunos snippets
  • Soporte de Emmet
  • Comprobación de errores
  • Formateado de código
  • Autocompletado
  • Depuración

VSCode o Visual Studio Code se ha convertido en un potente pero ligero editor de código. No es un IDE ni un editor de texto plano, se encuentra entre estos dos y mantiene la sencillez de un editor con muchas características de un IDE.

Al comenzar a programar en Vue (con archivos que tienen la extensión .vue) no se muestra un resaltado de sintaxis ni las herramientas del lenguaje:

1 – Sintaxis no marcada

Veamos entonces cómo instalar Vetur y analicemos las herramientas que proporciona para hacer el desarrollo con Vue más fácil y agradable.

Continue reading…

Primeros pasos con VueRouter: el enrutador de Vue

Una vez que ya hemos creado un proyecto con la CLI de Vue (usando Buefy, por ejemplo) podemos agregarle otros paquetes como un enrutador.

Vue Router es el enrutador oficial para Vue.Js y permite crear Aplicaciones de una sola página o Single Page Applications.

De esta manera tenemos una navegación más fluida sin recargar la página, ahorrando ancho de banda y agregando velocidad.

En este post vamos a ver cómo instalar y configurar el enrutador de Vue usando NPM, además de configurar las rutas para que coincidan con nuestros componentes.

Continue reading…

Aplicación de notas con localStorage, JavaScript, Bootstrap y Vue js

Aplicación web para tomar notas con JavaScript, Vue.js, Bootstrap y localStorage

Hace algún tiempo creé una aplicación web como un ejercicio para aplicar para un trabajo. Decidí hacerla con Vue.js, Bootstrap y localStorage en conjunto.

Al final resultó en algo como lo de la imagen:

Aplicación de notas con localStorage, JavaScript, Bootstrap y Vue js

Aplicación de notas con localStorage, JavaScript, Bootstrap y Vue js

Es una simple aplicación de notas que puedes crear, eliminar, editar y listar. También se puede cambiar el color de todas las notas (fue un requisito, no cosa mía, así como el idioma).

Continue reading…

Generador de diagramas de clase UML con JavaScript y Canvas

Generador de diagramas de clase UML con JavaScript

Introducción

En una de las materias que estoy cursando (o que cursé, dependiendo del momento en el que esto se publique) tuve que presentar todas esas cosas aburridas que conlleva el desarrollo de software.

Me refiero a los diagramas, casos de uso, clases, interfaces y todas esas cosas que al final (desde mi punto de vista) no sirven para nada y solamente hacen perder tiempo.

Continue reading…

Sistema web para cotizaciones y presupuestos

Presentando un sistema web para hacer cotizaciones y presupuestos, gratuito y open source

Hoy vengo a presentar un software para realizar cotizaciones o presupuestos, el cual es totalmente gratuito de usar en la nube; así como open source. Es decir, aparte de que puedes usarlo en mi sitio, puedes descargarlo y modificarlo.

Sistema web para cotizaciones y presupuestos

Sistema web para cotizaciones y presupuestos

Características del software

No es la gran cosa, pero entre sus principales características encontramos las siguientes:

  • Realizar cotizaciones o presupuestos
  • Estimar el costo requerido, el cual se configura por cada servicio
  • Calcular tiempo requerido por cada servicio
  • Describir características y/o condiciones del trabajo
  • Agregar clientes para ligarlos a las cotizaciones
  • Imprimir la cotización o guardarla como PDF (esto depende del navegador la mayoría de veces)
  • Multiusuario: cualquier usuario puede registrarse y usarlo, así de simple. Eso sí, las cotizaciones, servicios y características son separadas por usuario
  • Totalmente open source
  • Escrito con PHP, utiliza PDO para interactuar con la base de datos
  • Base de datos MySQL
  • Lado del cliente con Vue.JS y Bootstrap
  • Mensaje de agradecimiento, presentación y pie totalmente configurables

Se me ocurre que puede servir tanto como para estudiantes que tienen que entregar un proyecto con PHP simple, así como para personas que necesitan un software como estos.

Voy a explicar cómo fue creado, en dónde se puede probar y también dónde se puede leer el código fuente.

Continue reading…

App que explica la conversión hexadecimal a decimal

Explicando la conversión hexadecimal a decimal manualmente usando JavaScript

App que explica cómo convertir hexadecimal a decimal en JavaScript con Vue.JS 2

Como lo dije en otro post, hice una pequeña app que te explica cómo convertir un número hexadecimal a decimal. No es como cuando vimos conversión entre bases con JS, pues eso se hacía pero el lenguaje se encargaba.

Lo que trato de hacer aquí es explicar el procedimiento para realizar la conversión. Esto es por si estamos en nuestras clases de matemáticas discretas o simplemente algún día necesitamos hacer la conversión hexadecimal-decimal a mano.

Nota: te invito a ver una app que convierte bases.

Continue reading…

Convertidor binario octal decimal hexadecimal en JavaScript

Haciendo un conversor de bases numéricas con JavaScript y Vue JS 2

Introducción

Para reforzar y aplicar lo que vimos en cómo convertir entre binario, octal, decimal y hexadecimal en JavaScript decidí crear un convertidor (o conversor) de bases numéricas o números. Lo que hace es muy simple, convierte (desde cualquier base) a las siguientes:

  • Binario
  • Octal
  • Decimal
  • Hexadecimal

Para agregarle más comodidad al usuario pusimos la opción de copiar el texto directamente en el portapapeles.

Veamos una pequeña explicación.

Continue reading…

Explicación de watch en Vue JS 2

Introducción

Vue.Js es un framework maravilloso. Ofrece, al igual que AngularJS (y no sé cuáles otros, no los he usado) una forma de vigilar el cambio de un valor a través de un watch, watcher u observador.

Esto permite observar el cambio de una variable, ya sea primitiva o compleja como un objeto o arreglo.

Veamos entonces cómo usar de forma correcta a watch en el framework web de JavaScript Vue.js

Continue reading…