Vue.js 2: Frontend JavaScript Framework

Hoy vamos a instalar el paquete vue-cli que nos permite generar, desde la línea de comandos, una estructura básica para nuestro proyecto Vue.js. Hay varios tipos de templates con diferentes paquetes y funcionalidades cada uno (las puedes ver aquí) y podemos elegir el que queramos según nuestras necesidades.

También pasaremos el ejemplo creado con componentes en el post #4 a componentes de un solo archivo, es decir, crearemos a partir de uno de los templates que nos provee el paquete vue-cli, un ejemplo igual que el del post #4, pero en vez de que todos los componentes estén en el mismo archivo, cada componente será un archivo .vue con su HTML, JS y CSS.

Continuar leyendo «Vue.js 2 #9 : vue-cli y componentes de un solo archivo» →

Los mismos creadores de Vue.js han creado un plugin para Vue.js que nos permite añadir rutas a nuestra aplicación. En esta entrada añadiremos esta librería llamada vue-router y crearemos un ejemplo sencillo dándole estilo con la librería llamada Vuetify, que nos permite añadir estilos Material Design. También le añadiremos una transición fade cuando se cambie de ruta, es decir, el contenido de la ruta se mostrará gradualmente según el tiempo que pongamos.

Continuar leyendo «Vue.js 2 #8 : Crear rutas con vue-router y aplicar una transición al cambiar de ruta» →

En esta entrada, vamos a explicar como consumir una API con la librería Axios y crearemos un filtro personalizado para darle formato a unos valores que obtendremos de la API. En este caso, el filtro pondrá un punto cada tres números, es decir, hará de separador de millares.

Continuar leyendo «Vue.js 2 #7 : Consumir una API con la librería Axios y crear filtros personalizados» →

En esta entrada vamos a tratar las custom directive. Las directivas son atributos que nos permite añadir Vue.js a nuestro HTML. Son atributos del estilo v-*, nosotros algunos ya los hemos practicado y explicado anteriormente. Por tanto, visto qué son las directivas, las directivas personalizadas (custom directives) son directivas que creamos nosotros mismos con una funcionalidad específica.

Continuar leyendo «Vue.js 2 #6 : Custom directives» →

Los componentes que definimos en Vue.js tienen un ciclo de vida, durante éste, podemos acceder a varias funciones (hooks) y, con ellos, ejecutar el código que queremos en ciertos puntos del ciclo de vida del componente.

Por ejemplo, podremos ejecutar código antes de que el componente se añada al DOM y/o cuando ya esté añadido, también antes de que se elimine, entre otras opciones más. Ahora lo vemos!

Continuar leyendo «Vue.js 2 #5 : Ciclo de vida» →

Vamos a explicar qué son los componentes y lo aplicaremos en el ejemplo hecho en el post #2.

Continuar leyendo «Vue.js 2 #4 : Componentes» →