Vue Js Interview Questions And Answers

vue js interview questions and answers   Top 25 Vue Js Interview Questions And Answers

1) What is Vue JS?

● It is progressive javascript framework to develop interactive web interfaces.
● It focuses on view layer.
● It is easy to understand.
● It is scalable and simple to install.


2) What are the features of Vue JS?

Following are some of the features of Vue JS:
● Virtual DOM - Replica of DOM is created in form of JS data structures.
● Data Binding - different binding take place with the help of binding directives called v-bind
● Components - These help to create reusable custom elements.
● Event Handling - To listen events v-on has been added to DOM elements.
● Lightweight - This is very light framework with high performance.


3) What are the computed properties in Vue JS?

These are one of the important features of VueJS.It listen the changes and perform necessary actions.


4) What is Vue-cli ?

It is command line interface which can be used to install Vue JS. Apart from this vue-cli helps to compile and build the projects.


5) How we can include Vue JS in the HTML file?

Here is the way to include Vue JS in the HTML:

<html>
   <head>
      <script type = ""text/javascript"" src = ""vue.min.js""></script>
   </head>
   <body></body>
</html>


6) What are root Vue instance in Vue JS?

This is the instance of Vue. Here is the example:

var abc = new Vue({
})


7) What is v-html directive in Vue JS?

This directive can be used with HTML element to tell the VueJS that the output is in the form of HTML content.

Example:

<div v-html = "htmlcontent"></div>


8) What is v-bind directive in Vue JS?

It is used to assign attribute to HTML tag.

Example:

 <img v-bind:src = "imgsrc" width = "300" height = "250" />


9) What is v-model directive in Vue JS?

The v-model directive binds the value of HTML elements to application data. This is also known as two-way binding in Vue JS.
Two-way binding means that any data related changes affecting the model are immediately propagated to the matching view(s), and any changes made in the view(s) (say, by the user) are immediately reflected in the underlying model.

Example:

 <div id="app">
  <p>{{ message }}</p>
  <p><input v-model="message"></p>
</div>


10) What is v-for directive in Vue JS?

The v-for directive is being used to bind an array of Vue objects to an "array" of HTML element.

Example:

<div id="app">
 <ul>
   <li v-for="x in todos">
   {{ x.text }}
   </li>
  </ul>
</div>


11) What are Vue JS components?

These are the components that are used to create custom reusable elements.

Example:

     <div id = "component_test">
         <test></test>
      </div>

Vue.component('test',{
   template : '<div><h1>This is sample program</h1></div>'
});
var vm = new Vue({
   el: '#component_test'
});


12) In Vue JS what are the dynamic components?

These are created using keyword component.

 <component v-bind:is = "view"></component> 


13) What is watch in Vue JS?

It is used to update the values without any specific events and extra validation.

Example:

             watch : {
               km:function(val) {
                  this.km = val;
                  this.mtr = val * 1000;
               },
               mtr : function (val) {
                  this.km = val/ 1000;
                  this.mtr = val;
               }
            } 


14) How we can bind HTML classes in Vue JS?

In order to bind HTML classes we can use v-bind: class

Example:

 <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div> 


15) What is v-on in Vue JS?

This is an attribute which can be added to the DOM elements to listen to different events.

Example:

<button v-on:click = "displaynumbers">Click</button>


16) What is conditional rendering in Vue JS?

Here if certain condition met then only the output will be displayed. These condition checks is done with the help of v-if, v-else, v-show etc.

Examples:


v-if
<h1 v-if = "show">This is h1 tag</h1>

v-else
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>

v-show
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>
         <div v-show = "show"></div>


17) What is the difference between v-if and v-show in Vue JS?

V-if removes the element from the DOM if the condition is false and adds back if its true. Whereas v-show hides the element if condition is false using display:none thus DOM element is always present.


18) What is List rendering in Vue JS?

It will render over the list of array with v-for directive loop.

Examples:


v-for
<ul>
   <li v-for = "a in items">{{a}}</li>
</ul>


19) What is transition in Vue JS?

Vue JS has built in function which can be applied to HTML DOM element for the transition to take place.

Examples:


<transition name = "nameoftransition">
   <div></div>
</transition>


20) List down some of the common transition classes in VueJS?

Following are the classes:
● v-enter
● v-enter-active
● v-leave
● v-leave-active


21) How we can create custom directive in Vue JS?


Vue.directive('nameofthedirective', {
   bind(e1, binding, vnode) {
   }
})


22) What are the filters in Vue JS?

It helps with text formatting. Pipe symbol is needed at the end of JavaScript expression for filters.

Examples:


filters : {
   countletters : function(value) {
      return value.length;
   }
}


23) What is router-link in Vue JS?

It is used to navigate to the HTML content that we need to display to the user.

Examples:


<router-link to = "/route2">Router Link 2</router-link>


24) What are mixins in Vue JS?

They are used with the components. When component uses mixins, it become part of component itself.

Examples:


created: function () {
               this.startmixin()
            }


25) What are the render functions in Vue JS?

In Vue JS the render function essentially returns a virtual DOM node which will be rendered by Vue in the browser DOM.
A virtual Document Object Model (or 'DOM') allows Vue to render the component in its memory before updating the browser. This makes everything faster as there are fewer interactions with the browser.

Examples:


render :function(createElement){
   var a = this.elementtype.split(",");
   return createElement(a[0],{
      attrs:{
         id:a[3],
         style:"color:"+a[2]+";font-size:"+a[3]+";"
      }
   },
   this.$slots.default
   )
}