Despite the fact of newer, Vue.js framework is constantly growing and becoming popular day by day. Vue pronounced as ‘View' is an advanced framework for creating user interfaces. Of course! The question arises in your mind why Vue? Well, to have an answer, you must read the features, pros, and cons of Vue and then compare it with other frameworks. To give you an overview, the main difference between Vue and other frameworks is, Vue is easy to integrate with other libraries or existing projects. Even, it is highly capable of building powerful SPA (Single page applications). If you like to read more about Vue, check our online interview questions and enhance your knowledge on each and every topic.
Below are few major features of Vue.js
Q1. What is Vue.js?
Vue is a progressive framework for building user interfaces and one-page applications. Apart from this, Vue. js is also used both for desktop and mobile app development with the Electron framework.
Q2. Enlist some major features of Vue.js?
The major features of Vue.js are:
Q3. What is vue instance?
A Vue instance is also known as root Vue Instance is a ViewModel as defined in the MVVM pattern. It is created to add all the properties found in its data object to Vue's reactivity system.
Q4. What is Vue Router?
Vue Router is the official router for Vue.js that deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze.
Q5. How to create an instance of Vue js?
We can create a new Vue instance by using the Vue function and the Vue instance gets activated by default in the main.js file. Vue instance is also called a root Vue Instance and the syntax is : var vm = new Vue({ // options })
Q6. What is difference between one-way and two-way data binding in Vue?
The v-bind directive is used for one-way data flow or binding in Vue. js that means the data flows in a single direction so that whenever the data changes in a component, it also updates the view . Whereas in two-way data binding, the view (UI) part of the application is automatically updated when the data Model is changed.
Q7. How to create Two-Way Bindings in Vue.js?
Two-Way Bindings is created by using the v-model directive in Vue.js.
Q8. What is the difference between v-show and v-if directives?
v-if - Only renders the element to the DOM if the expression passes and in v-if the condition doesn't change often.
v-show - Renders all elements to the DOM and then uses the CSS display property to hide elements if the expression fails.
Q9. What is $parent in Vue?
The $parent property is like $root that can be used only for accessing the parent instance from a child.
Q10. What are directive in Vue? Enlist few built-in directive.
Directives are tiny commands that you can attach to DOM elements. These are instructions for VueJS in order to do things in a certain way. Some of the built-in directive in VueJS are v-if, v-show, v-else, v-for, v-bind , v-model, v-on, etc.
Q11. What is the use of ref in Vue.js?
Refs are Vue. js instance properties that are used to register or indicate a reference to HTML elements or child elements in the template of your application such that it enables you to reference that element or even a child element in your Vue instance.
Q12. What are filters in Vue.js?
In Vue.js filters are used to apply common text formatting.
Q13. What are key modifiers in Vue?
Key modifiers are one of the categories of event modifiers that can be used with keyboard events.
Q14. What are props in Vue.js?
In Vue.Js props are custom attributes you can register on a component such that when a value is passed to a prop attribute, it becomes a property on that component instance.
Q15. What is a Vue Plugin?
Plugins usually add global-level functionality to Vue which means it is used to add global features to your app.
Q16. What are components props in Vue.js?
Props are used to pass down state-to-child components basically props are the way components can accept data from components that include them.
Q17. What are slots in Vue.js?
Slots are reserved space offered by vuejs to display content passed down from one component to another.
Q18. What are nested routes?
A nested root is consist of nested paths that start with / will be treated as a root path. This allows you to leverage the component nesting without having to use a nested URL.
Q19. What are global mixins?
Once you apply a mixin globally, it will affect every Vue instance created afterward. When used properly, this can be used to inject processing logic for custom options: // inject a handler for `myOption` custom option Vue. mixin({ created: function () { var myOption = this.
Q20. What are Async components in Vue?
An async component can render its state in a meaningful way like any other component, or be logic-only. Rather than loading data high up in your application and passing it down to a component for display, you perform the data loading at the component level.
Q21. What is Vuex?
Vuex is a state management pattern + library 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.
Q22. How can you redirect from one page to another page in Vue.js?
You can redirect from one page to another page in Vue.js by adding a new object with two properties paths and redirect to our routes array.
Q23. How to create a custom filter in Vue.js?
We can create a custom filter in Vue.js by creating a function within Vue.filter(); This method registers it globally as most filters you may want to access throughout your project.
Q24. What is a vuejs loader?
Vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File.
Q25. List different type of Directive are available in Vue.
Different types of Directives available in Vuejs are:
Q26. What is VUE-resource, how can you install it?
vue-resource is the plugin for Vue.js that provides services for making web requests and handle responses using an XMLHttpRequest or JSONP. You can install vue-resource via yarn or NPM.
Q27. What are Constants? How to create Constants in Vue js?
Q28. What are the directive Hook Arguments?
Q29. What are functional components in Vue?
A functional component is a component that holds no state and no instance that means the component does not support reactivity and cannot make a reference to itself through this keyword. Functional Component with Vue Template.
Q30. What are X Templates in Vue?
X-templates is the method in which your template is defined inside a script tag in the index.html file. The script tag is given the type text/x-template and referenced by id in your component definition.
Q31. What is webpack? How do you configure webpack in Vuejs?
Webpack is a module bundler that takes your development assets such as Vue components and plain Javascript files and combines them into so-called bundles. You can configure webpack in Vuejs as the entry is the app. js file which is located at the root of your project folder. The next step is to include the loaders with some defined rules. The final step is to add the loaded plugins to our webpack.
Q32. What is Dev Tools? List few dev tools you have used with Vue?
Devtools is a set of utility tools that help a developer in developing applications. The dev tools that can be used with Vue are:
Q33. Enlist browser supported by VueJS?
The browser supported by VueJS are:
Q34. What is hot reloading in vue loader?
Enabling Hot reloading will let you edit a *. vue file, all instances of that component will be swapped in without reloading the page. It even preserves the current state of your app and these swapped components!
Q35. How do you install vuex via npm?
Include vuex after Vue and it will install itself automatically:
npm install vuex --save.
Q36. What is mapState helper?
mapState is a helper in Vuex which makes it easy to map your state to computed properties within your components.
Q37. What are getters in vuex?
Vuex getters are equivalent to Vue's computed properties in that they both are reactive to changes in dependencies and cached for improved performance.
Q38. How to loop in Vue.js?
There are 7 ways to write for loops in your template code.
Vue.js | Angular.Js |
Vue.js is flexible and light but favors speed superior to functionality. | Angular.js is heavy but high on functionality. |
The learning curve is not steeper but if a user has prior knowledge of JavaScript, HTML, and CSS, then it will be easy to learn Vue.js | Angular.js has a steeper learning curve, therefore any fresher can learn it easily. |
Vue.js is simple in terms of design. | Angular.js is not as simple in terms of design. |
It takes less time as compared to an angular to develop non-trivial applications. | It takes more time to develop non-trivial applications. |
It doesn’t have large community support. | It has a large community to suppor |
Advantages of Vue.js:
Disadvantages of Vue.js:
Valid name is required.
Valid name is required.
Valid email id is required.
Sharad Jaiswal
My name is Sharad Jaiswal, and I am the founder of Conax web Solutions. My tech stacks are PHP, NodeJS, Angular, React. I love to write technical articles and programming blogs.