Vue.js Ver propiedad

Vue.js es un marco de Javascript muy potente y reactivo, que se utiliza para construir Uis (interfaces de usuario) y SPA (aplicaciones de una sola página). Está construido combinando las mejores características de Angular y React Frameworks ya existentes. A los desarrolladores también les encanta codificar o crear aplicaciones en él.

Vue.js proporciona la propiedad watch para observar y reaccionar a las variables o cambios de datos. Podemos usar la propiedad watch para manipular el DOM cuando se cambia la variable observada. En este artículo, veremos cómo podemos usar la propiedad del reloj y realizar las tareas deseadas en el cambio de variable. Entonces empecemos.

Vigilantes

A vigilante en Vue.js actúa como un detector de eventos para una variable o propiedad. Se utiliza para realizar varias tareas sobre el cambio de alguna propiedad específica. Resulta útil para realizar tareas asincrónicas.

Demostremos y entendamos el concepto de observador considerando un ejemplo.

Ejemplo:

Supongamos que estamos construyendo un sitio web de comercio electrónico, en el que tenemos una lista de artículos, y lo estamos construyendo con un carrito o un componente de pago. En ese componente, necesitamos calcular la cantidad de un solo elemento con respecto al número de artículos.

Primero, asumimos algunas propiedades en los datos.

datos()
regreso
itemName: "Elemento 1",
itemQuantity: nulo,
Precio del artículo: 200,
precio total: 0

,

En el que veremos la propiedad "itemQuantity" y calcularemos el precio total. Primero haremos los enlaces de datos en la plantilla,

antes de escribir el código para ver la variable y calcular el precio total.

Después de escribir este código, tendremos nuestra página web así:

Ahora, queremos cambiar el precio total en el cambio de "itemQuantity" como cuando el usuario cambia la cantidad usando el campo de entrada. El precio total debería cambiarse. Para ello, tendremos que vigilar el "itemQuantity" y calcular el precio total cada vez que se cambie la propiedad "itemQuantity".

Entonces, el observador de "itemQuantity" sería así:

mirar:
cantidad de objetos()
esto.totalPrice = esto.itemQuantity * esto.precio del articulo;
consola.log (esto.cantidad de objetos);

Ahora, siempre que el usuario cambie el "itemQuantity", el precio total cambiará en un momento. Ya no tenemos que preocuparnos por nada. La propiedad del reloj se encargará de este cálculo ahora.

Echemos un vistazo a la página web:

Y tratemos de aumentar o cambiar la cantidad y ver algunos resultados:

Si cambiamos la cantidad, digamos "4", el precio total sería "800":

Del mismo modo, si cambiamos la cantidad a "7", el precio total sería "1400":

Entonces, así es como funciona la propiedad del reloj y ayuda en el desarrollo reactivo. La reactividad es una especie de firma de Vue.js. Además, la propiedad del reloj es útil al realizar operaciones asincrónicas.

Conclusión

En este artículo, hemos aprendido qué es una propiedad de reloj y cómo podemos usarla en Vue.js. También hemos probado un ejemplo de la vida real para comprender su verdadera implementación. Esto ayuda mucho a ahorrar tiempo y acelerar el proceso de desarrollo. Esperamos que este artículo le haya resultado útil y continúe visitando linuxhint.com para una mejor comprensión.