Vue.js is a progressive framework for building user interfaces. This is lean, this is fast, and unlike frameworks like React and Angular, it’s straightforward to get started. Here we will build a simple Hello World app, and it will just take 2 minutes for the whole process:

First of all please Import this JavaScript file: unpkg.com/vue This fetches the latest version of Vue.js.

Then we will create a wrapper root div which will hold the app

<div id="app-root">
  <!-- HTML inside. -->
</div>

Then, we will create a new Vue Instance, this will be an object, and then we will pass the above HTML into the DOM through an el key and app-root as value

new Vue({
  el: '#app-root'
});

Hello World!

Now, let’s insert a data key, and its value will be object. This object will then contain a title key with a value Hello World or anything you would like.

new Vue({
  el: '#app-root',
  data: {
    title: 'Hello World!'
  }
});

Now, we will add a p tag, and inside it, we will wrap title with two curly braces. This is how Vue declaratively render’s the data. The Syntax {{}} is called String Interpolation.

<div id="app-root">
  <p>  </p>
</div>

Form Input

Now we will pass an input tag with Vue Event handler v-on and pass changeTitle method inside it.

<div id="app-root">
  <input type="text" v-on:input="changeTitle">
  <p>  </p>
</div>

Now, we will create a methods object, insert a changeTitle function, pass the default javascript event argument. Within this object, we will pass this.title and equate it to event.target.value.

new Vue({
  el: '#app-root',
  data: {
    title: 'Hello World!'
  },
  methods: {
    changeTitle(event) {
      this.title = event.target.value;
    }
  }
});