#Day 2 : The Vue Instance-Date || 30 days of Vue

Let’s reiterate what we’ve learned from the previous article, the Vue instance is the starting point of the Vue application, and it contains data property that allows you to bind data from our instance and on the template.

In the last article, we bound the test property as a data property shown in the HTML templates.

Now let’s bound some different properties inside the data and show that data property value in our HTML templets with the help of double curly bracket {{}}.

The data property of an instance is known to be reactive, which means if we modify or change the data value, Vue will recognize the change and re-render the template to show the updated value of the data.

Methods and Event

Now let’s see the real example of data reactivity.

Here to change the data value, We will provide a button in the HTML templates that will be responsible for changing.

Now out button doesn’t do anything for the interactivity. We can attach a click listener to the button to trigger the change of data property.

To facilitate this change, we can use instance’s methods property, and this method will be able to change data value directly.

So let’s see how we can do it.

In our example, we’ll create a changeUser() method that changes the value of user property. And for referencing the user property in the changeUser() method, we are using this keyword.

Let’s see the output and understand how it’s work.

When we click the button, the changeUser() method is called, which is change the user value. When the user value changes, the templets are automatically re-rendered to show the change

Vue.js Doc https://vuejs.org/v2/guide/reactivity.html

Thanks 😍😍