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.

Livewire Component Library

Data Reactivity

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

Host Laravel Application on DigitalOcean

Use coupon 5balloons on this Cloudways Affiliate URL to get special discount.
app.message = 'Some Other Value';

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

Practice Excercises

  1. 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)

Join my VueJS Newsletter

As I advance in my Journey of learning VueJS, I will be working on different exercises and challenges. Subscribe to receive the latest tutorials (every week) directly in your inbox.

    I won't send you spam. Unsubscribe at any time.

    Powered By ConvertKit

    Site Footer