Q1. What is Vue.js? Ans. Vue is a progressive framework used to building user interfaces. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. Q2. What are the advantages of Vue.js? Ans. Small in size Easy to Understand Simple Integration Flexibility Two-Way Communication Q3. What are all the life cycle hooks in Vue instance? • Before Create — The first hook in the creation hooks. • created — This hook can be used to run code after an instance is created. • Before Mount — The before Mount hook runs right before the initial render happens and after the template or render functions have been compiled. • mounted — This is the most frequently used hook. • Before Update — This hook runs after data changes on our component and the update cycle begins. But runs right before the DOM is patched and re-rendered. • updated — This hook runs after data changes on our component and the DOM re-renders • before Destroy — This hook will run right before tearing down the instance. • destroyed — This hook will be used to do any last minute clean up. Q4. What is $parent in Vue? Ans. 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 cannot easily find out the where the mutation come from. Q5.Why would you choose Vue.js over other front-end framework? Ans. Performance, Ease of use,Suitability for Large-scale app, Ecosystem. Q6.What are mixins? Ans. Mixin support is a feature that allows code reuse between components in Vue.js application and a software composition tool. A mixin is a JavaScript object that can contain any option that a component can contain. Q7.What are the benefits & drawback of mixins? Ans. Mixin help with following the DRY (don’t repeat yourself) principle. A mixin can even be applied globally to every component instance.Global mixins should be avoided, as affecting every single component can lead to maintenance issues as an application grows. Q8. . How to create an instance of Vue.js? Ans. You can create Vue instance with the Vue function : var vm = new Vue({ // options }) Q9. Explain the difference between slots & scoped slot’s? Ans. A slot is a placeholder in a child component that is filled with content passed from the parent.Content of a regural slot is complied in the parent’s scope & then pass to the child component.Thus you can’t use child component properties in a slot’s content. Q10. . 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 two-way data binding the view(UI) part of application automatically updates when data Model is change. Q11. . What are filters in VUE.js? Ans. 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 mark up it is denoted by a single pipe (|) and can be followed by one or more arguments: In Vue 2.0, there are no built-in filters are availables, however you are free to create your own filters. Q12. How to create a custom filter in Vue.js? Ans. Vue.filter() method is used to create and register a custom filter in Vue js. Vue.filter() method takes two parameters a filterId that is usnique name to filter that you going to create and a filter function that takes a value as the argument and returns the transformed value. Vue.filter(‘reverse’, function (value) { return value.split(”).reverse().join(”) }) Q13. What are Components in Vue.js? How to register a component inside other component? Ans. 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. Q14. What are Directives in VUE.js, List some of them you used? Ans. 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. Below are list of commonly used directives in Vue.js • v-show • v-if • v-model • v-else • v-on Q15.What is vue router and their features? Ans.Vue Router is a official routing library for single-page applications designed for use with the Vue.js framework. Below are their features, i. Nested route/view mapping ii. Modular, component-based router configuration iii. Route params, query, wildcards iv. View transition effects powered by Vue.js’ transition system v. Fine-grained navigation control vi. Links with automatic active CSS classes vii. HTML5 history mode or hash mode, with auto-fallback in IE9 viii. Restore scroll position when going back in history mode Q16.What is route matching priority? Ans. Sometimes the URL might be matched by multiple routes and the confusion of which route need to be mapped is resolved by route matching priority. The priority is based on order of routes configuration. i.e, The route which declared first has higher priority. Q17. List type of Directive are available in Vuejs. Ans.In Vue js following types of directives are available • General Directives • Literal Directives • Empty Directives • Custom Directives Q18. What is global registration in components? Ans.The components which are globally registered can be used in the template of any root Vue instance (new Vue) created after registration. In the global registration, the components created using Vue.component. Q19. What is vue router and their features? Ans.Vue Router is a official routing library for single-page applications designed for use with the Vue.js framework. Below are their features, i. Nested route/view mapping ii. Modular, component-based router configuration iii. Route params, query, wildcards iv. View transition effects powered by Vue.js’ transition system v. Fine-grained navigation control vi. Links with automatic active CSS classes vii. HTML5 history mode or hash mode, with auto-fallback in IE9 viii. Restore scroll position when going back in history mode Q20. What is route matching priority? Ans. Sometimes the URL might be matched by multiple routes and the confusion of which route need to be mapped is resolved by route matching priority. The priority is based on order of routes configuration. i.e, The route which declared first has higher priority. Q21. What Is Vue-resource, How Can You Install Vue Resource? Ans.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 Q22. How To Use Other Plugin Into Vue Js? Ans.var infinite Scroll = require(‘vue-infinite-scroll’); Vue. Use(infinite Scroll) Here we used vue-infinite-scroll as plugin and it installed from NPM. Q23. Who is the founder of Vue.js? Ans. 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. Q24. What are disadvantages of Vue.js? Ans. 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. Q25. Who are using Vue.js? Ans. Following websites have used Vue.js on parts of their projects and applications: 1. Euronews 2. Codeship 3. Livestorm 4. Adobe 5. Xiaomi 6. Alibaba 7. Wizzair 8. Grammarly 9. Laracast 10. Facebook 11. Behance 12. Netflix 13. Gitlab 14. Codeship 15. Livestorm 16. Adobe 17. Xiaomi Q26. List some features of Vue.js? • Transitions • Routing • Templates • Components • Reactivity Q27. What are 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. Q28.What is a main difference between vue.js and react.js? Ans. Main difference between Vue.js and React.js is that React is a library whereas Vue.js is framework. Q29.Can I create mobile app using Vue.js? Ans. Yes – with the help of Nativescript. Q30.What is a key in Vue.js? Ans. By using keys, you can reuse elements to render DOM elements more efficiently. You do not have to create elements every time. Q31.Why use Vue.js? Ans. You must use vue.js for its different exciting benefits, which include its detailed documentation, small size, easily understood code & it is very flexible. Q32.Can Vue.js be easily learn? Ans. 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. Q33.What are Vue props? Ans. Props (or Properties) are defined as the ways in which data is passed from parent component down to its child component. Q34.When component needs a single root element? Ans. Every component must have a single root element when template has more than one element. In this case you need to wrap the element with parent element. Q35.What are the features of Vue router? i. Ans. Nested route/view mapping ii. Modular, component-based router configuration iii. Route params, query, wildcards iv. View transition effects powered by Vue.js’ transition system v. Fine-grained navigation control vi. Links with automatic active CSS classes vii. HTML5 history mode or hash mode, with auto-fallback in IE9 viii. Restore scroll position when going back in history mode Q35.What is a render function? Ans. Render function is a normal function which receives a createElement method as its first argument used to create virtual nodes. Internally Vue.js’ templates actually compile down to render functions at build time. Hence templates are just syntactic sugar of render functions. Q36.What are the advantages of React.js over Vue.js? i. . React.js gives more flexibility in large apps developing ii. Easy to test iii. Well-suited for mobile apps creation Q37.What is a purpose of keep alive tag? Ans. Keep-alive tag is an abstract component used to preserve component state or avoid re-rendering. When you wrapped tag around a dynamic component, it caches the inactive component instances without destroying them. Q38.What is Dev tool & its purpose? Ans. Dev Tools is a browser extension allowing you to inspect and debug your Vue applications in a more user-friendly interface. i. Chrome Extension ii. Firefox Addon iii. Standalone Electron app (works with any environment) Q39.List out top 10 organisation using Vue.js. i. Facebook – Used on marketing side of its Newsfeed. ii. Netflix – Used in two internal apps for building movie streaming interfaces iii. Adobe – Used for Portfolio, a custom website builder designed to help users showcase their creative work iv. Xiaomi – Used for products where it sells from consumer electronics to software v. Alibaba – Provide their apps an excellent experience to its customers vi. WizzAir – A budget airline WizzAir used for their customers user interface vii. EuroNews viii. Laracasts ix. GitLab x. Laracasts Q40.What is the purpose of render error? Ans. When the default render function encounters an error then you can use render Error as an alternative render output. Q41.What is Vuex? Ans. Vuex is a state management pattern + library (Flux-inspired Application Architecture) for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. Q42.What is Vue.js loader? Ans. Vue loader is a loader for webpack that allows you to author Vue components in a format called Single-File Component (SFCs). Q43.How do you perform testing in Vue.js? Ans. You can perform testing in following two ways: i. ** Using vue-cli:** It offers pre-configured unit testing and e2e testing setups ii. ** Manual setup:** You can manually setting up unit tests for *.vue files using either mocha-webpack or jest Q44.How do you display store state in vue component? Ans. Since Vuex stores are reactive, you can retrieve” state from store by simply returning store’s state from within a computed property. i.e, Whenever store state changes, it will cause the computed property to re-evaluate and trigger associated DOM updates. Q45.What are the conditional directive? Ans. VueJS provides set of directives to show or hide elements based on conditions. The available directives are: v-if, v-else, v-else-if and v-show. Q46.What are custom blocks? Ans. You can define custom language blocks inside *.vue files based on the lang attribute of the block, the block’s tag name, and the rules in your webpack config. You can also use resourceQuery to match a rule against a custom block . Q47.What is scoped CSS? Ans. Scoped CSS is a mechanism in VueJS Single File Components(SFC) that prevents styles from leaking out of the current component and affecting other unintended components on your page. i.e, When a tag has the scoped attribute its CSS will apply to elements of current component only. Q48.What is a purpose of vue.js once directive? Ans. If you want to render a lot of static content then you need to make sure it only evaluated once and then cached thereafter. In this case, you can use v-once directive by wrapping at the root level. Q49.What is the difference between full & runtime only builds? Ans. Full: These are the builds that contain both the compiler and the runtime. Runtime Only: These builds doesn’t include compiler but the code is responsible for creating Vue instances, rendering and patching virtual DOM. These are about 6KB lighter min+gzip. Q50.What are X templates? Ans. Apart from regular templates and inline templates, you can also define templates using a script element with the type text/x-template and then referencing the template by an id. -akshada navelkar SRIEIT]]>