30+ Vue.js Interview Questions and Answers

Spread the love

Introduction:

Vue.js is a framework of JavaScript, which is utilized for building User Interfaces and single page applications. It is a progressive framework, which means that it is being changed and developed continually. It is evolving fast with the passage of time, and new libraries and extensions are coming into existence. It is being chosen by large number of developers, and its popularity is increasing day by day. It can potentially be a competitor of Angular.js.

Vue.js was created by Evan you, who worked at Google. He worked on several different projects, using Angular.js. He understood what he required for his projects, and create Vue.js.

Questions and Answers about Vue.js 

Here is the best list of Vue.js Interview Questions for freshers and experienced professionals.

Q: What is Vue.js?

A: Vue.js is a JavaScript framework. It is used to build single page applications and user interfaces.

Q: Who is the founder of Vue.js?

A: The founder of Vue.js is Evan you. He founded Vue.js when he has worked for Google in several projects, in which he used angular.js.


Q: What is VUE-resource, how can you install Vue-Resource?

A: VUE-resource is a plugin for vue.js. This helps in making web requests and handling responses, in which XHMLHttpRequests or JSONP is used.

You can install VUE-resource by inserting following commands of yarn or npm:

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

Q: How to install vue.js?

A: You can install vue.js by following steps:

  • Use CDN by including <script> tag in HTML file
  • Install using Node Package Manager (NPM)
  • Install using Bower
  • Use Vue-cli to setup your project

Q: What are advantages of Vue.js?

A: The advantages of Vue.js include:

  1. Very Small: One of the most exciting advantage is that vue.js is very small in size. The size is 18–21KB, which means it can be downloaded very easily in less time by user.
  2. Easily Comprehended and Used: The framework of Vue.js is very user-friendly and understandable. User can easily understand and develop applications.
  3. Integration with Existing Applications: Vue.js framework is very much used because it integrates existing applications, for vue.js has components for everything. It can be integrated with applications that are written in JavaScript.
  4. Very comprehensive documentation: Developers can develop applications or webpages only having little knowledge about HTML. It is so because documentation is very comprehensive.
  5. Flexible: You can use virtual nodes to write HTML files, JavaScript files and pure JavaScript file. It is greater flexibility provided.
  6. Two-way Communication: It is very useful for it provides two-way communication with it MVVM architecture.

Q: What are disadvantages of Vue.js?

A: Disadvantages of Vue.js:

  1. Unpopular Framework: Vue.js is evolving at the time, so it does not have popularity as much as angular.js and react.js has. So it has small community.
  2. Chinese-American Product: Most of the coding is in Chinese. So, English speaking developers face a great challenge.
  3. Outdated Online Tutorials: It is evolving very fast, so what you may encounter online, could be outdated. So, be very careful.
  4. Corresponding Issue: There can occur a corresponding issue because there are not many libraries or extensions.
  5. Over-Flexibility: It is good to have flexibility, but sometimes it can lead you to making errors, and irregularities which will impact your project negatively.

Q: Who are using Vue.js?

A: Following websites have used Vue.js on parts of their projects and applications:

  1. Euronews
  2. Grammarly
  3. Laracast
  4. Facebook
  5. Behance
  6. Netflix
  7. Gitlab
  8. Codeship
  9. Livestorm
  10. Adobe
  11. Xiaomi
  12. Alibaba
  13. Wizzair

Q: How to create Constants in Vue js?

A: Constants means a value which cannot be changed. You can declare a constant in vue.js by following steps:

Step#1: Installation

  • npm install –save vue-constants

Step#2: Utilize it in your project:

import VueConstants from ‘vue-constants’

Vue.use(VueConstants);

Step#3: Then, use it in following way:

export default {

constants: {

field1: value1,

}

}

Q: How to create an instance of Vue js?

A: Creation of Instance of Vue.js with Vue functions:

var vm = new Vue({

// options

})

Q: Explain the differences between one-way data flow and two-way data binding?

A: Difference between one-way data flow and two-way data binding:

  1. Updates: In one way data flow, view-UI part of application does not update automatically. But in two-way data binding, view (UI) part of application updates automatically.
  2. Different usages: In one way data flow, v-bind is used for data flow or binding. But in two-way data binding, v-model is used for two-way data binding.

Q: What are Components in Vue.js? How to register a component inside other component?

A: Basic HTML elements are extended by Vue components in order to encapsulate reusable code. Vue components are custom elements. You can register a component inside another component using following command:

