A Brief Description About VueJS

Posted By : Tajinder Singh | 31-Oct-2018

VUE JS

Vue js is a Progressive framework of javascript. which is basically used to build user interfaces. This is basically focused on the view layer of the application. which is easy to integrate with the other libraries. It is also capable of developing the Single page applications in a very different and sophisticated manner.

Some Advantages are:

1)Small size: The size of Vue js is very small 18-21 KB.

2)Easy to understand: It is easy to understand and a lot of application can be made easily as its structure is understandable.

3)Simple Integration: Vue Js is easy to integrate with the existing applications as well.

In this the core of the veu.js it declaratively renders the data to the DOM using straight Forward template syntax.

<div id="vue-app">
  {{ message }}
</div>

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

In this we have the first app is created the data and the DOM are linked together.

1) In addition to the text, interpolation can also bind attributes. we can bind the message with the attributes.

<div id="vue-2">
  <span v-bind:title="message">
   
hover here!!
  </span>
</div>



var app2 = new Vue({
  el: '#vue-2',
  data: {
    message: 'Welcome ' + new Date().toLocaleString()
  }
})

Here, In the above example, the v-bind option is a directive. they are indicated by v- because it is easy to understand that they are developed by vue.

2) It can also handle user inputs. we can perform manipulations with the user inputs.

<div id="vue">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse</button>
</div>


var rev = new Vue({
  el: '#vue',
  data: {
    message: 'Welcome to  Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})