{"id":26776,"date":"2022-02-15T07:28:35","date_gmt":"2022-02-15T07:28:35","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=26776"},"modified":"2022-04-13T16:55:34","modified_gmt":"2022-04-13T16:55:34","slug":"top-50-questions-and-answers-for-vue-js","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/top-50-questions-and-answers-for-vue-js\/","title":{"rendered":"Top 50 questions and answers for vue.js<\/strong>"},"content":{"rendered":"\n

The Vue (pronounced \/vju\u02d0\/, like view) is a liberal framework for building user borders. Dissimilar other huge frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is absorbed on the view layer only, and is easy to pick up and mix with other libraries or existing projects. On the other hand, Vue is also perfectly accomplished of powering urbane Single-Page Applications when used in combination with modern tooling and supporting libraries.<\/p>\n\n\n\n

Interview Question & Answers:-<\/strong><\/p>\n\n\n\n

1. What is Vue.js?<\/strong><\/p>\n\n\n\n

Answer:<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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\u2019t need to install any thing to use Vue js just need add Vue js library in your project.<\/p>\n\n\n\n

 2. How to create an instance of Vue.js?<\/strong><\/p>\n\n\n\n

Answer:<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Every Vue application starts by creating a new Vue instance with the Vue function:<\/p>\n\n\n

var<\/span> vm = new<\/span> Vue({\r\n  \/\/ options<\/span>\r\n})\r\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
3. What are Components in Vue.js?<\/strong><\/p>\n\n\n\n
Answer:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
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.<\/p>\n\n\n\n
Following is the way to register a Vue component inside another component:<\/p>\n\n\n
export<\/span> default<\/span> {\r\n  el<\/span>: '#your-element'<\/span>\r\n  components: {\r\n      'your-component'<\/span>\r\n  }\r\n}\r\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
4. What are filters in Vue.js?<\/strong><\/p>\n\n\n\n
Answer:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
In Vue js filters are used to transform the output that are going to rendered on browser.<\/p>\n\n\n\n
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:<\/p>\n\n\n
<element<\/span> directive<\/span>=\"expression | filterId \\[args...\\]\"<\/span>><\/span><\/element<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
5. What are Directives in Vue.js, List some of them you used?<\/strong><\/p>\n\n\n\n
Answer:<\/strong><\/p>\n\n\n\n
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 .<\/p>\n\n\n\n
Below are list of commonly used directives in Vue.js<\/p>\n\n\n\n
v-show<\/p>\n\n\n\n
v-if<\/p>\n\n\n\n
v-model<\/p>\n\n\n\n
v-else<\/p>\n\n\n\n
v-on<\/strong><\/p>\n\n\n\n
6. How can I fetch query parameters in Vue.js?<\/strong><\/p>\n\n\n\n
Answer:<\/strong><\/p>\n\n\n\n
You have access to a $route object from your components, that expose what we need.<\/p>\n\n\n
\/\/from your component<\/span>\r\nconsole<\/span>.log(this<\/span>.$route.query.test)\r\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
7. Explain the basic logical Vue.js app organisation<\/strong><\/p>\n\n\n\n
Answer:<\/strong><\/p>\n\n\n\n
A 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\u2019s component tree might look like this:<\/p>\n\n\n\n
Root Instance<\/p>\n\n\n\n
\u2514\u2500 TodoList<\/p>\n\n\n\n
   \u251c\u2500 TodoItem<\/p>\n\n\n\n
   \u2502  \u251c\u2500 DeleteTodoButton<\/p>\n\n\n\n
   \u2502  \u2514\u2500 EditTodoButton<\/p>\n\n\n\n
   \u2514\u2500 TodoListFooter<\/p>\n\n\n\n
      \u251c\u2500 ClearTodosButton<\/p>\n\n\n\n
      \u2514\u2500 TodoListStatistics<\/p>\n\n\n\n
All Vue components are also Vue instances.<\/strong><\/p>\n\n\n\n
8. Explain the differences between one-way data flow and two-way data binding?<\/strong><\/p>\n\n\n\n
Answer:<\/strong><\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
9. List some features of Vue.js<\/strong><\/p>\n\n\n\n
Answer:<\/strong><\/p>\n\n\n\n
Vue js comes with following features<\/p>\n\n\n\n
Templates<\/p>\n\n\n\n
Reactivity<\/p>\n\n\n\n
Components<\/p>\n\n\n\n
Transitions<\/p>\n\n\n\n
Routing<\/p>\n\n\n\n
10. How to create Two-Way Bindings in Vue.js?<\/strong><\/p>\n\n\n\n
Answer:<\/strong><\/p>\n\n\n\n
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.<\/p>\n\n\n\n
In below example you can see how Two-Way Bindings is implemented.<\/p>\n\n\n
<div<\/span> id<\/span>=\"app\"<\/span>><\/span>\r\n  {{message}}\r\n  <input<\/span> v-model<\/span>=\"message\"<\/span>><\/span>\r\n<\/div<\/span>><\/span>\r\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span>><\/span>\r\n  var<\/span> message = 'Vue.js is rad'<\/span>;\r\n  new<\/span> Vue({ el: '#app'<\/span>, data: { message } });\r\n<\/span><\/script<\/span>><\/span>\r\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
11. What are the Advantages\/Disadvantages of Vuejs?<\/strong><\/p>\n\n\n\n
Answer:<\/strong><\/p>\n\n\n\n
Vue.js Advantages<\/p>\n\n\n\n
Easy for applications and interfaces development<\/p>\n\n\n\n
Support Two-way communication as like AngularJs<\/p>\n\n\n\n
Ability to control the states<\/p>\n\n\n\n
Natural thought process<\/p>\n\n\n\n
Vue.js Disadvantages<\/p>\n\n\n\n
Limited scope<\/p>\n\n\n\n
Single creator<\/p>\n\n\n\n
Small developer community<\/p>\n\n\n\n
12. Can I pass parameters in computer properties in Vue.js?<\/strong><\/p>\n\n\n\n
Answer:<\/strong><\/p>\n\n\n\n
You can use a method or computed function.<\/p>\n\n\n\n
The method way:<\/p>\n\n\n
<span<\/span>><\/span>{{ fullName('Hi') }}<\/span<\/span>><\/span>\r\nmethods: {\r\nfullName(salut) {\r\nreturn <\/span<\/span>><\/span><span<\/span> class<\/span>=\"token interpolation\"<\/span>><\/span><span<\/span> class<\/span>=\"token interpolation-punctuation cBase\"<\/span>><\/span>${<\/span<\/span>><\/span>salut<span<\/span> class<\/span>=\"token interpolation-punctuation cBase\"<\/span>><\/span>}<\/span<\/span>><\/span><\/span<\/span>><\/span><span<\/span> class<\/span>=\"token cString\"<\/span>><\/span> <\/span<\/span>><\/span><span<\/span> class<\/span>=\"token interpolation\"<\/span>><\/span><span<\/span> class<\/span>=\"token interpolation-punctuation cBase\"<\/span>><\/span>${<\/span<\/span>><\/span><span<\/span> class<\/span>=\"token cVar\"<\/span>><\/span>this<\/span<\/span>><\/span><span<\/span> class<\/span>=\"token cBase\"<\/span>><\/span>.<\/span<\/span>><\/span>firstName<span<\/span> class<\/span>=\"token interpolation-punctuation cBase\"<\/span>><\/span>}<\/span<\/span>><\/span><\/span<\/span>><\/span><span<\/span> class<\/span>=\"token cString\"<\/span>><\/span> <\/span<\/span>><\/span><span<\/span> class<\/span>=\"token interpolation\"<\/span>><\/span><span<\/span> class<\/span>=\"token interpolation-punctuation cBase\"<\/span>><\/span>${<\/span<\/span>><\/span><span<\/span> class<\/span>=\"token cVar\"<\/span>><\/span>this<\/span<\/span>><\/span><span<\/span> class<\/span>=\"token cBase\"<\/span>><\/span>.<\/span<\/span>><\/span>lastName<span<\/span> class<\/span>=\"token interpolation-punctuation cBase\"<\/span>><\/span>}<\/span<\/span>><\/span><\/span<\/span>><\/span><span<\/span> class<\/span>=\"token template-punctuation cString\"<\/span>><\/span>\r\n}\r\n}\r\n\r\nComputed property with a parameter way:\r\n\r\ncomputed: {\r\nfullName() {\r\nreturn salut => <\/span<\/span>><\/span><span<\/span> class<\/span>=\"token interpolation\"<\/span>><\/span><span<\/span> class<\/span>=\"token interpolation-punctuation cBase\"<\/span>><\/span>${<\/span<\/span>><\/span>salut<span<\/span> class<\/span>=\"token interpolation-punctuation cBase\"<\/span>><\/span>}<\/span<\/span>><\/span><\/span<\/span>><\/span><span<\/span> class<\/span>=\"token cString\"<\/span>><\/span> <\/span<\/span>><\/span><span<\/span> class<\/span>=\"token interpolation\"<\/span>><\/span><span<\/span> class<\/span>=\"token interpolation-punctuation cBase\"<\/span>><\/span>${<\/span<\/span>><\/span><span<\/span> class<\/span>=\"token cVar\"<\/span>><\/span>this<\/span<\/span>><\/span><span<\/span> class<\/span>=\"token cBase\"<\/span>><\/span>.<\/span<\/span>><\/span>firstName<span<\/span> class<\/span>=\"token interpolation-punctuation cBase\"<\/span>><\/span>}<\/span<\/span>><\/span><\/span<\/span>><\/span><span<\/span> class<\/span>=\"token cString\"<\/span>><\/span> \t\t <\/span<\/span>><\/span><span<\/span> class<\/span>=\"token interpolation\"<\/span>><\/span><span<\/span> class<\/span>=\"token interpolation-punctuation cBase\"<\/span>><\/span>${<\/span<\/span>><\/span><span<\/span> class<\/span>=\"token cVar\"<\/span>><\/span>this<\/span<\/span>><\/span><span<\/span> class<\/span>=\"token cBase\"<\/span>><\/span>.<\/span<\/span>><\/span>lastName<span<\/span> class<\/span>=\"token interpolation-punctuation cBase\"<\/span>><\/span>}<\/span<\/span>><\/span><\/span<\/span>><\/span><span<\/span> class<\/span>=\"token template-punctuation cString\"<\/span>><\/span>\r\n}\r\n}\r\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
13. What are components props?<\/strong><\/p>\n\n\n\n
Answer:<\/strong><\/p>\n\n\n\n
Every component instance has its own isolated scope. This means you cannot (and should not) directly reference parent data in a child component\u2019s 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.<\/p>\n\n\n
Vue.component('blog-post'<\/span>, {\r\n\/\/ camelCase in JavaScript<\/span>\r\nprops<\/span>: ['postTitle'<\/span>],\r\ntemplate<\/span>: '<h3>{{ postTitle }}<\/h3>'<\/span>\r\n})\r\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
14. How to deploy Vue.js app?<\/strong><\/p>\n\n\n\n
Answer:<\/strong><\/p>\n\n\n\n
If you’ve created your project like this:<\/p>\n\n\n\n
vue init webpack myproject<\/p>\n\n\n\n
Now you can run<\/p>\n\n\n\n
npm run build<\/p>\n\n\n\n
Then copy index.html and \/dist\/ folder into your website root directory. Done.<\/p>\n\n\n\n
15. How to use local storage with Vue.js?<\/strong><\/p>\n\n\n\n
Answer:<\/strong><\/p>\n\n\n\n
You can just do following:<\/p>\n\n\n\n
localStorage.setItem(‘YourItem’, response.data)<\/p>\n\n\n\n
localStorage.getItem(‘YourItem’)<\/p>\n\n\n\n
localStorage.removeItem(‘YourItem’)<\/p>\n\n\n\n
16. Describe the Vuex?<\/strong><\/p>\n\n\n\n
Vuex acts as a centralized store for all the components in an application and ensures that the state can be mutated in a predictable way. It’s a State Management Pattern plus Library for the applications developed in Vue.js.<\/p>\n\n\n\n
18. Explain the single file component.<\/strong><\/p>\n\n\n\n
Single File components or SFCs are like any other component except that they are self-contained in their own files. SFCs come with the following advantages.<\/p>\n\n\n\n
Global Definitions – means all SFCs are registered globally so they have unique names.<\/p>\n\n\n\n
Strong Templates – you can write the template code easily in SFCs instead of a single template property like in other components.<\/p>\n\n\n\n
CSS Support – SFCs provide support to add CSS style to the component itself.<\/p>\n\n\n\n
Preprocessors Support – can easily use preprocessors like babel, SAAS etc in SFCs.<\/p>\n\n\n\n
19. What is Reactivity in Vue.js?<\/strong><\/p>\n\n\n\n
Reactivity – Whenever you make any changes in data value then it triggers page update to reflect data changes. Vue data property, computed property are reactive. Services in Vue.js are not reactive. For more you can visit Reactivity in Vue.js<\/p>\n\n\n\n
20. Explain the Vue.js lifecycle hooks.<\/strong><\/p>\n\n\n\n
Every Vue instance passes through certain functions called lifecycle hooks. There are 8 lifecycle hooks for each vue.js instance.<\/p>\n\n\n\n
Before Create – First lifecycle hook that’s called immediately after a vue instance has been initialized.<\/p>\n\n\n\n
Created – It’s called just after the ‘Before create’ hook but the vue instance has set initial properties, data etc.<\/p>\n\n\n\n
Before mount – It’s called just before the instance is mounted on DOM. At this moment the template has been compiled.<\/p>\n\n\n\n
Mounted – It’s called once the template is ready with data and functional.<\/p>\n\n\n\n
Before update – It’s called when any changes are made to data that requires DOM to be updated.<\/p>\n\n\n\n
Updated – It’s called just after DOM has updated.<\/p>\n\n\n\n
Before destroy It’s a place where you can perform resource clean up before destroying the vue instance.<\/p>\n\n\n\n
destroyed – It’s get called when all vue instances have been destroyed. It will be triggered when run the destroy method on an object in code.<\/p>\n\n\n\n
21. What is the Key in Vue.js?<\/strong><\/p>\n\n\n\n
Key is a special attribute in Vue that is used as a hint for the virtual DOM algorithm of Vue to differentiate the VNodes when defining a new node list against an old list.<\/p>\n\n\n\n
If the ‘key’ attribute is not used then Vue uses an algorithm that minimizes element movement and tries to reuse the elements of the same type. But with ‘key’ attribute elements will be reordered and the elements without key are destroyed. It’s similar to $index in AngularJS. It’s mostly used with the ‘v-for’ directive.<\/p>\n\n\n
<ul<\/span>><\/span>\r\n<li<\/span> v-for<\/span>=\"item in items\"<\/span> :key<\/span>=\"item.id\"<\/span>><\/span>...<\/li<\/span>><\/span>\r\n<\/ul<\/span>><\/span>\r\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
22. Explain the difference between v-show and v-if.<\/strong><\/p>\n\n\n\n
v-show and v-if both are used to show or hide the elements. But there are some differences.<\/p>\n\n\n\n
v-if directive is used to render a block conditionally. It has lazy behavior meaning if the initial condition is false then it will not render the block until the condition becomes true. v-if completely destroy and recreate the elements during condition change.<\/p>\n\n\n\n
It has less initial render cost but high toggle cost so when your condition is not changing frequently at runtime then use v-if directive.<\/p>\n\n\n\n
v-show directive is also used to render a block conditionally. v-show always renders the element. It just sets the CSS display property instead of destroying the element or block from DOM.<\/p>\n\n\n\n
It has high cost of initial rendering but less cost of toggle, so when you need frequent toggle then use v-show directive.<\/p>\n\n\n\n
23. What is $root in Vue.js?<\/strong><\/p>\n\n\n\n
$root property is used to access the root instance (new Vue()) in every subcomponent of this instance. All subcomponents can access this root instance and can use it as a global storage.<\/p>\n\n\n\n
\/\/ foo will be available globally<\/p>\n\n\n\n
this.$root.foo = 2<\/p>\n\n\n\n
24. Explain the usage of $parent.<\/strong><\/p>\n\n\n\n
$parent is used to access the parent component instance in the child component. It makes the application harder to test and debug and you can not find out where mutation comes from. Similar to $parent Vue also provides a $child that gives a child component instance.<\/p>\n\n\n\n
25. Describe the ref in Vue.js.<\/strong><\/p>\n\n\n\n
Vue.js provides the concept of props and events to communicate from parent to child and vice versa. Sometimes you need to directly access child components in JavaScript. To achieve this behavior you can use ref attribute to assign a reference ID to the child component as below.<\/p>\n\n\n\n
<base-input ref=”usernameInput”><\/base-input><\/p>\n\n\n\n
Now you can access the ‘base-input’ instance in the component where you have defined ‘ref’.<\/p>\n\n\n\n
this.$refs.usernameInput<\/p>\n\n\n\n
26) What are the array detection mutation methods in Vue.js?<\/strong><\/p>\n\n\n\n
As the name suggests, the array detection mutation methods in Vue.js are used to modify the original array. Following is a list of array mutation methods which trigger view updates:<\/p>\n\n\n\n
push()<\/p>\n\n\n\n
pop()<\/p>\n\n\n\n
shift()<\/p>\n\n\n\n
unshift()<\/p>\n\n\n\n
splice()<\/p>\n\n\n\n
sort()<\/p>\n\n\n\n
reverse()<\/p>\n\n\n\n
When you perform any of the above mutation methods on the list, then it triggers view update.<\/p>\n\n\n\n
27) What are the array detection non-mutation methods in Vue.js?<\/strong><\/p>\n\n\n\n
The array detection non-mutation methods in Vue.js are the methods that do not mutate the original array but always return a new array.<\/p>\n\n\n\n
Following is a list of the non-mutation methods:<\/p>\n\n\n
filter()\r\nconcat()\r\nslice()\r\nFor example, let's take a todo list where it replaces the old array with new one based on status filter:\r\n\r\nvmvm.todos = vm.todos.filter(function (todo) {  \r\n  return todo.status.match(\/Completed\/)  \r\n})  \r\n<\/code><\/span><\/pre>\n\n\n
28) What are the different event modifiers Vue.js provides?<\/strong><\/p>\n\n\n\n
Normally, JavaScript provides event.preventDefault() or event.stopPropagation() inside event handlers. We can use Vue.js methods, but these methods are meant for data logic instead of dealing with DOM events.<\/p>\n\n\n\n
Vue.js provides the following event modifiers for v-on and these modifiers are directive postfixes denoted by a dot symbol.<\/p>\n\n\n
.stop\r\n.prevent\r\n.capture\r\n.self\r\n.once\r\n.passive\r\nSee the following example of stop modifier:\r\n\r\n<!-- the click event's propagation will be stopped --><\/span>  \r\n<a<\/span> v-on:click.stop<\/span>=\"methodCall\"<\/span>><\/span><\/a<\/span>><\/span>  \r\nExample of chain modifiers as follows:\r\n<!-- modifiers can be chained --><\/span>  \r\n<a<\/span> v-on:click.stop.prevent<\/span>=\"doThat\"<\/span>><\/span><\/a<\/span>><\/span>  \r\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
29) Give an example to demonstrate how can you use event handlers?<\/strong><\/p>\n\n\n\n
Event handlers are used in Vue.js are similar to plain JavaScript. The method calls also support the special $event variable.<\/p>\n\n\n\n
Example:<\/p>\n\n\n
<button v-on:click=\"show('Welcome to VueJS world', $event)\"<\/span>>  \r\n  Submit  \r\n<\/button>  \r\nmethods: {  \r\n  show: function<\/span> (message, event)<\/span> <\/span>{  \r\n    \/\/ now we have access to the native event  <\/span>\r\n    if<\/span> (event) event.preventDefault()  \r\n    console.log(message);  \r\n  }  \r\n}   \r\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
30) Give an example to demonstrate how do you define custom key modifier aliases in Vue.js?<\/strong><\/p>\n\n\n\n
We can define custom key modifier aliases via the global config.keyCodes. Following are some guidelines for the properties:<\/p>\n\n\n\n
We can’t use camelCase. Instead, we should use a kebab-case with double quotation marks.<\/p>\n\n\n\n
We can define multiple values in an array format.<\/p>\n\n\n\n
See the example:<\/p>\n\n\n
Vue.config.keyCodes = {  \r\n  f1: 112<\/span>,  \r\n  \"media-play-pause\"<\/span>: 179<\/span>,  \r\n  down: [40<\/span>, 87<\/span>]  \r\n}  \r\nNote: The use<\/span> of<\/span> keyCode<\/span> events<\/span> is<\/span> deprecated<\/span>, and<\/span> the<\/span> new<\/span> browsers<\/span> don<\/span>'t<\/span> support<\/span> it<\/span>.\r\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
31) What are the different supported System Modifier Keys in Vue.js?<\/strong><\/p>\n\n\n\n
Vue.js supports the following modifiers to trigger mouse or keyboard event listeners when we press the corresponding keys. The list of supported System Modifier Keys is:<\/p>\n\n\n
.ctrl\r\n.alt\r\n.shift\r\n.meta\r\nSee the following example of a control modifier with the click event.\r\nExample:\r\n<!-- Ctrl + Click --><\/span>  \r\n<div<\/span> @click.ctrl<\/span>=\"doAction\"<\/span>><\/span>Do some action here<\/div<\/span>><\/span>  \r\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
32) What is the requirement of local registration in Vue.js?<\/strong><\/p>\n\n\n\n
In Vue.js, local registration is required when the global registration seems not ideal. For example, suppose you are using a build system like Webpack and globally registering all components. In that case, even if we stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download. In these cases, it is better to define your components as plain JavaScript objects as follows:<\/p>\n\n\n
var<\/span> ComponentA = {\/*.......*\/<\/span>}   \r\nvar<\/span> ComponentB = {\/*.......*\/<\/span>}   \r\nvar<\/span> ComponentC = {\/*.......*\/<\/span>}  \r\nAfter that define the components you would like to use in<\/span> a components option as<\/span> follows:\r\n\r\nnew<\/span> Vue({  \r\nel<\/span>: '#app'<\/span>,  \r\ncomponents<\/span>: {  \r\n'component-a'<\/span>: ComponentA,  \r\n'component-b'<\/span>: ComponentA  \r\n}  \r\n})  \r\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
33) What are the different supported Mouse Button Modifiers in Vue.js?<\/strong><\/p>\n\n\n\n
Vue.js supports the following mouse button modifiers:<\/p>\n\n\n
.left\r\n.right\r\n.middle\r\nExample<\/span>:\r\n\r\nThe usage of<\/span> .right modifier as<\/span> follows:\r\n\r\n<button<\/span>   \r\n  v-if<\/span>=\"button === 'right'\"<\/span>  \r\n  v-on:mousedown.right<\/span>=\"increment\"<\/span>  \r\n  v-on:mousedown.left<\/span>=\"decrement\"<\/span>  \r\n\/><\/span><\/span>  \r\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
34) What are the supported modifiers on the v-model directive in Vue.js?<\/strong><\/p>\n\n\n\n
Following are the three modifiers supported for the v-model directive in Vue.js:<\/strong><\/p>\n\n\n\n
lazy: By default, the v-model directive syncs the input with the data after each input event. We can add the lazy modifier to instead sync after change events.<\/p>\n\n\n
<!-- synced after \"change\" instead of \"input\" --><\/span>  \r\n<input<\/span> v-model.lazy<\/span>=\"msg\"<\/span> ><\/span>   \r\nnumber: The number modifier is used to our v-model when we want user input to be automatically typecast as a number. With the type=\"number\", the value of HTML input elements always returns a string. That's why this typecast modifier is required.\r\n<input<\/span> v-model.number<\/span>=\"age\"<\/span> type<\/span>=\"number\"<\/span>><\/span>  \r\ntrim: We should add the trim modifier to our v-model when we want whitespace from user input to be trimmed automatically.\r\n<input<\/span> v-model.trim<\/span>=\"msg\"<\/span>><\/span>  \r\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
35) When the components need a single root element?<\/strong><\/p>\n\n\n\n
In Vue.js 2.x version, every component must have a single root element when template has more than one element. In this case, you need to wrap the elements with a parent element.<\/p>\n\n\n
<template<\/span>><\/span>  \r\n   <div<\/span> class<\/span>=\"todo-item\"<\/span>><\/span>  \r\n       <h2<\/span>><\/span>{{ title }}<\/h2<\/span>><\/span>  \r\n       <div<\/span> v-html<\/span>=\"content\"<\/span>><\/span><\/div<\/span>><\/span>  \r\n   <\/div<\/span>><\/span>  \r\n<\/template<\/span>><\/span>  \r\nOtherwise, it will show an error, saying that \"Component template should contain exactly one root element,\"\r\nThe Vue.js 3.x version facilitates that the components now can have multiple root nodes. This way of adding multiple root nodes is called as fragments.\r\n\r\n<template<\/span>><\/span>  \r\n     <h2<\/span>><\/span>{{ title }}<\/h2<\/span>><\/span>  \r\n     <div<\/span> v-html<\/span>=\"content\"<\/span>><\/span><\/div<\/span>><\/span>  \r\n<\/template<\/span>><\/span>  \r\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
36) What do you understand by global registration in components in Vue.js?<\/strong><\/p>\n\n\n\n
The global registration in components in Vue.js facilitates us to use it in the template of any root Vue instance (new Vue) created after registration.<\/p>\n\n\n\n
In the global registration, the components created using Vue.component as follows:<\/p>\n\n\n
Vue.component('my-component-name'<\/span>, {  \r\n  \/\/ ... options ...  <\/span>\r\n})  \r\nWe can take multiple components which are globally registered in<\/span> the vue instance,\r\nVue.component('component-a'<\/span>, { \/* ... *\/<\/span> })  \r\nVue.component('component-b'<\/span>, { \/* ... *\/<\/span> })  \r\nVue.component('component-c'<\/span>, { \/* ... *\/<\/span> })  \r\nnew<\/span> Vue({ el<\/span>: '#app'<\/span> })  \r\nThe above components can be used in<\/span> the vue instance as<\/span> follows:\r\n\r\n<div<\/span> id<\/span>=\"app\"<\/span>><\/span>  \r\n  <component-a<\/span>><\/span><\/component-a<\/span>><\/span>  \r\n  <component-b<\/span>><\/span><\/component-b<\/span>><\/span>  \r\n  <component-c<\/span>><\/span><\/component-c<\/span>><\/span>  \r\n<\/div<\/span>><\/span><\/span>  \r\nNote: The components can be used in<\/span> subcomponents as<\/span> well.\r\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
37) What is the purpose of using v-for directive in Vue.js?<\/strong><\/p>\n\n\n\n
In Vue.js, the v-for directive is used because it allows us to loop through items in an array or object. By using this directive, we can iterate on each element in the array or object.<\/p>\n\n\n\n
Example of v-for directive usage in Array:<\/p>\n\n\n
<ul<\/span> id<\/span>=\"list\"<\/span>><\/span>  \r\n  <li<\/span> v-for<\/span>=\"(item, index) in items\"<\/span>><\/span>  \r\n    {{ index }} - {{ item.message }}  \r\n  <\/li<\/span>><\/span>  \r\n<\/ul<\/span>><\/span>  \r\nvar vm = new Vue({  \r\n  el: '#list',  \r\n  data: {  \r\n    items: [  \r\n      { message: 'Alex' },  \r\n      { message: 'Muler' }  \r\n    ]  \r\n  }  \r\n})  \r\nWe can also use the delimiter instead of in, similar to JavaScript iterators.\r\nExample of v-for directive usage in Object:\r\n\r\n<div<\/span> id<\/span>=\"object\"<\/span>><\/span>  \r\n  <div<\/span> v-for<\/span>=\"(value, key, index) of user\"<\/span>><\/span>  \r\n    {{ index }}. {{ key }}: {{ value }}  \r\n  <\/div<\/span>><\/span>  \r\n<\/div<\/span>><\/span>  \r\nvar vm = new Vue({  \r\n  el: '#object',  \r\n  data: {  \r\n    user: {  \r\n      firstName: 'Alex',  \r\n      lastName: 'Muller',  \r\n      age: 30  \r\n    }  \r\n  }  \r\n})  \r\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
38) Give an example to demonstrate how do you reuse elements with key attribute?<\/strong><\/p>\n\n\n\n
Vue.js always facilitates us to render elements as efficiently as possible. So, it is possible to reuse the elements instead of building them from scratch. But this can create problems in few scenarios. For example, if you try to render the same input element in both v-if and v-else blocks then it holds the previous value as follows:<\/p>\n\n\n
<template<\/span> v-if<\/span>=\"loginType === 'Admin'\"<\/span>><\/span>  \r\n  <label<\/span>><\/span>Admin<\/label<\/span>><\/span>  \r\n  <input<\/span> placeholder<\/span>=\"Enter your ID\"<\/span>><\/span>  \r\n<\/template<\/span>><\/span>  \r\n<template<\/span> v-else<\/span>><\/span>  \r\n  <label<\/span>><\/span>Guest<\/label<\/span>><\/span>  \r\n  <input<\/span> placeholder<\/span>=\"Enter your name\"<\/span>><\/span>  \r\n<\/template<\/span>><\/span>  \r\nIn the above case, we should not reuse it. It is better to make both input elements as separate by applying key attribute as follows:\r\n\r\n<template<\/span> v-if<\/span>=\"loginType === 'Admin'\"<\/span>><\/span>  \r\n  <label<\/span>><\/span>Admin<\/label<\/span>><\/span>  \r\n  <input<\/span> placeholder<\/span>=\"Enter your ID\"<\/span> key<\/span>=\"admin-id\"<\/span>><\/span>  \r\n<\/template<\/span>><\/span>  \r\n<template<\/span> v-else<\/span>><\/span>  \r\n  <label<\/span>><\/span>Guest<\/label<\/span>><\/span>  \r\n  <input<\/span> placeholder<\/span>=\"Enter your name\"<\/span> key<\/span>=\"user-name\"<\/span>><\/span>  \r\n<\/template<\/span>><\/span>  \r\nIn the above example, both inputs are independent and do not impact each other.\r\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
39) Why is it recommended to use a key attribute for directive?<\/strong><\/p>\n\n\n\n
It is recommended to use a key attribute for a directive to track each node’s identity and thus reuse and reorder existing elements. We have to provide a unique key attribute for each item with in v-for iteration. An ideal value for the key would be the unique id of each item. Example:<\/p>\n\n\n
<div<\/span> v-for<\/span>=\"item in items\"<\/span> :key<\/span>=\"item.id\"<\/span>><\/span>  \r\n  {{item.name}}  \r\n<\/div<\/span>><\/span>  \r\nThat's why it is always recommended to provide a key with v-for whenever possible unless the iterated DOM content is simple.\r\n\r\nNote: We should use string or numeric values instead of non-primitive values like objects and arrays.\r\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
40) What do you understand by the array detection non-mutation methods?<\/strong><\/p>\n\n\n\n
The methods that do not mutate the original array but always return a new array are known as non-mutation methods.<\/p>\n\n\n\n
Following is a list of the non-mutation methods:<\/p>\n\n\n
filter() method\r\nconcat() method\r\nslice() method\r\nLet's take an example to understand it better. We have a todo list replacing the old array with a new one based on the status filter.\r\nExample:\r\nvmvm.todos = vm.todos.filter(function (todo) {  \r\n  return todo.status.match(\/Completed\/)  \r\n})  \r\nThis approach would not re-render the entire list due to Vue.js implementation.\r\n<\/code><\/span><\/pre>\n\n\n
41) How can you redirect to another page in Vue.js?<\/strong><\/p>\n\n\n\n
In Vue.js, if you are using vue-router, you should use router.go(path) to navigate to any particular route. You can access the router from within a component using this.$router. router.go() changed in Vue.js 2.0. You can use router.push({ name: “yourroutename”}) or just router.push(“yourroutename”) now to redirect.<\/p>\n\n\n\n
42) What do you understand by slots in Vue.js?<\/strong><\/p>\n\n\n\n
In Vue.js, the <slot> element is used to serve as distribution outlets for content.<\/p>\n\n\n\n
Let’s take an example to create an alert component with slots for content insertion.<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
In Vue.js, the <slot> element is used to serve as distribution outlets for content.<\/p>\n\n\n\n
Let’s take an example to create an alert component with slots for content insertion.<\/p>\n\n\n\n
Example:<\/p>\n\n\n
Vue.component('alert', {  \r\n  template: `  \r\n    <div<\/span> class<\/span>=\"alert-box\"<\/span>><\/span>  \r\n      <strong<\/span>><\/span>Error!<\/strong<\/span>><\/span>  \r\n      <slot<\/span>><\/span><\/slot<\/span>><\/span>  \r\n    <\/div<\/span>><\/span>`  \r\n})  \r\nWe can insert dynamic content as follows:\r\n<alert<\/span>><\/span>  \r\n  There is an issue with in application.  \r\n<\/alert<\/span>><\/span>  \r\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
43) What are the problems solved by Single File Components in Vue.js?<\/strong><\/p>\n\n\n\n
In Vue.js, the Single File Components are used to solve the common problems in a JavaScript-driven application with a .vue extension.<\/p>\n\n\n\n
Following is a list of issues solved by Single File Components in Vue.js:<\/p>\n\n\n\n
Global definitions specify unique names for every component.<\/p>\n\n\n\n
String templates lack syntax highlighting and require ugly slashes for multiline HTML.<\/p>\n\n\n\n
No CSS support. It means while HTML and JavaScript are modularized into components, CSS is conspicuously left out.<\/p>\n\n\n\n
No, build step restrictions to HTML and ES5 JavaScript, rather than preprocessors like Pug and Babel.<\/p>\n\n\n\n
44) What are the different ways to create filters?<\/strong><\/p>\n\n\n\n
< <\/strong><\/p>\n\n\n\n
There are two ways to define filters:<\/p>\n\n\n\n
Local filters: You can define local filters in a component’s options. In this case, filter is applicable to that specific component.<\/p>\n\n\n
filters: {  \r\n  capitalize<\/span>: function<\/span> (value<\/span>) <\/span>{  \r\n    if<\/span> (!value) return<\/span> ''<\/span>  \r\n    valuevalue = value.toString()  \r\n    return<\/span> value.charAt(0<\/span>).toUpperCase() + value.slice(1<\/span>)  \r\n  }  \r\n}  \r\nGlobal filters: You can also define a filter globally before creating the Vue instance. In this<\/span> case<\/span>, filter is applicable to all the components within the vue instance,\r\n\r\nVue.filter('capitalize'<\/span>, function<\/span> (value<\/span>) <\/span>{  \r\n  if<\/span> (!value) return<\/span> ''<\/span>  \r\n  valuevalue = value.toString()  \r\n  return<\/span> value.charAt(0<\/span>).toUpperCase() + value.slice(1<\/span>)  \r\n})  \r\nnew<\/span> Vue({  \r\n  \/\/ ...  <\/span>\r\n})  \r\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
45) What do you understand by mapState helper?<\/strong><\/p>\n\n\n\n
In the Vuex application, creating a computed property every time whenever we want to access the store’s state property or getter is going to be repetitive, difficult, and boring, especially if a component needs more than one state property. In this situation, we can use the mapState helper of vuex, which generates computed getter functions for us.<\/p>\n\n\n\n
In the following increment example, we have demonstrated the mapState helper:<\/p>\n\n\n
import<\/span> { mapState } from<\/span> 'vuex'<\/span>  \r\nexport<\/span> default<\/span> {  \r\n  \/\/ ...  <\/span>\r\n  computed<\/span>: mapState({  \r\n    \/\/ arrow functions can make the code very succinct!  <\/span>\r\n    username<\/span>: state<\/span> =><\/span> state.username,  \r\n    \/\/ passing the string value 'username' is same as `state => state.username`  <\/span>\r\n    usernameAlias<\/span>: 'username'<\/span>,  \r\n    \/\/ to access local state with `this`, a normal function must be used  <\/span>\r\n     greeting (state) {  \r\n      return<\/span> this<\/span>.localTitle + state.username  \r\n    }  \r\n  })  \r\n}  \r\nYou can also pass a string array to mapState when the name of<\/span> a mapped computed property is the same as<\/span> a state sub-tree name\r\n\r\ncomputed<\/span>: mapState([  \r\n  \/\/ map this.username to store.state.username  <\/span>\r\n  'username'<\/span>  \r\n])  \r\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
46) What are the most prominent features of stylelint?<\/strong><\/p>\n\n\n\n
Following is a list of the most prominent features of stylelint:<\/p>\n\n\n\n
  • The stylelint has more than 160 built-in rules to catch errors, apply limits and enforce stylistic conventions.<\/li>
  • It understands the latest CSS syntax, including custom properties and level 4 selectors.<\/li>
  • It extracts the embedded styles from HTML, markdown, and CSS-in-JS object & template literals.<\/li>
  • It is also used to parse CSS-like syntaxes like SCSS, Sass, Less, and SugarSS.<\/li>
  • It supports for reusing community plugins and creating their plugins.<\/li><\/ul>\n\n\n\n
    47) What is a single-file component in Vue.js?<\/strong><\/p>\n\n\n\n
    In Vue.js, a single-file component is a file with a .vue extension that contains a Vue component. The single-file component consists of the component’s template, logic, and styles, all bundled together in one file. It also contains one <script> block, optional <template> and <style> blocks, and possible additional custom blocks.<\/p>\n\n\n\n
    48) How to use a single-file component in Vue.js?<\/strong><\/p>\n\n\n\n
    To use a single-file component in Vue.js, we have to set up Vue Loader for parsing the file (It is done automatically as a part of a webpack building pipeline). It also supports non-default languages such as Sass or HTML templating languages with pluggable pre-processors.<\/p>\n\n\n\n
    49) What is $parent property in Vue.js?<\/strong><\/p>\n\n\n\n
    In Vue.js, the $parent property is used to access the parent instance from a child. It is similar to the $root property. The $parent property provides direct access, but it makes the application hard to test and debug. In this property, it is very difficult to find out where the mutation comes from.<\/p>\n\n\n\n
    50) What is $child property in Vue.js?<\/strong><\/p>\n\n\n\n
    In Vue.js, the $child property is just like $parent property, but it is used to access the child instance.<\/p>\n","protected":false},"excerpt":{"rendered":"
    The Vue (pronounced \/vju\u02d0\/, like view) is a liberal framework for building user borders. Dissimilar other huge frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is absorbed on the view layer only, and is easy to pick up and mix with other libraries or existing projects. On the…<\/p>\n","protected":false},"author":1,"featured_media":26781,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[57],"tags":[5449,7283,7282,6592,6591,7284,7281,7280],"class_list":["post-26776","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripting","tag-devopsschool","tag-js-interview-questions","tag-vue","tag-vue-template-compiler","tag-vue-js","tag-vue-js-interview-answers","tag-vue-js-training","tag-vue-js-tutorials"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/26776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=26776"}],"version-history":[{"count":1,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/26776\/revisions"}],"predecessor-version":[{"id":26789,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/26776\/revisions\/26789"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/26781"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=26776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=26776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=26776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}