vue-js : Interview Questions

Answer:

Vue js is progressive javascript script used to create dynamic user interfaces.Vue js is very easy to learn.In order to work with Vue js you just need to add few dynamic features to a website.You don’t need to install any thing to use Vue js just need add Vue js library in your project. The Vue.js was developed by “Evan You”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan You was inspired by Angular.

Answer:

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

var vm = new Vue({
  // options
})
 

Answer:

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.

Answer:

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:

 

export default {
  el: '#your-element'
  components: {
      'your-component'
  }
}

Answer:

In Vue js filters are used to transform the output that are going to rendered on browser.

A Vue.js filter is essentially a function that takes a value, processes it, and then returns the processed value. In the markup it is denoted by a single pipe (|) and can be followed by one or more arguments:

 

Answer:

The concept of directive in Vue js is drastically simpler than that in Angular. Vue.js directives provides a way to extend HTML with new attributes and tags. Vue.js has a set of built-in directives which offers extended functionality to your applications.You can also write your custom directives in Vue.js .

Below are list of commonly used directives in Vue.js

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

Answer:

Vue js comes with following features

  • Templates
  • Reactivity
  • Components
  • Transitions
  • Routing

Answer:

v-model directive is used to create Two-Way Bindings in Vue js.In Two-Way Bindings data or model is bind with DOM and Dom is binded back to model.

In below example you can see how Two-Way Bindings is implemented.

 

{{message}}

Answer:

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

//from your component
console.log(this.$route.query.test)
 

Answer:

Vue.js application consists of a root Vue instance created with new Vue, optionally organized into a tree of nested, reusable components. For example, a todo app’s component tree might look like this:
 

Root Instance
?? TodoList
   ?? TodoItem
   ?  ?? DeleteTodoButton
   ?  ?? EditTodoButton
   ?? TodoListFooter
      ?? ClearTodosButton
      ?? TodoListStatistics
All Vue components are also Vue instances.

Answer:

Every component instance has its own isolated scope. This means you cannot (and should not) directly reference parent data in a child component’s template. Data can be passed down to child components using props. Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.
 

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '

{{ postTitle }}

' })
 

Answer:

You can use a method or computed function.

The method way:

 

{{ fullName('Hi') }}

methods: {
  fullName(salut) {
      return `${salut} ${this.firstName} ${this.lastName}`
  }
}
Computed property with a parameter way:
 
computed: { 
	fullName() {
		return salut => `${salut} ${this.firstName} 		
		 ${this.lastName}`
    }
}
 

Answer:

If you've created your project like this:
 

vue init webpack myproject
Now you can run
npm run build
Then copy index.html and /dist/ folder into your website root directory. Done.

Answer:

You can just do following:
 

localStorage.setItem('YourItem', response.data)
localStorage.getItem('YourItem')
localStorage.removeItem('YourItem')
 

Answer:

If you are using vue-router, you should use router.go(path) to navigate to any particular route. The router can be accessed from within a component using this.$routerrouter.go() changed in VueJS 2.0. You can use router.push({ name: "yourroutename"})or just router.push("yourroutename") now to redirect.

Answer:

Vue.js Advantages

  • Easy for applications and interfaces development
  • Support Two-way communication as like AngularJs
  • Ability to control the states
  • Natural thought process

Vue.js Disadvantages

  • Limited scope
  • Single creator
  • Small developer community

Answer:

Vue.js allows you to define filters that can be used to apply common text formatting. Filters are usable in two places: mustache interpolations and v-bind expressions (the latter supported in 2.1.0+). Filters should be appended to the end of the JavaScript expression, denoted by the “pipe” symbol:
 


{{ message | capitalize }}