Vue.js es un marco de JavaScript micro para la creación de componentes reutilizables y reactivos en su sitio.
Los frameworks frontales varían ampliamente en tamaño y alcance, donde Vue.js se destaca por su diseño minimalista y su enfoque en la adaptabilidad. Tiene la opción de construir su sitio completo usando Vue.js, solo haciendo que un elemento de su sitio sea reactivo, o cualquier cosa intermedia. Debido a esto, es muy accesible con una curva de aprendizaje superficial.
En este artículo vamos a echar un vistazo a los componentes principales de Vue.js y cómo configurar y comenzar, pero primero echemos un vistazo a cuándo querría usar un marco de front-end como Vue.js y por qué .
Los frameworks frontales, como la mayoría de los frameworks, vienen a abstraer tareas comunes, el común denominador que se encuentra entre los proyectos. Vue.js específicamente trata de abstraer el proceso de creación de componentes HTML que se actualizan dinámicamente a través de JavaScript.
Algunos de los puntos problemáticos que Vue.js resuelve para usted, es generar el HTML dinámico, unir las acciones de elementos HTML a su alcance y contexto de mantenimiento de datos, y realizar un seguimiento de cuándo el HTML debe volver a procesarse automáticamente.
Por ejemplo, digamos que tiene una página donde tiene una lista dinámica de nombres. Es posible que haya escrito un código que se parece a esto:
Cuando crea el HTML manualmente, además del hecho de que el código se vuelve difícil de administrar en ejemplos más grandes, no existe una conexión real entre los datos y el HTML generado. Si la matriz de nombres cambia, debe tener en cuenta eso y volver a representar la lista. Todo esto también es solo para mostrar datos dinámicos, si desea agregar manejadores de eventos como un manejador de clic, para guardar el alcance, seguirá anidando su código aún más en:
Con Vue.js separa el HTML como una plantilla que representa qué generar según los datos proporcionados, y Vue.js lo renderizará automáticamente.
Este mismo ejemplo en Vue.js se vería así:
Tenemos una separación total entre los aspectos HTML del código JavaScript y la lógica del código JavaScript, lo que hace que todo sea autónomo y mucho más manejable. Sin embargo, nos estamos adelantando un poco, demos un paso atrás y vemos cómo el núcleo de Vue.js logra esto ...
En el núcleo de Vue.js, usted define una correlación entre su HTML y algunos datos, y cada vez que los datos cambien, el HTML se actualizará. La forma en que esto funciona es cuando al crear una instancia de un componente Vue.js se le pasan algunos datos en forma de un objeto JavaScript, este objeto se modifica y se reemplazan sus propiedades por los métodos get y setter rastreables.
Vue.js analiza el objeto de datos mientras construye el HTML y ve qué datos usó para procesar los diferentes elementos HTML. Al usar esto, supervisa los cambios realizados en el objeto de datos y sabe exactamente qué actualizar y cuándo.
Tener una vinculación tan estrecha entre los datos y la vista simplifica drásticamente el desarrollo de aplicaciones de front-end y minimiza los errores debido a la tergiversación. Esta separación de preocupaciones le permite enfocarse en la lógica de su aplicación sin tener que lidiar con la actualización de la vista.
La instalación de Vue.js es tan simple como incluir la biblioteca:
Ahora, como mencioné, una aplicación Vue.js está compuesta de un objeto de datos y una plantilla HTML en la que se incrustan los datos. Entonces, para que nuestra primera aplicación vea a Vue.js en acción, agreguemos al body :
Primero definimos un div que será nuestra plantilla HTML para nuestra aplicación Vue.js En el interior, utilizamos llaves dobles para la interpolación de datos en el HTML.
Dentro de la aplicación real de Vue.js simplemente definimos los datos y conectamos el div como el elemento para que la aplicación se represente y use como plantilla. A continuación, para una bengala adicional, aumentamos la variable de conteo en nuestra aplicación una vez por segundo.
Eso es todo lo que hay que hacer para crear una aplicación Vue.js, abriendo esto en su navegador, verá que la página se actualiza automáticamente cada vez que actualizamos la propiedad de los datos.
Ahora, en la mayoría de las aplicaciones, el hecho de que el DOM reaccione a los datos que se cambian es solo la mitad de la historia, también necesita una forma de actualizar los datos, Vue.js se ocupa de esto con eventos y métodos. Los métodos son funciones almacenadas que se ejecutan en el contexto de su aplicación Vue.js.
Actualicemos nuestro ejemplo de contador para agregar la capacidad de iniciar y detener el temporizador en lugar de simplemente ejecutar:
En la plantilla HTML, agregamos un botón para iniciar y detener el contador, para lograr esto necesitamos que el texto en el botón sea dinámico y necesitamos un controlador de eventos para cuando se haga clic en el botón.
Para declarar un evento en Vue.js en un elemento, prefija el nombre de cualquier evento DOM HTML estándar con v-on: , entonces el mouseover evento se convierte v-on:mouseover o el keyup evento se convierte v-on:keyup . En nuestro ejemplo, estamos usando el v-on:click atributo para manejar el click evento.
Algo que puede haber notado es que para el texto del botón estamos llamando a un método en lugar de solo hacer referencia a una propiedad almacenada. En muchas situaciones, los datos que almacena no están necesariamente en el formato que desea mostrar en la página. Los métodos se pueden usar aquí para procesar los datos, y toda la reactividad que obtienes de las propiedades se aplica cuando se usan métodos, si los datos subyacentes cambian, la plantilla se actualizará en consecuencia.
En la aplicación Vue.js, ahora tenemos una nueva propiedad que contiene la variable del temporizador y algunos métodos. los toggle método que está vinculado al evento de clic del botón comprueba si el timer se establece la propiedad, comenzando o deteniendo el temporizador respectivamente y counterAction El método se usa para mostrar la acción correcta en el botón, de nuevo en función de la variable del temporizador.
Dado que el método de alternancia cambia la propiedad del temporizador , y el método counterAction -que está en la plantilla Vue.js- usa la propiedad del temporizador, cada vez que se alternan, la plantilla volverá a representar el texto del botón.
Vale la pena señalar que, aunque no tenemos un valor inicial para la propiedad del temporizador , aún debe declararse al crear la aplicación Vue.js. Si no declara la propiedad desde el principio, la propiedad no será reactiva y no causará que el HTML vuelva a procesarse cuando se modifique.
En nuestro ejemplo, la vista se actualiza una vez por segundo mientras el temporizador se está ejecutando, por lo que una vez por segundo se llamará también a nuestro método counterAction cuando se vuelva a dibujar el botón. Vue.js nos permite optimizar esto almacenando en caché el resultado de un método y solo recordando el método si se cambian los datos subyacentes específicamente utilizados en el método. Esto también es útil si utiliza la misma propiedad calculada en varios lugares de la página, en lugar de procesar el valor varias veces, al almacenar en caché el valor, puede reducir una gran sobrecarga.
Actualicemos el ejemplo para incluir propiedades en caché:
La principal diferencia además de para el almacenamiento en caché, es que los métodos bajo computed se hace referencia como propiedades en lugar de métodos, por lo que en la plantilla HTML tuvimos que eliminar los corchetes de counterAction .