Vue-Js

Hoy voy a enseñarte a usar chart.js (librería para crear gráficas en la web) con Vue.js cuando se programa en Webpack con NPM. Te aviso desde ahora que probablemente esta no sea la manera de vue, es decir, lo haremos como lo haríamos sin usar el framework, pero esto me ha funcionado y te funcionará a ti para no tener tantos problemas al integrar Chart.js con Vue. Nota: primero te invito a familiarizarte con chart.js, ya que aquí solo te enseñaré a usarlo con Vue a través de webpack con npm. Nota 2: en febrero de 2023 intenté usar este método y si instalas la última versión tal vez te aparezca un error. Para evitarlo, en el siguiente paso en lugar de usar npm install --save chart.js usa npm install --save chart.js@3.2.1, yo pongo la 3.2.1 porque es la última que me ha funcionado, pero me imagino que mientras sea menor a la 4 todo debería funcionar. La guía está en: https://www.chartjs.org/docs/latest/migration/v4-migration.html ...

Hoy te mostraré cómo usar la función debounce con el framework Vue y obviamente el lenguaje de programación JavaScript. Implementar esta función es un poco confuso debido a la definición de métodos dentro de los componentes de Vue y por la confusión que genera la función, ya que la misma genera otra función y solo debe ser definida una vez al inicio. Pero bueno, vamos por partes. Verás que a partir de esto podrás usar debounce en tus componentes de Vue. ...

En este post te mostraré un seleccionador de colores o input de tipo color (también conocido como color picker) que me gustó para su uso con el framework Vue. El picker del que hablo se llama vue-color y permite usar varios selectores de color. ...

En este post te enseñaré a enfocar un campo de texto o input de HTML usando el Framework Vue. Aunque parezca algo muy básico, en realidad hay algunos casos en donde enfocar no es tan fácil. Te enseñaré cómo enfocar un elemento con Vue, y también con Vuetify. ...

En este post te hablaré un poco sobre las props o propiedades de componentes en Vue.js. Las propiedades permiten pasar datos a un componente hijo, mejorando así la comunicación. Gracias a las props en Vue así como $emit y on, podemos comunicar componentes de manera fácil. ...

En este artículo te voy a enseñar a consumir una API REST usando JavaScript y el framework Vue.js, además de utilizar Bootstrap para el diseño. Al final vamos a tener una aplicación web que va a gestionar datos y hacer las 4 operaciones básicas: crear, actualizar, eliminar y obtener. Todo esto lo vamos a hacer sin tocar el código del servidor, pues simplemente nos vamos a enfocar en la programación del lado del cliente, así que solo veremos HTML, JavaScript y un poco de CSS. ...

Hoy vengo a presentar un sistema que recién he terminado de programar. Se trata de un software open source escrito en PHP con MySQL y Bootstrap, mismo que es un acortador de enlaces similar a los acortadores como bit.ly. En este caso este programa se encarga de acortar enlaces, redireccionar a los usuarios y registrar cuando se hace clic. Aunque su funcionamiento está inspirado en los acortadores de enlaces, no tiene todas las funciones idénticas. Este software gratuito que he creado con PHP tiene las siguientes características: Login y gestión de usuarios Creación de enlaces Enlaces sin redireccionamiento instantáneo: en este caso, antes de redireccionar al usuario, se presenta una plantilla en donde se puede poner publicidad, avisos, redes sociales etcétera. Links con redireccionamiento instantáneo: simplemente redireccionan al usuario de manera transparente, registrando el clic o visita. Reporte general de clics en rango de fecha, con gráfica y descripción de los enlaces más populares Como siempre te digo, este software se puede personalizar, tomar como base, etcétera. Por cierto, hace un tiempo hice un software parecido pero ese acorta enlaces para ganar dinero, usando a su vez acortadores como ouo, adfly, etcétera. ...

En este post veremos cómo definir reglas dinámicas en Vee Validate (un validador de formularios de Vue). Es decir, definir el valor máximo, valor mínimo, etcétera de forma dinámica, esto es, a través de una variable o expresión. Nota: esto aplica para la versión 3 de Vee Validate. ...

Como sabemos, las plantillas de Vue no permiten colocar contenido HTML, y cualquier cadena HTML que se coloque será saneada para evitar posibles ataques, XSS entre ellos. Sin embargo Vue provee una manera fácil y sencilla de inyectar HTML “inseguro” en un componente o vista, y justamente es lo que veremos en este post. ...

En este post te mostraré cómo crear un proyecto de Vue usando el lenguaje de programación TypeScript en lugar de JavaScript. Como sabemos (en términos simples) TS es como JS mejorado; sobre todo por eso de los tipos (tipado fuerte) que previene errores como sumar números y cadenas, etcétera. ...