VueJS 2 Hello World Example Script

In this tutorial, we will simply perform the hello world Example using VueJS or you can say we are going to create our first VueJS application.

The VueJS framework returns only the Vue object. So, to start Vue JS you need to create a Vue instance, and the instance takes an object as an argument or parameter, and the object has many Properties & Methods to control a specific element.

var myApp = new Vue({
    // Properties and Methods
});

---

After creating a Vue instance, to control a particular element first you need to select the element which you want to control.

To select an element we will use the el: Property –

// Target element
<div id="myApp"></div>

// Including VueJS
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//Creating the Vue instance & Selecting the div element whose id is myApp.
<script>
    var myApp = new Vue({
        el:'#myApp'
    });
</script>

---

---

VueJS Hello World Example

To store dynamic data inside a Vue instance we will use the data: property and it is an object, and then we will use the double curly brackets {{}} to show the value of the data.

<div id="myApp">
  <h1>{{ myMessage }}</h1>
  <p>{{ subHeading }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var myApp = new Vue({
    el:'#myApp',
    data:{
      myMessage: 'Hello World!',
      subHeading: '-- Welcome to VueJS --'
    }
});
</script>