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.

In Javascript you can define new object using key value pairs inside curley braces.
For example var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

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.

Note: It's also important to note that placing the #app on the body or HTML tag will throw an error. [Vue warn]: Do not mount Vue toor- mount to normal elements instead.

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.

Practice Excercises

Create two different Vue Instance in same page, bind one to element of id app1 and another to element of id app2. (CodePen Solution Link)

Comments