Vue.js Interview Questions & Answers

    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.

 

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

      View:

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

      div>

      Model:

      var my Model = {

      name: “Laraphp”,

      age: 24

      };

      ViewModel:

      var myViewModel = new Vue({

      el: ‘#app’,

      data: my Model

      });

 

HTML 5 Interview Questions

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

      HTML:

       

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

      div>

      JS:

      var my Model = {

      name: “Laraphp”,

      age: 24

      };

      var myViewModel = new Vue({

      el: ‘#app’,

      data: my Model

      });

 

 

    1. Question 4. How To Use Filters In Vue.js?Answer :

      HTML:–

       

      {{ 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

      });

 

HTML 5 Tutorial

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

    HTML:

      • {{ 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 }

        ]

        };

     

    Java Script Interview Questions

      • Question 6. How To Handle Events In Vue.js?Answer :

        HTML:

          Name:

         

        div>

        JS:

        var myViewModel = new Vue({

          el: ‘#app’,

          data: my Model,

          // A click handler inside methods

          methods: {

            ClickHandler: function(e) {

              alert(“Hello ” + this.name);

            }

          }

         });

     

     

      • Question 7. How To Create Components In Vue.js?Answer :

        HTML:-

          </fresher go>

        div>

        JS:-

        Vue. Component(‘fresher go’, {

        template: ‘

        fresher go’,

        });

     

    Java Script Tutorial
    AJAX Interview Questions

      • 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

     

     

      • 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

     

    Angular JS Interview Questions

      • 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

     

    AJAX Tutorial

      • 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://interviewquestions.ap6am.com/’;

        Importing a Constant in Vue js.

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

     

    Ext JS Interview Questions

      • 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.

     

     

    HTML 5 Interview Questions

      • Question 13. How To Use Ternary In Vue Js ?Answer :

     

    Ext JS Tutorial

      • 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:

          

        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.’)

        }

        }

     

     

      • 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.’)

        }

        }

     

    HTML DOM Interview Questions

      • Question 16. Create Basic Vue Js Component Layout?Answer :

        basic vue js component layout

         

                {{site name}}

         

     

     

    Node.js Tutorial

      • 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) {

        });

     

    Node.js Interview Questions

      • 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.

     

     

    Java Script Interview Questions

      • 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}}

     

    Git (software) Tutorial

      • 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) { });

     

     

    Git (software) Interview Questions