Understanding the Vue Instance

In the last tutorial, we went over the simple Hello World application in VueJS. In this, we will understand the Vue Instance and data reactivity. We wrote the following code to initialize a new Vue Instance and also print Hello World on the page. Let's understand how everything is working behind the scenes.

var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World!'
        }
});

Vue Instance

In the above code, we are initializing an new Vue instance, and passing it an object data to it, the object contains two data properties el and data.

• Inside the options object, we have denoted that we want to connect this Vue instance to the element with an id of the app.
• Also, we have defined a data property named message.

A Vue app attaches itself to a single DOM element (#app in our case) then fully controls it. The HTML is our entry point, but everything else happens within the newly created Vue instance.

Data Reactivity

Also, note that the data is now reactive. Try changing the value of message property by opening the console of your browser.

app.message = 'Some Other Value';

This should change the value of message property everywhere else, you have outputted it to.