Si no sabes por donde empezar con Vue.Js y necesitas un ejemplo sencillo de cómo empezar a programar con este framework, en este artículo abordaremos este hito mediante un sencillo tutorial. Además, para poder comprender mejor qué introduce este nuevo framework, haremos una comparación desarrollando la misma funcionalidad pero con una programación ‘tradicional‘.
Introducción
Si esta es la primera vez que estás programando con Vue.Js, he de decirte que la curva de aprendizaje es muy progresiva y que al principio avanzarás muy rápido.
Sin embargo, a pesar de ser tan sencillo al principio, has de tener ciertos conceptos muy claros antes de empezar a programar.
Si nunca has utilizado un framework Javascript similar a este, deberías de hacer un formateo de todo lo que sabes hasta ahora en relación a la parte de desarrollo frontend con librerías como jQuery.
Tampoco deberías de tener en cuenta como se renderizaba el HTML desde el servidor, ya que al utilizar este framework, a pesar de que se puede seguir haciendo de la misma forma, está diseñado para renderizarse y ejecutarse en el cliente.
Código
La funcionalidad que se va a desarrollar es bastante sencilla. A medida que un usuario modifica el valor de un input, este cambio se ve reflejado en un párrafo de texto.
Javascript
Este ejemplo de código corresponde con una de las formas con las que se puede programar esta funcionalidad en Javascript.
El código hace uso de Javascript puro, sin ninguna librería (como podría ser jQuery) y de HTML.
En la parte del Javascript se la ha añadido un listener al input. Este listener está asociado al evento change, aunque se podría haber utilizado blur u otro evento. Cuando el evento es activado, se reemplaza el valor del la etiqueta <p> con el texto que el usuario haya escrito en el input.
El código resultante se puede visualizar y testear a continuación:
Vue.Js
Después de ver cómo se puede realizar la funcionalidad demandada a través de Javascript puro, en esta sección se muestra cómo se puede hacer con Vue.Js.
- Añadir el framework Vue.Js. En la parte del HTML se añade una etiqueta <script> que apunta a la última versión estable de producción.
- Crear una etiqueta que contendrá todo el código asociado a Vue.Js. Esta etiqueta es necesaria que tenga un id. En el ejemplo se le ha nombrado como root y es una etiqueta de tipo div.
- Crear una app Vue.Js. Cuando generas un objeto de tipo Vue es necesario que tenga un elemento al que esté asociado, en este caso el el elemento con id root. De esta forma, todo el HTML que esté dentro del elemento root, podrá utilizar la funcionalidad de Vue.Js.
- Para el ejemplo que vamos a realizar, necesitamos utilizar la propiedad data proporcionada por Vue.Js. Este propiedad se utiliza para exponer variables tanto para consulta como para modificación desde el HTML. En nuestro caso solo necesitamos la variable message.
- Insertar la etiqueta input. El la etiqueta input es necesario destacar el atributo v-model. Este atributo esta haciendo un doble binding. En el input se muestra el valor que contiene la variable message y además, si el valor del input es modificado se encarga de actualizar el valor de la variable message que hemos expuesto en el data de la aplicación Vue.Js.
- Insertar un párrafo para mostrar el valor de la variable message. En este párrafo se puede observar el siguiente código: {{ message }}. Este código se utiliza para mostrar el valor de la variable de Vue.Js y como se puede observar a medida que el valor cambia se renderiza automáticamente el DOM.
El código resultante se puede visualizar y testear a continuación:
Conclusión
Es cierto que con un ejemplo tan sencillo la potencia de Vue.Js no se puede apreciar al 100%. Pero una de sus funcionalidades más importantes que es el renderizado y actualización automática del DOM a medida que
cambia el valor de los datos Javascript, ya se puede visualizar con este simple ejemplo.
Por lo tanto, espero que que haya sido de ayuda esta tutorial de introducción y seguiremos añadiendo complejidad en siguientes tutoriales.
Si aun estás indeciso y no sabes de qué trata este nuevo framework. O simplemente no sabes si decantarte por otro framework Javascript de la competencia porque resuenan muchos frameworks entre los desarrolladores, en esta artículo tienes una explicación para ayudarte a tomar tu decisión.
