Vue JS Interview Question & Answer for experience

Official Site of Vue js is :- here

My CRUD operation project is here.:- Vue-JS-CRUD

Entire Vue JS simplfy and  documentation here:- Doc file

How to Install Vue?

npm install -g vue-cli

vue init <template-name> <project-name>

vue init webpack my-project


template: webpack, webpack-simple, simple, browserify, pwa, browserify-simple


The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end).

The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM (Model-View-ViewModel) pattern.



Vue.js are Utilize a virtual DOM?


The Vue.js is supporting to multiple Components and libraries like -

Tables and data grids

Notifications

Loader

Calendar

Display time, date and age

Progress Bar

Tooltip

Overlay

Icons

Menu

Charts

Map

Pdf viewer

And so on
How to create an instance of Vue js.

You can create Vue instance with the Vue function:


var vm = new Vue({

// options

})

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

One way Data binding : (Not update UI automatically once model get changed) : In one-way data flow the view(UI) part of application does not updates automatically when data Model is change.
v-bind is used for one-way data flow or binding.

Two way Data binding : In two-way data binding the view(UI) part of application automatically updates when data Model is changed.
v-model directive is used for two way data binding.

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

Two-Way Bindings data or model is bind with DOM and Dom is binded back to model.

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



What Is Vuejs 2 Lifecycle? 

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed


Type of Directive are available in Vuejs?

· General Directives

· Literal Directives

· Empty Directives

· Custom Directives
Directives in VUE.js
· v-show
· v-if
· v-model
· v-else
· v-on
· v-on:click (Event)
How to create Constants in Vue js.
To create constant const keyword is used. Create seperate file for it.

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

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

What are Components in Vue.js? How to register a component inside other component
Vue Components are one of most powerful features of Vue js.In Vue components are custom elements that help you extend basic HTML elements to encapsulate reusable code.

export default {

el: '#your-element'

components: {

'your-component'

}
}

What are filters in VUE.js?
In Vue js filters are used to transform the output that are going to rendered on browser. denoted by a single pipe (|)
In Vue 2.0, there are no built-in filters are availables, however you are free to create your own filters.
How to create a custom filter in Vue.js?


Vue.filter('reverse', function (value) {

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

})

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

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

What Is VueJs Routing? How to achieve it?

There is no any built-in features for router but we will achieve using below -

<script src="https://unpkg.com/vue@2.5.5/dist/vue.js"></script>

<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>



Install the vue-router using command –

npm install vue-router


What are the Advantages/Disadvantages of Vuejs?

Vuejs Advantages -

Easy for applications and interfaces development

Support Two-way communication as like AngularJs

Ability to control the states

Natural thought process

Vuejs Disadvantages-

Limited scope

Single creator

Small developer community


What is the difference between angularjs & vuejs?

- AngularJS, due to its complexity, may be more complicated to learn than others.

- Angular is a TypeScript-based Javascript framework.

- Angular is more of a dependency injection framework. There has to be a dependency injection in UI programming.

- Vue.js has a much less complicated learning curve in comparison with Angularjs. It’s very easy for one to learn the ropes of Vue.js

- It allows us to write simple JavaScript, as its source code is very readable.

- VueJs is the fastest compare to angular beacause its having light weight library.

- Both framework supports two-way data binding equally


 have u use any grid in jquery,JS or vue?

- I have used b-table grid which provided by bootstrap-vue.

-for Install command of boostrap vue is :-

1). npm i bootstrap-vue


register BootstrapVue plugin in our app entry point:

import Vue from 'vue'

import BootstrapVue from 'bootstrap-vue'


Vue.use(BootstrapVue);


And import Bootstrap and Bootstrap-Vue css files:


import 'bootstrap/dist/css/bootstrap.css'

import 'bootstrap-vue/dist/bootstrap-vue.css'


how to select row color change in vue or JS, Jquery?

- active, Focus in css

- Using active/deactive flag add Active Class.


which component u have used in vue?

- Router

- vue directives

- Conditional & list Rendering

- Class & style binding

- Prop & (Custom event - emit methods)


vue js dependencies?

- we required node.js & node.


what is  Dev Dependencies?

Install local libraries required to build vue.js application.

what is less  & css  ?

- we can written function & variable less.

- LESS is JavaScript based and Sass is Ruby based.

- Sass and LESS are both very powerful CSS extensions.

Both Sass and LESS are backward compatible so you can easily convert your existing CSS files just by renaming the .css file extension to .less or .scss , respectively.

