Web Prepration

Web Concept Tutorials

Vue

Most Important Vue.js Interview Questions with Answers

by Leave a Comment

In this post, I am going to provided the significant Vue.js Interview questions and answers for professionals who will be going for a job interview as a Front End Developer. These interview questions and answers are prepared by JavaScript Professionals working on Vue.js in top MNC Companies.

It will help you to prepare for technical interviews and online selection tests conducted during campus placement for job interviews for professionals.

1) What is Vue.js?/ What do you understand by Vue.js?

Ans:- Vue.js is a progressive framework of JavaScript used to create Dynamic User Interfaces and single-page applications.

2) Why is Vue.js called a progressive framework?

Ans:- Vue.js called a progressive framework because it is being changed and developed continually.

3) What is the difference between v-show and v-if directives?

Ans:- Below are some of the main differences between between v-show and v-if directives:

  • v-if only renders the element to the DOM if the expression passes whereas v-show renders all elements to the DOM and then uses the CSS display property to show/hide elements based on expression.
  • v-if supports v-else and v-else-if directives whereas v-show doesn’t support else directives.
  • v-if has higher toggle costs since it add or remove the DOM every time while v-show has higher initial render costs. i.e, v-show has a performance advantage if the elements are switched on and off frequently, while the v-if has the advantage when it comes to initial render time.
  • v-if supports tab but v-show doesn’t support.

4) What is the Virtual DOM?

Ans:- The Document Object Model or DOM defines an interface that allows languages such as JavaScript to access and manipulate an HTML document. Elements are represented by nodes in a tree and the interface allows us to manipulate them. This interface, however, comes with a cost and a large number of very frequent DOM operations will slow down the page.

Vue solves this problem by implementing a virtual representation of the document’s structure in memory where a virtual node (VNode) represents nodes in a DOM tree. When manipulation is needed, instead of performing it on the real DOM, the calculations and operations are performed in memory on the Virtual DOM. This is naturally faster and allows the Virtual DOM algorithm to compute the most optimised way to update the actual DOM structure.

Once this computed, it is applied to the actual DOM tree. This boosts performance and is the reason why Virtual DOM based frameworks such as Vue and React have gained so prominence

5) How to create an instance of Vue.js?

Ans:- Every Vue application starts by creating a new Vue instance with the Vue function:

1
2
3
4
5
 
var vm = new Vue({
// options
})
 

6) Explain the differences between one-way data flow and two-way data binding?

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

7) Who is the founder/ inventor of Vue.js?

Ans:- Evan you is the founder of Vue.js. He was working at Google on several Angular projects when he founded Vue.js.

8) How can I fetch query parameters in Vue.js?

Ans:- You have access to a $route object from your components, that expose what we need.

1
2
3
4
 
//from your component
console.log(this.$route.query.test)
 

9) What is $parent in Vue?

Ans:- Similar to $root, the $parent property can be used to access the parent instance from a child.
Although it provides direct access, it makes the application hard to test and debug. And we can not easily find out the where the mutation come from.
Vue also provides $child just like $parent, but it can be used to access the child instance.

10) How can you create Two-Way Bindings in Vue.js?

Ans:- The v-model directive is used to create Two-Way Bindings in Vue js. In Two-Way Bindings, data or model binds with DOM, and Dom binds back to the model.

Let’s see an example to demonstrate how Two-Way Bindings is implemented.

1
2
3
4
5
6
7
8
9
10
 
<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>
 

11) How to deploy Vue.js app?

Ans:- If you’ve created your project like this:

1
2
3
 
vue init webpack myproject
 

Now you can run

1
2
3
 
npm run build
 

12) What are Components in Vue.js?

Ans:- Components are one of most powerful features of Vue js.In Vue components are custom elements that help extend basic HTML elements to encapsulate reusable code.

Following is the way to register a Vue component inside another component:

1
2
3
4
5
6
7
8
 
export default {
el: '#your-element'
components: {
'your-component'
}
}
 

13) Can we call Rest API from Vue.js? How?

Ans:- Yes, we can call Rest API from Vue.js. There are several HTTP libraries that can used to call REST Api’s from Vue.js. One of the popular libraries is Axios. It is very simple to use and lightweight. You can include it in your project by using the following command.

1
2
3
4
5
6
7
8
9
 
npm install axios --save
Implementing GET method using Axios in Vue JS
axios({ method: "GET", "URL": "https://httpbin.org/ip" }).then(result => {
this.ip = result.data.origin;
}, error => {
console.error(error);
});
 

14) How to pass an argument to Vue.js filters?

Ans:- Consider:

1
2
3
4
5
6
 
