Comenzando con Vue.Js

Vue.js es un marco de micro JavaScript para crear componentes reutilizables y reactivos en su sitio.

Los frameworks de front-end varían ampliamente tanto en tamaño como en alcance, donde Vue.js se destaca es en su diseño mínimo y su enfoque en la adaptabilidad. Tiene la opción de construir su sitio completo usando Vue.js, solo hacer que un elemento de su sitio sea reactivo, o cualquier cosa intermedia. Debido a esto, es muy accesible con una curva de aprendizaje poco profunda.

En este artículo vamos a echar un vistazo a los componentes centrales de Vue.js y cómo configurarlo y comenzar, pero primero echemos un vistazo a cuándo le gustaría usar un marco de front-end como Vue.js y por qué .

Por qué utilizar un marco de front-end

Los frameworks front-end, como la mayoría de los frameworks, llegan a abstraer tareas comunes, el denominador común que encuentras entre proyectos. Vue.js viene específicamente a abstraer el proceso de creación de componentes HTML que se actualizan dinámicamente a través de JavaScript.

Algunos de los puntos débiles que Vue.js resuelve para usted es generar el HTML dinámico, vincular las acciones de los elementos HTML a sus datos, mantener el alcance y el contexto, y realizar un seguimiento de cuándo es necesario volver a renderizar el HTML automáticamente.

Por ejemplo, digamos que tiene una página en la que 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 rápidamente 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 ser consciente de ello y volver a representar la lista. Todo esto también es solo para mostrar datos dinámicos, si desea agregar controladores de eventos como un controlador al hacer clic, para guardar el alcance, seguirá anidando su código cada vez más en:

Con Vue.js, separa el HTML como una plantilla que describe qué generar en función de los datos proporcionados, y Vue.js lo representará automáticamente.

Este mismo ejemplo en Vue.js se vería así:

Tenemos una separación completa 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 veamos cómo el núcleo de Vue.js logra esto …

DOM basado en datos

En el núcleo de Vue.js, usted define una correlación entre su HTML y algunos datos, y cada vez que los datos cambian, el HTML se actualizará. La forma en que esto funciona es cuando al crear una instancia de un componente de Vue.js le pasa algunos datos en forma de un objeto JavaScript, este objeto luego se modifica reemplazando sus propiedades con métodos getter y setter rastreables.

Vue.js analiza el objeto de datos mientras construye el HTML y ve qué datos usó para representar los diferentes elementos HTML en su interior. Con esto, monitorea los cambios realizados en el objeto de datos y sabe exactamente qué actualizar y cuándo.

Tener un vínculo tan estrecho entre los datos y la vista simplifica drásticamente el desarrollo de aplicaciones de front-end y minimiza los errores debidos a tergiversaciones. Esta separación de preocupaciones le permite concentrarse en la lógica de su aplicación sin tener que ocuparse de actualizar la vista en absoluto.

Creando su primera aplicación Vue.js

La instalación de Vue.js es tan simple como incluir la biblioteca:

Ahora, como mencioné, una aplicación Vue.js se compone de un objeto de datos y una plantilla HTML en la que incrustar los datos. Entonces, para que nuestra primera aplicación vea 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 usamos las llaves dobles para la interpolación de datos en el HTML.

Dentro de la aplicación Vue.js real, simplemente definimos los datos y conectamos el div como el elemento para que la aplicación se procese y use como plantilla. A continuación, para darle un toque adicional, incrementamos la variable de recuento en nuestra aplicación una vez por segundo.

Eso es todo lo que hay que hacer para crear una aplicación Vue.js, al abrirla en su navegador, verá que la página se actualiza automáticamente cada vez que actualizamos la propiedad de los datos.

Eventos y métodos

Ahora, en la mayoría de las aplicaciones, hacer 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 encarga 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 ejecutarlo:

En la plantilla HTML, agregamos un botón para iniciar y detener el contador, para lograr esto necesitamos que el texto del botón sea dinámico y necesitamos un controlador de eventos para cuando se hace clic en el botón.

Para declarar un evento en Vue.js en un elemento, antepone el nombre de cualquier evento DOM HTML estándar con v-on:, entonces el mouseover el evento se convierte en v-on:mouseover o el keyup el evento se convierte en 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 simplemente 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 obtiene 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. La toggle El método que está vinculado al evento de clic del botón comprueba si el timer se establece la propiedad, iniciando o deteniendo el temporizador respectivamente y el counterAction El método se usa para mostrar la acción correcta en el botón, nuevamente basado en la variable del temporizador.

Desde el palanca el método cambia el Temporizador propiedad, y la neutralización El método, que se encuentra en la plantilla Vue.js, usa la propiedad del temporizador en cualquier momento. palanca se llama la plantilla volverá a representar el texto del botón.

Vale la pena señalar que, aunque no tenemos un valor inicial para el Temporizador propiedad, 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 hará que el HTML se vuelva a representar cuando se cambie.

En nuestro ejemplo, la vista se actualiza una vez por segundo mientras el temporizador está funcionando, por lo que una vez por segundo nuestro neutralización también se llamará al método 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 recuperando el método si se cambian los datos subyacentes utilizados específicamente en el método. Esto también es útil si usa la misma propiedad calculada en varios lugares de la página, en lugar de procesar el valor varias veces, al almacenar el valor en caché, puede reducir una gran cantidad de gastos generales.

Actualicemos el ejemplo para incluir propiedades almacenadas en caché:

La principal diferencia, además del almacenamiento en caché, es que los métodos bajo computed se mencionan como propiedades en lugar de métodos, por lo que en la plantilla HTML tuvimos que eliminar los corchetes de neutralización.