export default {

el: ‘#your-element’

components: {

‘your-component’

}

}

Q: List some features of Vue.js?

A: Following are exceptional features of Vue.js:

  • Transitions
  • Routing
  • Templates
  • Components
  • Reactivity


Q: What are filters in VUE.js?

A: Vue.js does not have built-in filters. You can create filters in Vue.js. Filter is a function of Vue.js which takes a value, processes it and returns processed value.

Q: How to create a custom filter in Vue.js?

A: You can use “Vue.filter()” method to create and register a filter in vue.js. It takes two parameters.

ue.filter(‘reverse’, function (value) {

return value.split(”).reverse().join(”)

})

Q: List type of Directive are available in Vuejs?

A: Following is list of directives available in Vue.js:

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

Q: How to write and use for loop in Vue js?

A: In following way, you can do so supposing you have a list of tasks to display:

Step#1: Create a list, like this:

<script>

module.exports = {

data: function() {

return {

title: ‘Titre de mon application’,

tasks: [

{ title: ‘write an assignment’ },

{ title: ‘check student’s copies’ },

{ title: ‘read articles regarding topic’ },

{ title: ‘go to school for teaching’ }

]

}

}

}

</script>

Step#2: Display them modifying template:

<template>

<div id=”app”>

<h1>{{ title }} </h1>

<input v-model=”title”>

<h2>Task List</h2>

<ul id=”task-list”>

<li v-for=”task in tasks”>

{{ task.title }}

</li>

</ul>

</div>

</template>

Q: How to write and use if condition in vue js?

A: We will insert the task “Reading Articles Regarding Topic” in Brown. In our loop, test will be done if task’s title is “Reading articles regarding Topics” and if so, set it to brown. If not, nothing is done.
Directive v-if and v-else is used in following way:

<span v-if=”task.title == ‘reading articles regarding topic'” style=”color:brown;”>

{{ task.title }}

</span>

<span v-else>

{{ task.title }}

</span>

Now, a src/app.vue in following manner:

<template>

<div id=”app”>

<h1>{{ title }} </h1>

<input v-model=”title”>

 

<h2>Task List</h2>

<ul id=”task-list”>

<li v-for=”task in tasks”>

 

<span v-if=”task.title == ‘reading article regarding topic'” style=”color:brown;”>

{{ task.title }}

</span>

<span v-else>

{{ task.title }}

</span>

 

</li>

</ul>

 

</div>

</template>

 

<script>

module.exports = {

data: function() {

return {

title: ‘Titre de mon application’,

tasks: [

{ title: ‘write the assignment’ },

{ title: ‘check student’s copies’ },

{ title: ‘reading article regarding topic’ },

{ title: ‘Go to school for teaching’ }

]

}

}

}

</script>

 

<style>

#app {

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style>

Q: Explain Life cycle of Vue Instance?

A: All Vue instance component undergo a life cycle. During this cycle process, it gives us opportunities to add code in different stages. These stages are:

  • BeforeCreate: Functions can be performed before component has been added to DOM.
  • Created: It is used to run code when a hook has been created.
  • BeforeMount: It runs after initial render happens, and after compilation of template or render functions.
  • Mounted: This is the most used hook. This has access to reactive component, template and rendered DOM.
  • BeforeUpdate: It runs after data changes, and update cycle starts.
  • Updated: It is used for accessing DOM after a property change. It is the most secure place to do so.
  • BeforeDestory: It is used for clearing up events. It is the right place to do so.
  • Destroyed: It is used to perform any last minute cleanup.

Q: How to create Two-Way Bindings in Vue.js?

A: The v-model is used for two-way data binding in Vue.js. Model is bound with DOM, and DOM is bound back with model. Following is an instance of two-way data binding:

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

Q: What are Directives in VUE.js, List some of them you used?

A: Directives in Vue.js extend HTML with attributes and tags. Vue.js has built-in directives, but you can also make your custom directives. Following is a list of some directives used:

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

Q: What are main differences between vue.js and angular.js?

A: Following are the main differences between vue.js and angular.js:

  1. Creation: Angular.js is created using JavaScript, and Vue.js is created using HTML-based template syntax, in which models, components and different concepts are utilized.
  2. Popularity: Angular.js is very popular compared to Vue.js. Vue.js is gaining popularity slowly, but it has potential to be a future competitor of angular.js.
  3. Projects: Angular.js is fitted for large size projects, whereas vue.js can be used for smaller projects.
  4. Languages: Angular.js can use any backend programming languages like PHP, Java etc, but vue.js can use CSS, HTML and JS separately.