filters:{
currency: function(value, arg1){
return arg1+value;
}
 

And usage:

1
2
3
4
5
6
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>
<div id="vue-instance">
{{123 | currency('$') }}
</div>
 

15) How can you handle Events in Vue.js?

Ans:- See the following example which demonstrates how to handle Events in Vue.js:

HTML Code:

1
2
3
4
5
6
 
<div id="app">
Name: <input type="text" v-model="name">
<button v-on:click="myClickHandler">Say Hello button>
div>
 

JS Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
var myViewModel = new Vue({
el: '#app',
data: my Model,
// A click handler inside methods
methods: {
ClickHandler: function(e) {
alert("Hello " + this.name);
}
}
});
 

16) What is the difference v-bind and v-model? Provide some code example.

Ans:- v-model is a two-way binding for form inputs. It combines v-bind, which brings a js value into the markup, and v-on:input to update the js value.

Consider:

1
2
3
4
5
6
7
8
9
 
<input v-model="something">
and it's just syntactic sugar for:
 
<input
v-bind:value="something"
v-on:input="something = $event.target.value"
>
 

v-model works with all the basic HTML input types (text, textarea, number, radio, checkbox, select). You can use v-model with input type=date if your model stores dates as ISO strings (yyyy-mm-dd).

17) How many types of the directive are used in Vue.js?

Ans:- The following types of directives are used in Vue.js:

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

18) What are Async components?

Ans:- When a large application uses a lot of components, it may not make sense to load up all components at the same time from the server. In such a case, Vue allows us to define components that are loaded from the server asynchronously, as and when needed. When declaring or registering components, Vue accepts a factory function that offers a Promise. The component can then be ‘resolved’ when called.

This saves bandwidth and application bootstrap time by loading only the essentials and deferring async components to their invocation time in the future.

Here’s a simple example of how a component can be made asynchronous.

1
2
3
4
5
6
7
 
new Vue({
components: {
‘tweet-box’: () => import(‘./components/async/TweetBox’)
}
});
 

When used this way, Webpack’s code splitting feature is employed to deliver this functionality.

19) What is $child property in Vue.js?

Ans:- In Vue.js, the $child property is just like $parent property, but it is used to access the child instance.

20) What is the difference between slots and scoped slots in Vue.js?

Ans:- In Vue.js, a slot is a placeholder in a child component filled with content passed from the parent component.

In the slot, the component is compiled in the parent’s scope and then passed to the child component. So, it is not possible to use child component properties in a slot’s content.

In Scoped slot, you can pass child component data to the parent scope and then use it in slot content.

Install Laravel 6 with Vue JS

by Leave a Comment

If you are beginner with Laravel 6 and Vue then I am sure I can help you to install Vue in Laravel 6. It’s very simple way to install using Laravel UI composer package. Laravel ui provide way to install bootstrap, vue and react setup. they also provide auth scaffold for login and register. laravel 6 provide easy way to work with bootstrap, vue and react.

If you want to use Vue Js in application then before install you must need to install Node js and NPM (Node Package Manager). If your system is not ready with Node js and NPM then you need to install. You can download the Node Js from its official site. After a successful installation, you are ready to start with Vue Js tutorials.

You can use the following commands to check the current version of Node js and NPM.

1
2
3
4
5
6
7
 
// Node js Version
node -v
 
// NPM Version
npm -v
 

The laravel/ui is a separate package that provides the UI scaffoldings for bootstrap, vue and react. Alongside with the auth scaffold for login and registration.

Read Also: How to Integrate Stripe Payment Gateway in Laravel

If you already have a Laravel project setup. then open your terminal and run below command

1
2
3
 
composer require laravel/ui
 

After successfully installation of package, Now we can add Vue in our application

Copy below command and run your terminal

1
2
3
 
php artisan ui vue
 

Installing Node Modules

You can use the “npm” command to install the necessary node modules.

1
2
3
 
npm install
 

After successful installation of node modules, you can see the new directory named “node_modules” at the root of your application. This directory contains all the necessary modules.

Vue Js Folder Structure and Files

In the Laravel app, all the necessary Vue Js component found at the “resources/js/components”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>
                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
 

In the “resources/js/app.js” file, we will do the basic logic which is required for our application.

Read Also: Angular 8 interview questions and answer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
    el: '#app'
});
 

Blade Template
You can add the required component to your blade template. For example:

1
2
3
4
5
6
 
@extends('layouts.app')
@section('content')
    <example-component></example-component>
@endsection
 

Compiling the Vue Js Component
You can use the following NPM command to track the changes in your application and compile the components and other required files.

1
2
3
4
 
// command
npm run watch