- less stands for leaner Stylesheets

- Sass stands for Syntactically Awesome Stylesheets


In axios how to you pass & handle authentication and how do you call ?

- npm install axios

- we one create on global axios object and set default header property commonly, it will automatically added in every request.

- we can also used Interceptors

intercept requests or responses before call and we do our operation, they are handled by then or catch.


-The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

- we used JSON Web Token (JWT)


Other publish components we have to used using import.

- we need to install that third party package.. using npm install [packageName]

- then we need to register that package using .. import [instanceName] from [path]

- vue.use([instanceName])


Communicate Parent to child in vue?

- used prop we can pass value from parent component to child component.

- U can give $ref also for access parent property into child.


Communicate child to parent ?

- emit event


can you writen JS native click event in vue or not? and how and what is syntax?

- Yes we can use native event of JS using below command.

- v-on:click.native

- listen for a native DOM event on the root element, you can use the .native modifier. For example:


Have you used web pack ? what is it?

- Webpack is a build tool that puts all of your assets, including Javascript, images, fonts, and CSS, in a dependency graph in one file.

- when we need to build one Javascript file to serve to the client & it small file size.

- greatly reduce initial file size.

- Webpack comes with a built in "dev server" & npm install express.

- npm run build:

Production ready build. JS & HTML, CSS all components are minified.


what is package.JSON?

- package.json having list of property.

like applicationName,description,version,author,scripts,list of dependencies,list of dev dependencies.


What is command for start, run and build and publish?

- Run - npm run dev

- Build - npm run build

- Publish - npm run publish


How to prevent Cross-origin ?

- we need to add header for allow-origin


res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, user-code");

res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');


 how do you consume web service in vue.js?

-- axion or ajax, http.

bootstrap class?

- xs,sm,lg,xl and also use media query.



Any SVN, JIRA, Bigbuket, bamboo?

- SVN - Social Venture Network(Apache) software versioning and revision control system

- JIRA - Plan, track, and manage your agile and software development projects in Jira. Customize your workflow, collaborate, and release great software.



26). command for creating Component or how you create component?


26). http resouce and vue resource is same as axios and vue resource provide by vue


27). what is promise?


28). what object return from axios?


29). what is different between jquery promise and axios promise?


30). how do you customize boostrap for larger screen geater than 40K?


31). how do you create your own custome npm package?

32). What are differnet type of selector in jquery ? -

33). what is differnet between in children and find?

34). if you have 10 different div u have to apply css in 3rd div how you apply that ?

35). can you v-for support nested v-for?

36). custom directives in vue js?

37). why you used npm why not CDN ?

38). what is webpack?

web pack is all our data & files club together and megre build 1 single file.

39). app.js file?

40). render function in vue?

41). links and rounts method in rounter?

42). how you define custom element tags?

43). Javascript version ES15- ES16?

44). what is flex-box & css3?

45). Where you host your vue or angular project?

- Angular and VueJs are open source, so you can host your application/project anywhere like AWS, Azure, IIS etc. We are hosting our application/project on IIS.


47). What is Vue-CLI?

- VueJs announced their CLI tool to help you quickly scaffold Vue.js projects with opinionated, battery-included build setups.


48). Features of HTML5

- <section></section>

- <header></header>

- <footer></footer>

- <small></small>

- No more type for script and style tags

- Placeholders to display default content

- Required attribute

- New input types like email, number etc.

- Caching

- We can do catching by using local storage and session storage of browser

- Post Message

- Post message is useful to send the message between cross domain which used i-frame or popup.

- Web Storage

- Using local storage and session storage

- local storage is an html 5 feature that can be use mostly for caching and saving data without any expiration dates.

- session storage is the same as local storage but scope of the session storage is limited to browser window (browser tab). You can create the same session storage each browser tab.

50). Selectors in Javascript and Jquery

- Selectors are useful to get DOM element.

- We can achieve this with using following syntax.

- document.querySelector(param), in parameter you can pass class name, element name, Id, element and class name, element name with nested element, element with attribute etc.

- Also with the document.getElementByName(), document.getElementById(), $(pram) etc.

51). Transform in CSS

-The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

52). 8 method Life cycle hook of Vue

- Created -- Vue App Initialization

- mounted -- After Component Register

- updated -- when any values updated & reactivity

- Destroyed


53). What is node module & node.js

- Its runtime environment for executing Javascript code.

- We often use node to build back-end services.

- fast response, 2x request/sec, fewer files,fewer code, easy to start