Uso de los filtros en Vue JS
En este post te voy a mostrar cómo declarar y usar los filtros en Vue.js: un buen framework de JavaScript.
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.
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.
Parámetros en URL de Vue Router
Hace algunos días mostré cómo instalar el router de Vue.
Hoy vamos a ver una cosa muy simple: cómo pasar parámetros en el router, para que los mismos se vean en la URL y podamos pasar datos entre componentes a través de la URL.
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
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.
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.
Crear proyecto de Buefy (Bulma CSS + Vue) usando la CLI de Vue
En este post voy a poner las instrucciones para comenzar un proyecto con Buefy.
Buefy es la combinación de Vue y Bulma CSS, ofrece componentes de Bulma CSS pero mejorados con el buen Vue.
Vamos a utilizar NPM con la CLI de Vue (vue-cli), ya que será un proyecto un tanto formal.
Generador de multiplicaciones online para imprimir y resolver
He creado un generador de multiplicaciones aleatorias, en donde se presiona un botón y se generan multiplicaciones para imprimirlas y resolverlas, funciona totalmente en línea y se pueden personalizar los números.
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
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).
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.
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
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.
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.
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.
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
