Ver contenido

carlosazaustre.es carlosazaustre.es

Primeros pasos en Vue

🗓 | 💻 Desarrollo | 🕐 4 minutos de lectura | 💬 Comments

Con éste artículo quiero enseñarte lo fácil que es empezar a trabajar con Vue para que veas su sencillez.

Para ver como funciona Vue no necesitas Webpack, ni Babel, ni transpilers, ni una estructura compleja de archivos y carpetas, únicamente necesitas un fichero HTML de toda la vida, una hoja de estilos CSS, un fichero JavaScript para el código e importar la librería desde un CDN como puede ser cdnjs.org.

¡Empecemos!

Para seguir este tutorial, puedes utilizar tu editor de texto preferido + navegador o utilizar JSBin si te es más cómodo para probar cosas. Si prefieres ver el contenido en vídeo, dale al play!

Vamos a utilizar este fichero index.html:

Es un HTML normal, únicamente a destacar que tenemos un elemento <div> con el id app y el enlace a librería vue.js en su versión 2.

Ahora vamos a añadir código JavaScript y puedes escribirlo en el index.html dentro de un elemento <script> o utilizar un fichero JavaScript aparte y enlazarlo igual que la librería de Vue.

Inicialización de Vue

Para poder empezar a trabajar con Vue, tenemos que crear una nueva instancia y pasar ciertas propiedades al objeto de configuración, entre ellas el elemento del DOM dónde vamos a renderizar o hacer uso de Vue. En este caso sería el <div> con el ID app:

Algo tan simple como eso es lo que se necesita para inicializar Vue en un proyecto web. Ahora vamos a ver más cosas como por ejemplo como se muestran datos utilizando el doble data-binding:

Mostrar datos

Tomando el HTML anterior y colocando lo siguiente entre el <div id="app">:

Estamos indicando que nuestra instancia de Vue va a tener un tipo de dato llamado mensaje y que podemos manipular desde el código.

Para ello simplemente añadimos una nueva propiedad-objeto llamada data donde estarán todos las propiedades y/o modelos de datos que queramos utilizar en la vista

Esto mostrará en el navegador el texto: Hola Vue!

Si los datos se tienen que utilizar dentro de un elemento del DOM como propiedad, no podemos utilizar la sintaxis de las dobles llaves para mostrar el valor. Necesitamos hacer uso de la directiva v-bind para ello.

Veamos un ejemplo con una imagen por ejemplo:

El dato imagen contiene la URL de una imagen jpg. Para poder mostrarla en la vista utilizando un elemento <img> necesitamos pasarle al atributo src el nombre de la variable, entre comillas, y utilizar la directiva de Vue v-bind para enlazar el modelo:

De esta forma se podrá ver la imagen en el navegador.

También podemos usar la forma abreviada que ofrece Vue, y es que cuando se trate de un atributo, podemos prescindir del texto v-bind y utilizar únicamente dos puntos :

Vale, esto está muy bien, pero ¿Se pueden hacer más cosas? Claro que si, hay un gran número de directivas, por ejemplo si queremos mostrar algo o no dependiendo de un dato, podemos utilizar v-if o v-show y v-hide:

Aquí lo que hemos hecho es añadir un nuevo dato mostrar con el valor a false que hará que no se muestre ni el mensaje ni la imagen en el navegador. Si cambiamos a true podemos verlo de nuevo.

Eventos y Métodos

La "gracia" de desarrollar una SPA es que haya cambios de forma dinámica en nuestro proyecto. Esto lo podemos conseguir utilizando métodos que realizan cambios y eventos que disparen estos métodos.

Los métodos se indican al igual que los datos en un objeto-propiedad llamado methods.

Vamos a añadir un elemento <button> que escuche un evento de click y dispare un metodo toggleMostrar que lo único que hará es cambiar el valor del dato mostrar al contrario para mostrar los elementos anteriores o no. Sería algo así:

El evento se añade con la directiva v-on:click para el caso de responder ante un click del botón. Hay multitud de eventos: hover, submit, change, etc...

También podemos utilizar la forma abreviada que propone Vue que es @click, es decir se sustituye v-on por un @:

Ahora el código JavaScript sería el siguiente:

Darse cuenta que para hacer uso del dato mostrar dentro de los métodos, tenemos que utilizar el objeto this si no no podríamos referenciarlo y utilizarlo.

Ahora, cada vez que hagamos click en el botón, en el navegador se mostrará u ocultará la información.

Templates

También podemos trabajar con templates, es decir, tener el código HTML en nuestra instancia de Vue. No es la mejor práctica, pero para algo puntual puede ser muy útil. Así, por ejemplo, se trabajaba con Angular v1 en sus inicios.

Podemos reducir el código anterior al siguiente HTML y JavaScript

Hemos utilizado la propiedad template de Vue para añadir el HTML. Ten en cuenta que al igual que en React, debe ir siempre incluido todo en un único elemento del DOM.

Si esto no te convence, puedes utilizar el elemento <template> de HTML5 y referenciarlo dentro de la instancia de Vue de la siguiente forma:

Recorrer listados de datos

Una de las cosas que más se utilizan en proyectos es recorrer un listado de items para mostrarlos en la pantalla. En Vue es muy sencillo con al directiva v-for y se hace de una forma muy similar a cómo se hace en Angular.

Imaginemos que tenemos un dato en nuestro modelo, que es un array de objetos llamado cursos:

Para mostrar la información en la vista HTML, con una lista por ejemplo y que cada item <li> sea un enlace hacia el curso, tendríamos que hacer lo siguiente. (Date cuenta del bind de datos utilizando la sintaxis abreviada de : en lugar de v-bind en las directivas key y href):

Resumen

Vue es mucho más, pero tan sólo quería enseñarte los primeros movimientos para que veas que sencillo es de utilizar.

Date cuenta que todo esto lo hemos podido ejecutar en un único fichero HTML sin necesidad de utilizar ningún tipo de herramienta, ni NPM ni transpiler. Es puro HTML y JavaScript (y CSS si lo hubiésemos utilizado) Y te permite tener un primer contacto con la librería y ver que es lo que se puede hacer con ella y cómo funciona.

Espero que te haya gustado y te haya animado a trabajar con ella.

✎ ¿Ves alguna errata? ¿Quieres modificar algo? Haz una Pull Request.

Carlos Azaustre

Soy Carlos Azaustre. Me dedico al desarrollo web. Actualmente trabajo como Senior Frontend Engineer en Eventbrite. Fui nombrado en 2019 GDE (Google Developer Expert) en Tecnologías Web. Desde 2013 intento documentar en éste blog todo lo que aprendo y así compartirlo con el resto de la comunidad.

Si te gusta lo que lees, puedes apoyarme en mi Patreon o invitarme a un café virtual 🙂

Se mi patrón Invítame a un Café