Q: What is main difference between vue.js and react.js?

A: Main difference between Vue.js and React.js is that React is a library whereas Vue.js is framework.

Q: Can I create mobile app using Vue.js?

A: Yes – with the help of Nativescript.

Q: How to access data from APIs in Vue.js?

A: Axios is a very popular approach to use, which is a promise-based HTTP client. In this example, CoinDesk API is used. First, Axios will be installed through CD Link or using npm or yarn. For seeing the shape of the data:

https://api.coindesk.com/v1/bpi/currentprice.json

Now, create a property data for housing information, we will have the data and assign it using mounted life cycle hook:

new Vue({

el: ‘#app’,

data () {

return {

info: null

}

},

mounted () {

axios

.get(‘https://api.coindesk.com/v1/bpi/currentprice.json’)

.then(response => (this.info = response))

}

})

<div id=”app”>

{{ info }}

</div>

And we get after this is:

{ “data”: { “time”: { “updated”: “May 15, 2019 13:02:00 UTC”, “updatedISO”: “2019-05-15T13:02:00+00:00”, “updateduk”: “May 15, 2019 at 14:02 BST” }, “disclaimer”: “This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org”, “chartName”: “Bitcoin”, “bpi”: { “USD”: { “code”: “USD”, “symbol”: “&#36;”, “rate”: “8,042.3850”, “description”: “United States Dollar”, “rate_float”: 8042.385 }, “GBP”: { “code”: “GBP”, “symbol”: “&pound;”, “rate”: “6,242.6118”, “description”: “British Pound Sterling”, “rate_float”: 6242.6118 }, “EUR”: { “code”: “EUR”, “symbol”: “&euro;”, “rate”: “7,192.2727”, “description”: “Euro”, “rate_float”: 7192.2727 } } }, “status”: 200, “statusText”: “”, “headers”: { “content-type”: “application/javascript”, “cache-control”: “max-age=15”, “expires”: “Wed, 15 May 2019 13:03:07 UTC” }, “config”: { “transformRequest”: {}, “transformResponse”: {}, “timeout”: 0, “xsrfCookieName”: “XSRFTOKEN”, “xsrfHeaderName”: “X-XSRF-TOKEN”, “maxContentLength”: -1, “headers”: { “Accept”: “application/json, text/plain, */*” }, “method”: “get”, “url”: “https://api.coindesk.com/v1/bpi/currentprice.json” }, “request”: {} }

Excellent, we have some data now.

Q: What is mixin in Vue.js?

A: Mixin distributes reusable functionalities for Vue components. When mixin are used, all components get mixed in the component’s own options.

Q: What is key in Vue.js?

A: By using keys, you can reuse elements to render DOM elements more efficiently. You do not have to create elements every time.

Q: Why use vue.js?

A: You must use vue.js for its different exciting benefits, which include its detailed documentation, small size, easily understood code, and it is very flexible and has two-way communication.

Q: Can Vue.js be easily learned?

A: Yes, vue.js can be easily learned, used and benefitted from. It is recommended as a starting point for new web developers, where they can learn quickly and apply their knowledge, skills and expertise comprehensively,

Q: How do you set up a Webpack in Vue.js?

A: Step#1: Ste up Webpack:

  1. Install Babel-loader and Webpack module:
  2. npm install babel-loader webpack –save-dev
  3. Open Webpack package.json and add a webpack script
  4. In es6-tutorial, create a new file named webpack.config.js defined as follows:

var path = require(‘path’);

var webpack = require(‘webpack’);

 

module.exports = {

entry: ‘./js/main.js’,

output: {

path: path.resolve(__dirname, ‘build’),

filename: ‘main.bundle.js’

},

module: {

loaders: [

{

test: /\.js$/,

loader: ‘babel-loader’,

query: {

presets: [‘es2015’]

}

}

]

},

stats: {

colors: true

},

devtool: ‘source-map’

Step# 2: Building Webpack:

  1. Run following command:
    1. npm run webpack
  2. Open browser, access http://localhost:8080/, and click on the calculate button.

Q: What are Vue Props?

A: Props (or Properties) are defined as the ways in which data is passed from parent component down to its child component.

Author: admin

Leave a Reply

Your email address will not be published. Required fields are marked *