Primeros pasos con Vue.js
Hace algunos meses comencé a estudiar React.js, al ver que muy probablemente sería el próximo rey de los Frameworks y sería adoptado por WordPress.
Sin embargo, durante la gran batalla de Frameworks en WP, existía otro gran contendiente para ser convertido en el Framework oficial, éste se llamaba Vue.
¿Qué es Vue?
Como mencioné antes, Vue.js (pronunciado “view”) es un framework progresivo de Javascript diseñado para construir interfaces de usuario.
Aún cuando es un Framework bastante distinto a React, aún tienen algunas similitudes, ambos:
- Utilizan un DOM virtual
- Proveen facilidad para crear componentes
- Se enfocan en la librería principal, dejando cosas como rutas y manejo de estado a librerías secundarias
Para ver más formas en las que éstas librerías se parecen, puedes seguir el artículo en el sitio oficial de Vue.
¿Por qué utilizar Vue?
Si Vue y React son tan parecidos, ¿por qué querría utilizar Que en lugar de ir directo a React?
La respuesta más sencilla es: es tu decisión, no voy a decirte que cambies todo tu ecosistema para utilizar Vue simplemente porque es la librería de moda en la comunidad (o la segunda librería de moda). La realidad es que no hace daño probar nuevas herramientas, y así poder hacer una decisión informada sobre cuál es la que mejor se acomoda a tus necesidades.
Las mayores ventajas que tiene Vue a comparación de sus “rivales” (React, Angular, Ember, etc.) son:
- La facilidad para implementarse
- La rápida curva de aprendizaje
- Su bajo tamaño (~58.8K minificado vs 133K de React)
Una vez más, al final es tu decisión, pero si quieres darle una oportunidad como lo hago yo, puedes acompañarme en mi curva de aprendizaje, y veamos lo básico:
¡Hola Mundo!
Para comenzar haré el típico ejercicio que todos nos sabemos de memoria,
el ¡Hola mundo!, en versión Vue, así que comencemos, lo primero que necesitamos,
es agregar Vue a nuestro sitio, lo cual podemos hacer facilmente agregando esta
línea antes de nuestro </body>.
1<!doctype html>23<html lang="es">4<head>5 <meta charset="utf-8">67 <title>¡Hola Mundo! - Vue.js</title>8 <meta name="description" content="Primeros pasos en Vue">9 <meta name="author" content="Mario Aguiar">1011</head>1213<body>14 <div id="app"></div>1516 <!-- versión de desarrollo, incluye mensajes en la consola -->17 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>18 <script src="hola-mundo.vue.js"></script>19</body>20</html>21
Cómo pueden ver es una estructura bastante simple, tenemos nuestro head, nuestro
body, e incluimos nuestros script. Si se fijan bien, verán que también tenemos un
div con un id de app, este pronto se convertirá en el contenedor de nuestra aplicación.
Lo que sigue ahora, es inicializar nuestra aplicación con Vue, en nuestro hola-mundo.vue.js
1const app = new Vue({2 el: '#app',3});4
¡Y eso es todo! Así de fácil hemos creado nuestra instancia de Vue, como se puede ver,
dentro de esa instancia hemos especificado el el (elemento) que servirá de contenedor
para nuestra aplicación, y, como se puede ver, utilizamos selectores como los que
siempre hemos utilizado desde los tiempos de jQuery, así, #app significa: el elemento
con un id de “app”.
Pasando datos a la aplicación
Ahora, ya tenemos nuestra instancia de Vue activa, pero aún no es el Hola Mundo que queremos, ¿Cómo solucionar esto? Podríamos simplemente escribir hola mundo dentro del contenedor, pero eso no es divertido, y no es la forma en que Vue lo hace, así que en lugar de eso, utilizaremos lo que se conoce como template syntax.
Primero modifiquemos nuestro HTML para que se vea así:
1<!doctype html>23<html lang="es">4<head>5 <meta charset="utf-8">67 <title>¡Hola Mundo! - Vue.js</title>8 <meta name="description" content="Primeros pasos en Vue">9 <meta name="author" content="Mario Aguiar">1011</head>1213<body>14 <div id="app">15 {{ mensaje }}16 </div>1718 <!-- versión de desarrollo, incluye mensajes en la consola -->19 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>20 <script src="hola-mundo.vue.js"></script>21</body>22</html>23
Si miran detenidamente, verán que hemos agregado un {{ mensaje }} dentro de nuestra
aplicación, esto es conocido como template syntax y sirve como un placeholder que
será sustituido por nuestro… mensaje.
Ahora simplemente le decimos a Vue cuál es ese mensaje que queremos que sustituya:
1const app = new Vue({2 el: '#app',3 data: {4 mensaje: '¡Hola Mundo!',5 },6});7
Dentro del ecosistema Vue, podemos agregar un objeto llamado data, Vue tomará
todo lo que esté dentro de este objeto como datos de la aplicación, y mantendrá
un ojo en ellos mientras la aplicación esté funcionando, esto significa que
cualquier cambio que se haga en data.mensaje se verá reflejado en nuestro markup
de manera instantánea.
¡Listo! Si ahora recargamos nuestra aplicación podremos ver ¡Hola Mundo! reflejado en ella, nuestra primer aplicación con Vue.