Showing posts in Vue.js
post image

Integrar ESLINT con Vue.js

2020-10-19 Vue.js

Para configurar ESLINT en un proyecto con Vue.js debes haber instalado primero ESLINT. Por lo general ESLINT viene integrado en proyectos creados con vue-cli, te invito a revisar nuestro artículo Cómo crear un scaffolding de aplicación en Vue.js&nb...

by Darío Rivera


post image

Pruebas unitarias en Vue.js con Jest

2020-10-13 Vue.js

En un post anterior vimos los Componentes de un solo archivo en Vue.js. Resulta que cuando tu aplicación va creciendo se hace en extremo necesario que comiences a probar cada componente con el fin de que los cambios futuros no afecten la funcionalidad act...

by Darío Rivera


post image

Componentes de un solo archivo en Vue.js

2020-10-12 Vue.js

Como vimos anteriormente en el artículo Componentes en Vue.js, es posible reutilizar una instancia de Vue y utilizar nuestros propios elementos HTML mediante el método Vue.component. Sin embargo, como pudiste haberte dado cuenta pudiera parecer algo...

by Darío Rivera


post image

Slots nombrados en Vue.js

2020-10-10 Vue.js

En nuestro artículo anterior vimos una introducción a los Slots en Vue.js. Los slots aportan una gran flexibilidad en cuanto a cómo se renderiza un componente y dan la posibilidad de inyectarles contenido tal y como un elemento en bloque de HTML lo perm...

by Darío Rivera


post image

Instalar Bootstrap en proyectos Vue.js

2020-10-10 Vue.js

En un post anterior vimos la estructura o Scaffolding de aplicación en Vue.js. Sin embargo, incialmente requieres instalar alguna librería de CSS como boostrap, Bulma, Semantic UI, etc. El día de hoy, veremos cómo agregar Bootstrap a nuestro proyecto e...

by Darío Rivera


post image

Estructura de aplicación en proyectos Vue.js 2

2020-10-10 Vue.js

En un post anterior vimos Cómo crear un scaffolding de aplicación en Vue.js con el preset [Vue 2] babel, eslint. Si eres nuevo en Vue y tampoco sabes mucho de Node pudiera parecer un poco confuso esta estructura de aplicación. Sin embargo, est...

by Darío Rivera


post image

Slots en Vue.js

2020-10-09 Vue.js

El concepto de Slot es difícil de definir pero fácil de entender viendo unos pocos ejemplos. Un slot es como un fragmento de componente al cuál se le puede inyectar contenido. Esto permite que podamos utilizar los componentes de Vue de la misma forma c...

by Darío Rivera


post image

Enviar datos entre componentes hermanos en Vue.js

2020-10-08 Vue.js

En Vue.js se envían datos desde un componente padre hacia el hijo mediante sus propiedades ( props ) y desde el componente hijo hacia el padre mediante eventos ( $emit ). Con estas dos formas de enviar datos que hemos visto en artícul...

by Darío Rivera


post image

Registro Global y Local de componentes en Vue.js

2020-09-30 Vue.js

En un post anterior vimos Qué son los Componentes en Vue.js y cómo crearlos. Resulta que Vue diferencia entre dos formas de cargar los componentes, la manera global y la forma local. El día de hoy veremos cuál es la diferencia de cada una de estas form...

by Darío Rivera


post image

Cómo crear un scaffolding de aplicación en Vue.js ?

2020-09-29 Vue.js

Después de haber visto los conceptos básicos sobre Vue.js, desde el enlace de atributos hasta la creación de componentes ya es hora de empezar con nuestra primera aplicación profesional. Para esto, vamos a hacer uso de Vue CLI (command line interface) ...

by Darío Rivera


post image

Enviar datos de un componente hijo al padre en Vue.js

2020-09-28 Vue.js

En un post anterior vimos Cómo Crear un componente en Vue.js y cómo enviar parámetros a un componente en Vue desde la instancia principal. El día de hoy veremos como hacer lo opuesto, enviar parámetros o información desde un componente hijo al p...

by Darío Rivera


post image

Evento click en Vue.js

2020-09-27 Vue.js

El manejo de eventos en Vue.js puede realizarse gracias a la directiva v-on. Para hacer bind de un evento basta utilizar esta directiva seguida del evento que se quiere enlazar y la expresión a utilizar. Veamos a continuación la sintaxis de esta directiv...

by Darío Rivera


post image

Componentes en Vue.js

2020-09-27 Vue.js

Un componente en Vue.js es la forma de reutilizar una instancia de Vue tantas veces como sea necesario. Mediante los componentes podemos crear nuestros propios elementos html, cada uno con sus propiedades y métodos particulares que fácilmente podemos reu...

by Darío Rivera


post image

Clases dinámicas en Vue.js

2020-09-26 Vue.js

En Vue.js existe una manera muy sencilla de agregar clases dinámicamente a un elemento HTML. La forma de hacerlo está ligada a cómo funciona la directiva v-bind en Vue de la cuál hemos hablando anteriormente en el post Enlace de atributos en Vue.js. Pa...

by Darío Rivera


post image

Propiedades calculadas en Vue.js

2020-09-26 Vue.js

Las propiedades calculadas (computed properties) aportan gran valor en el desarrollo con Vue y son muy similares a los Métodos en Vue.js los cuáles hemos visto ya anteriormente en el blog. Sin embargo hay una diferencia sutíl la cual veremos el día de ...

by Darío Rivera