What is vue.js and How it works? An Overview and Its Use Cases

Vue js comes with following features

• Templates
• Reactivity
• Components
• Transitions
• Routing

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` points to the vm instance
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

There are also other hooks which will be called at different stages of the instance’s lifecycle, for example compiled, ready and destroyed. All lifecycle hooks are called with their this context pointing to the Vue instance invoking it. Some users may have been wondering where the concept of “controllers” lives in the Vue.js world, and the answer is: there are no controllers in Vue.js. Your custom logic for a component would be split among these lifecycle hooks.

Lifecycle Diagram

Below diagram shows complete life cycle of Vue Instance

Source: https://v1.vuejs.org/guide/instance.html#Instance-Lifecycle

Also, Read React js Interview questions

You can create Vue instance with the Vue function:

var vm = new Vue({
  // options
})

In one-way data flow the view(UI) part of application does not updates automatically when data Model is change we need to write some custom code to make it updated every time a data model is changed.In Vue js v-bind is used for one-way data flow or binding.

In two-way data binding the view(UI) part of application automatically updates when data Model is changed.
In Vue.js v-model directive is used for two way data binding.

v-model directive is used to create Two-Way Bindings in Vue js.In Two-Way Bindings data or model is bind with DOM and Dom is binded back to model.In below example you can see how Two-Way Bindings is implemented.

<div id="app">
  {{message}}
  <input v-model="message">
</div>
<script type="text/javascript">
  var message = 'Vue.js is rad';
  new Vue({ el: '#app', data: { message } });
</script>

<element directive="expression | filterId [args...]"></element>

In Vue 2.0, there are no built-in filters are availables, however you are free to create your own filters.

Vue.filter() method is used to create and register a custom filter in Vue js. Vue.filter() method takes two parameters a filterId that is usnique name to filter that you going to create and a filter function that takes a value as the argument and returns the transformed value.

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})

export default {
  el: '#your-element'
  components: {
      'your-component'
  }
}

The concept of directive in Vue js is drastically simpler than that in Angular. Vue.js directives provides a way to extend HTML with new attributes and tags. Vue.js has a set of built-in directives which offers extended functionality to your applications.You can also write your custom directives in Vue.js .Below are list of commonly used directives in Vue.js

• v-show
• v-if
• v-model
• v-else
• v-on

In Vue js following types of directives are available

• General Directives
• Literal Directives
• Empty Directives
• Custom Directives

$ yarn add vue-resource
$ npm install vue-resource