Vue.js Interview Questions & Answers

Vue.js Interview Questions

Are you in search of Vue.js jobs? Then we have provided you with the complete details in our site page regarding to the Vue.js Interview Question and Answers, jobs roles also. We have provided interview question and answers for both experienced candidates and also for freshers. Vue.js provides you a great career. Vue.js is an open-source JavaScript framework for construction user interfaces. Addition into projects that use other JavaScript libraries is made easy with Vue because it is intended to be incrementally adoptable There are numerous number of jobs in the various leading companies with the job roles like UI Developer - Vue.js, Senior UI Engineer - Node.js/React.JS/Vue.js, Senior JavaScript Engineer many other roles too. To clear any job in the first attempt one should prepare well on all topics of Vue.js. For more details visit our site www.wisdomjobs.com.

Vue.js Interview Questions And Answers

Vue.js Interview Questions
    1. Question 1. What Is Vue.js?

      Answer :

      Vue.js (pronounced /vjuː/, like view) is a JavaScript library that helps you build web applications using the the MVVM (Model-View-ViewModel) architectural pattern.

    2. Question 2. How A View-model Works In Vue.js?

      Answer :

      View:

      <div id="app">

        {{ name }} is {{ age }} years old.

      div>

      Model:

      var my Model = {

        name: "Laraphp",

        age: 24

      };

      ViewModel:

      var myViewModel = new Vue({

        el: '#app',

        data: my Model

      });

    3. Question 3. How To Create Two-way Bindings In Vue.js?

      Answer :

      HTML:

      <div id="app">

        <label for="name">Enter name: label>

        <input type="text" v-model="name" id="name" name="name" />

        <p>{{ name }} is {{ age }} years old.p>

      div>

      JS:

      var my Model = {

          name: "Laraphp",

          age: 24

      };

      var myViewModel = new Vue({

          el: '#app',

          data: my Model

      });

    4. Question 4. How To Use Filters In Vue.js?

      Answer :

      HTML:–

      <div id="app">

        <label for="name">Enter name: label>

        <input type="text" v-model="name" id="name" name="name" />

        <p>{{ name | uppercase }} is {{ age }} years old.p>

      div>

      JS:– 

      var my Model = {

          name: "Laraphp",

          age: 24

      };

      var myViewModel = new Vue({

          el: '#app',

          data: my Model

      });

    5. Question 5. How To Use Custom Filters In Vue.js?

      Answer :

      HTML:-

      <div id="app">

        <ul>

          <li v-for="friend in friends | order By 'age'"> {{ friend.name }}li>

        ul>

      div>

      JS:-

      var my Model = {

        name: "Laraphp",

        age: 24,

        friends: [

          { name: "php", age: 21 },

          { name: "vue", age: 20 },

          { name: "angular", age: 29 }

        ]

      };

    6. Question 6. How To Handle Events In Vue.js?

      Answer :

      HTML:-

      <div id="app">

        Name: <input type="text" v-model="name">

        <button v-on:click="myClickHandler">Say Hello button>

      div> 

      JS:-

      var myViewModel = new Vue({

        el: '#app',

        data: my Model,

        // A click handler inside methods

        methods: {

          ClickHandler: function(e) {

            alert("Hello " + this.name);

          }

        }

       });

    7. Question 7. How To Create Components In Vue.js?

      Answer :

      HTML:-

      <div id="app">

        <fresher go></fresher go>

      div>

       JS:-

      Vue. Component('fresher go', { 

        template: '<a href="https://www.wisdomjobs.com/">

                    fresher go</a>',

      });

    8. Question 8. What Are Directives In Vue.js, List Some Of Them You Used?

      Answer :

      Below are list of commonly used directives in Vue.js

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

    9. Question 9. List Type Of Directive Are Available In Vue Js?

      Answer :

      In Vue js following types of directives are available:

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

    10. Question 10. What Is Vue-resource, How Can You Install Vue Resource?

      Answer :

      VUE-resource is a plugin for vue.js that provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.

      You can install it via yarn or NPM.

      $ yarn add vue-resource

      $ npm install vue-resource

    11. Question 11. How To Create Constants In Vue Js?

      Answer :

      To create constant const keyword is used. In Vue.js we suggest to create a seperate file for defining your constants.

      Example: Creating a Constant in Vue js.

      export const SITE_URL = 'https://www.wisdomjobs.com';

      Importing a Constant in Vue js.

      import {SITE_URL} from './path/to/constants.js';

    12. Question 12. How To Use Other Plugin Into Vue Js?

      Answer :

      var infinite Scroll =  require('vue-infinite-scroll');

      Vue. Use(infinite Scroll)

      Here we used vue-infinite-scroll as plugin and it installed from NPM.

    13. Question 13. How To Use Ternary In Vue Js ?

      Answer :

      <div class="class1"  v-bind: class="{'class2': (!variable)}"></div>

    14. Question 14. How To Pass Laravel Variable Value To Vue Js Variable?

      Answer :

      vue js PROPS is used To pass laravel variable value to vue js variable

      blade.php:

       <?php 

      $site_url = url('');

      ?> 

      <Home site_url="{{$site_url}}"></home> 

      home.vue:

      export default { 

      props: [ 'site_url'], 

              data: function() 

              { 

                 return  { 

                              sitename:this.site_url

                          }

              },

               created: function () {   

                   console.log('Component created.')

              },  

              methods: {

                  displayname:function(url){ 

                      console.log(this.sitename)

                  } 

              },

              mounted() {

                  console.log('Component mounted.')

              }

          }

    15. Question 15. How To Import Components In Vue Js?

      Answer :

      To import components in vue js

      import home from './home.vue'

       export default { 

      props: [ 'base_url'], 

      components: {

                      home 

              },

              data: function() 

              { 

                 return  { 

                              sitename:this.site_url

                          }

              },

               created: function () {   

                   console.log('Component created.')

              },  

              methods: {

                  displayname:function(url){ 

                      console.log(this.sitename)

                  } 

              },

              mounted() {

                  console.log('Component mounted.')

              }

          }

    16. Question 16. Create Basic Vue Js Component Layout?

      Answer :

      basic vue js component layout

      <template>

          <div class="home class"> 

              <a>{{site name}}</a>  

          </div>    

      </template> 

      <script> 

          export default { 

              data: function() 

              { 

                 return  { 

                              sitename:'www.wisdomjobs.com'

                          }

              },

               created: function () {   

                   console.log('Component created.')

              },  

              methods: {

                  displayname:function(url){ 

                      console.log(this.sitename)

                  } 

              },

              mounted() {

                  console.log('Component mounted.')

              }

          }

      </script>

      <style> 

      .a{  

          color: #111;

      </style>

    17. Question 17. How To Check Response Data Length In Vue Js?

      Answer :

      axios.get(url)

      .then(function (response) {   

      console.log(response.data.length);  

      })

      .catch(function (error) { 

      });

    18. Question 18. How To Initialize Js Functions In Vue Js (materialize Modal Popup Auto Initialize)?

      Answer :

      I have called the same function from Vue Js updated event

      updated() 

        this.testingmodel(); 

      },

      But you have to avoid the errors by using try catch on calling function

      methods:{

      testingmodel:function(){  

      try { 

      $('#firstlogintour').modal('open');

      }

      catch(err)

      console.log(err); 

      }

      }

      }

      Vue Updated Scenario:

      This function will call up to when the function or method loads without failure or any Error.

    19. Question 19. How To Append Vue Js Value In Html?

      Answer :

      To append vue js value in html please check below syntax

       {{posts_new.link}}

    20. Question 20. How To Set Cache False And Content-type In Vue Axios?

      Answer :

      var config = { headers: {'Content-Type': 'application/json','Cache-Control' : 'no-cache'}};

      axios.get ('/post',config)

      .then (function (response) { })

      .catch (function (error) { });

Popular Interview Questions

All Interview Questions

All Practice Tests

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Java Script Tutorial