vueii

Vue 2. (II) Primer Componente y directivas básicas.

Continuamos con la serie de Vue 2, en el articulo anterior  aprendimos como instalar y algunos conceptos básicos. A continuación vamos a crear nuestro primer componente y aprender algunas directivas de este maravilloso framework de Javascript que no por nada ha dado tanto de que hablar desde su salida. Es recomendable haber leido el primer post ya que este es una continuación.

Ahora que ya tenemos configurado nuestro entorno de desarrollo y que hemos creado nuestra instancia global de Vue, vamos a crear nuestro primer componente. Antes de comenzar, vamos a irnos a la carpeta de nuestro proyecto en el terminal y vamos a ejecutar

gulp watch

Como vimos en la lección anterior, cuando ejecutamos gulp en consola, se compilará nuestro código js y se guardará en /public/js/app.js que es el archivo que tenemos importado en nuestra plantilla de blade.

Con gulp watch evitaremos tener que estar ejecutando dicho comando siempre que hagamos un cambio, ya que gulp estará observando cambios y recompilará automaticamente cuando sea necesario.

Creación del componente

Un componente puede ser registrado globalmente o localmente dentro de otro componente. Para nuestra lección de hoy usaremos un compomente global. La forma más sencilla de declarar un componente global es declarandolo en nuestro archivo app.js

El primer parametro que recibe será el nombre de nuestro componente, el segundo un objeto con las opciones. Por ahora pasaremos sólo un template con el código html que renderizará nuestro componente y la opcion data , la cual es una función que devuelve otro objeto con todas las propiedades que usaremos en nuestro componente.

Ahora sólo nos quedaría dirigirnos a nuestra plantilla de blade y usar nuestro componente

Debido a que en nuestro template hemos usado {{ message }} (de la misma manera que Laravel imprime variables php) se nos mostrará el valor de la propiedad  message

Two way data binding

O como podrías llamarlo en español Ligar datos en ambos sentidos. Es una de las características por la que vas a amar a Vue (si no lo haces ya).

Con una directiva tan simple como v-model podremos atar un elemento del DOM con una propiedad de nuestra instancia de Vue. Desde ese momento quedarán unidos bidireccionamente. Para probar esto, vamos a adaptar nuestro componente para añadir un input de tipo text, al que lo ataremos a la propiedad message.

Lo primero que observas cuando refrescas el navegador es que el input está relleno con ‘Hola mundo’, esto es debido a que la propiedad message está predefinida con ese texto. Pero ¿qué ocurre si escribimos en el input? pues que automáticamente también cambia nuestra propiedad message por lo que cualquier referencia a esta en nuestra app cambiará reactivamente. ¿Cuantas lineas de Jquery hubiesen sido necesarias para este comportamiento? ¿100? ¿Un millón?

 

Condicionales y Bucles

v-if / v-show

Podemos mostrar un elemento dinámicamente basándonos en una propiedad de nuestro componente. La diferencia entre v-if y v-show radica en que el primero eliminaría el elemento del DOM cuando la propiedad es false mientras que el segundo aplicaría un estilo de display: none aunque el elemento permanecería en el DOM. También podríamos mostrar un elemento cuando una condición no se cumpla simplemente negándolo con !

v-for

Con v-for podemos iterar un array o un objeto y añadir elementos al DOM en cada vuelta del bucle.

Nada mejor como un ejemplo para entender estas directivas. Prueba a cambiar true por false y a añadir algún elemento al array de frutas para probar su funcionamiento:

En la próxima lección aprenderemos a pasar este componente a su propio archivo .vue y seguiremos aprendiendo estructuras más complejas.

Para terminar, si tienes dudas o sugerencias acerca de este articulo, puedes hacerla a través de los comentarios o unirte al Slack de Laraveles en el nuevo canal #Front podrás preguntar más acerca de las maravillas que nos trae Vue JS. Solo tienes que probar.