Vue Properties & Methods

On the previous article, we discussed and defined a constructor. In this article, we will learn about Properties and Methods.

Properties are customized declaration of easy-to-handle algorithms or calculations that are parallel to view/display. In a more convenient explanation, when a user changes some values, then the property is expected to display the changed values. On the other hand, methods are functions that are executed once a page is rendered.

Let us create a sample demo in order to make things clear.

Let’s say we are going to compute the total salary of an employee and deduct a specific amount for the loan and tax.

properties and methods

In this image, we declare a deduction for tax with a fixed  value of 750 and a deduction of 400 in loan. The next thing we have to do is to set the property in view and compute for the salary. After this, check your browser and try to insert a specific rate or salary.

properties and methods

The images above will result to a view similar to this:

properties and methods

We can achieve a similar result when we use method. However, when we use method, it executes every page renders while in property, it remembers the previous results and caches the same value except when data is changed.

In the next article, we will tackle Vue Instance Lifecycle Hooks.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.