VueJS

Conecta 4 en JavaScript y HTML

En este post te mostraré el juego de Conecta 4 programado en JavaScript con HTML y Vue, con estilos de Bootstrap.

Conecta 4 en JavaScript, HTML – Versión web

Es el juego de Conecta 4 pero versión web con opción jugador contra jugador, así como jugador contra CPU que usa una pequeña inteligencia artificial.

A lo largo del post te mostraré cómo funciona el juego, qué tecnologías he usado, estilos, etcétera. También te mostraré cómo descargar el código fuente, pues el juego es totalmente gratuito y open source. Finalmente te dejaré una demostración para jugar conecta 4 en línea.

(más…)

Por parzibyte, hace

Autocompletado con Bootstrap, Vue y API

En este post  te mostraré cómo hacer un autocompletado, autocomplete, auto completado o como le llames usando Bootstrap, Vue y una API.

De modo que al final (por si no sabes lo que es un autocompletado) se cuente con una caja en donde se complete mientras el usuario escribe, así como la búsqueda de Google.

Te mostraré dos ejemplos, uno en donde los resultados se completan localmente, y otro en donde se hace una búsqueda para traer los resultados de la API en tiempo real. Voy a dejar el código completo al final.

Nota: si buscas un autocompletado con JavaScript puro, mira Awesomplete.

(más…)

Por parzibyte, hace

DatePicker de Buefy en español

Buefy es un paquete de componentes que combinan BulmaCSS y Vue.js. Entre esos componentes encontramos el b-datepicker que no es más que un seleccionador de fechas, calendario o datepicker.

Por defecto viene en inglés, pero provee la manera de especificar los meses y días en español, cosa que te enseñaré hoy: cómo poner el datepicker de Buefy en español.

(más…)

Por parzibyte, hace

Vue: eliminar referencias de arreglos

En posts anteriores mostré la manera de eliminar las referencias de arreglos en JavaScript usando slice o el operador de propagación. Sin embargo, con el framework Vue las cosas son un poco distintas debido a su reactividad.

Hoy te mostraré cómo eliminar la referencia de un arreglo en Vue o, en otras palabras, cómo realizar una copia de un arreglo en Vue.

Este error me dio bastantes dolores de cabeza, y siempre me los ha dado. Al fin encontré la solución y vengo a compartirla.

(más…)

Por parzibyte, hace

Vue JS: inyectar HTML en vista

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.

(más…)

Por parzibyte, hace
Calificación de tareas

App web de Go, Vue y PostgreSQL en Android con Termux

Este artículo es una demostración sobre cómo poder montar una aplicación web que usa VueJS del lado del cliente (con la vue cli), Go/Golang del lado del servidor y PostgreSQL como base de datos.

Vamos a montar el proyecto web en un teléfono móvil con Android, usando la app Termux. Todo estará ejecutándose en Android, ya que se usará para programar.

Es decir, tendremos a node vigilando los archivos js, a go compilando en el lado del servidor y a PostgreSQL almacenando los datos.

¡Vamos allá!

(más…)

Por parzibyte, hace
Compilando componentes para usar Vue con Laravel

Vue con Laravel – Configuración con Laravel Mix

En este post te mostraré cómo usar Vue con Laravel, es decir, crear componentes de Vue y usarlos dentro de Laravel, compilando los componentes de Vue que estarán en un archivo con extensión .vue en lugar de usar HTML.

Laravel es un framework del lado del servidor que utiliza el lenguaje PHP. Vue es un framework del lado del cliente que utiliza JavaScript (ya sea con TypeScript, CoffeeScript, etcétera).

Veamos cómo usar estas dos tecnologías en conjunto.

(más…)

Por parzibyte, hace

Comunicación entre componentes con Vue.js

Al trabajar con el framework Vue.js podemos dividir la lógica de las aplicaciones en componentes aislados e independientes; pero una cosa importante es la comunicación entre componentes.

En este post te mostraré cómo comunicar componentes usando $emit y $refs. En el primer caso usaremos $emit para comunicar al padre un evento, y en el segundo caso vamos a usar $refs para invocar a una función dentro del componente hijo.

Poniéndolo en otras palabras, primero veremos comunicación de componentes de hijo a padre, y después de padre a hijo. Gracias a esto vamos a llamar a una función de un componente desde otro componente usando Vue.js

Nota: esto funciona bien para componentes simples o para comunicación simple entre componentes; si quieres algo más complejo que involucre a más componentes puedes usar Vuex.

(más…)

Por parzibyte, hace