You can chain filters one after the other to perform multiple manipulations on the expression. The generic structure of filter chain would be as below,
{{ message | filterA | filterB | filterB ... }}
In the above chain stack, you can observe that message expression applied with three filters, each separated by a pipe(|) symbol. The first filter(filterA) takes the expression as a single argument and the result of the expression becomes an argument for second filter(filterB) and the chain continue for remaining filters.
For example, if you want to transform date expression with a full date format and uppercase then you can apply dateFormat and uppercase filters as below,
{{ birthday | dateFormat | uppercase }}
Posted Date:- 2021-09-08 06:24:27
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.
Posted Date:- 2021-09-08 06:22:54
Sometimes it may be required to map routes to the same component based on a pattern.
Let's take a user component with the mapped URLs like /user/john/post/123 and /user/jack/post/235 using dynamic segments,
const User = {
template: '<div>User {{ $route.params.name }}, PostId: {{ route.params.postid }}</div>'
}
const router = new VueRouter({
routes: [
// dynamic segments start with a colon
{ path: '/user/:name/post/:postid', component: User }
]
})
Posted Date:- 2021-09-08 06:20:55
There are many ways Vue provides transition effects when items are inserted, updated, or removed from the DOM.
Below are the possible ways,
1. Automatically apply classes for CSS transitions and animations
2. Integrate 3rd-party CSS animation libraries. For example, Animate.css
3. Use JavaScript to directly manipulate the DOM during transition hooks
4. Integrate 3rd-party JavaScript animation libraries. For example, Velocity.js
Posted Date:- 2021-09-08 06:19:15
When a large application uses a lot of components, it may not make sense to load up all components at the same time from the server. In such a case, Vue allows us to define components that are loaded from the server asynchronously, as and when needed. When declaring or registering components, Vue accepts a factory function that offers a Promise. The component can then be ‘resolved’ when called.
This saves bandwidth and application bootstrap time by loading only the essentials and deferring async components to their invocation time in the future.
Here’s a simple example of how a component can be made asynchronous.
new Vue({
components: {
‘tweet-box’: () => import(‘./components/async/TweetBox’)
}
});
Posted Date:- 2021-09-08 06:18:10
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.
Following is the way to register a Vue component inside other component
export default {
el: '#your-element'
components: {
'your-component'
}
}
Posted Date:- 2021-09-08 06:15:44
The Vue-loader is a loader module for webpack in Vue.js that is used to write single file components using the .vue file format.
The single-file component contains three sections called template, script, and style. The webpack can extract and process each section using separate loader modules such as the SASS or SCSS loaders. The vue-loader module makes static assets to be treated as module dependencies and enables processing using webpack loaders.
Posted Date:- 2021-09-08 06:14:56
You can create a project by using the following command:
vue init webpack myproject
To run your project, run the following command:
npm run build
After executing the above command, copy index.html and /dist/ folder into your website root directory, and your project will be deployed.
Posted Date:- 2021-09-08 06:13:50
ou can declare props with type or without type. But it is recommended to have prop types because it provides the documentation for the component and warns the developer for any incorrect data type being assigned.
props: {
name: String,
age: Number,
isAuthenticated: Boolean,
phoneNumbers: Array,
address: Object
}
As mentioned in the above code snippet, you can list props as an object, where the properties’ names and values contain the prop names and types, respectively.
Posted Date:- 2021-09-08 06:12:33
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('')
})
Posted Date:- 2021-09-08 06:10:22
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.
<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>
Posted Date:- 2021-09-08 06:09:11
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.
Posted Date:- 2021-09-08 06:08:31
You can create Vue instance with the Vue function:
var vm = new Vue({
// options
})
Posted Date:- 2021-09-08 06:07:22
When an application grows in size, both in terms of features and codebase, managing state becomes difficult and using an endless network of downstream props and upstream events is certainly not a wise decision. In such a situation, it becomes necessary to offload state management to a central management system. The Vue ecosystem offers Vuex which is the official state management library and also a recommended pattern for storing state centrally.
Vuex allows maintenance of a central state. Components use Vuex as a reactive data store and update when the state updates. Multiple and non-related components can depend on the same and central state store.
Posted Date:- 2021-09-08 06:06:03
When we dynamically switch components as a result of a data property or some other reactive state, they’re re-rendered everytime they’re toggled in to render. While you may want this behaviour, there are situations where re-rendering may not be suitable. For instance, you may have a component that brings in data from an API call when created. You may not want to place this API call every time this component is dynamically switched in to render. That is when you can enclose the component within the keep-alive element. The keep-alive element caches the component and fetches it from there instead of re-rendering it every time.
Posted Date:- 2021-09-08 06:05:28
Arrow functions don’t define a ‘this’ context of their own and are instead bound to their parent function’s context. When you use an arrow function ( => ) in a Vue app, the ‘this’ keyword won’t be bound to the Vue instance and hence will throw errors. Therefore, it is strongly advised to use the standard function declaration instead.
Posted Date:- 2021-09-08 06:04:55
The updated hook is called after reactive data is updated and the virtual DOM is re-rendered. It can be used to perform DOM related operations, however, there is no guarantee (by default) that child components would’ve rendered, though that can be ensured as well by using this.$nextTick inside the updated function.
Posted Date:- 2021-09-08 06:04:21
While this depends on the purpose of the component and it’s usage, the created lifecycle hook is generally ideal for placing an API call. At this point, the component’s data and reactivity features are available to operate, however, the component has not rendered yet.
Posted Date:- 2021-09-08 06:03:45
Yes, we can call Rest API from Vue.js. There are several HTTP libraries that can used to call REST Api's from Vue.js. One of the popular libraries is Axios. It is very simple to use and lightweight. You can include it in your project by using the following command.
npm install axios --save
Implementing GET method using Axios in Vue JS
axios({ method: "GET", "URL": "https://httpbin.org/ip" }).then(result => {
this.ip = result.data.origin;
}, error => {
console.error(error);
});
Posted Date:- 2021-09-08 06:02:55
A Vue plugin allows developers to build and add global level functionality to Vue. This can be used to add globally accessible methods and properties, assets, options, mixins and other custom API to an application. An example of a Vue plugin is VueFire plugin that adds Firebase specific methods and binding to the entire application. Thereafter firebase functions are available within the ‘this’ context from anywhere in the application structure.
Posted Date:- 2021-09-08 06:01:18
he Document Object Model or DOM defines an interface that allows languages such as JavaScript to access and manipulate an HTML document. Elements are represented by nodes in a tree and the interface allows us to manipulate them. This interface, however, comes with a cost and a large number of very frequent DOM operations will slow down the page.
Vue solves this problem by implementing a virtual representation of the document’s structure in memory where a virtual node (VNode) represents nodes in a DOM tree. When manipulation is needed, instead of performing it on the real DOM, the calculations and operations are performed in memory on the Virtual DOM. This is naturally faster and allows the Virtual DOM algorithm to compute the most optimised way to update the actual DOM structure.
Posted Date:- 2021-09-08 06:00:43
Let’s say we have a Node.js backend server running on localhost:4040. To ensure it is proxyed in and accessible from the components, we can configure the vue.config.js file and include a devServer section as shown below:
In the vue.config.js file:
module.exports: {
devServer: {
proxy: {
‘/api’: {
target: ‘http://localhost:4040/api’,
changeOrigin: true
}
}
}
}
Posted Date:- 2021-09-08 06:00:10
Vue-loader is a loader module for webpack that allows us to write single file components using the .vue file format. A single file component file has three sections namely template, script and style. The vue-loader module allows webpack to extract and process each section using separate loader modules such as the SASS or SCSS loaders. The setup thus allows us to seamlessly author apps using .vue files.
The vue-loader module also allows static assets to be treated as module dependencies and enables processing using webpack loaders. And it also allows hot reloading during development.
Posted Date:- 2021-09-08 05:59:32
There are three modifiers supported for v-model directive.
1. lazy: By default, v-model syncs the input with the data after each input event. You can add the lazy modifier to instead sync after change events.
<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg" >
2. number: If you want user input to be automatically typecast as a number, you can add the number modifier to your v-model. Even with type="number", the value of HTML input elements always returns a string. So, this typecast modifier is required.
<input v-model.number="age" type="number">
3. trim: If you want whitespace from user input to be trimmed automatically, you can add the trim modifier to your v-model.
<input v-model.trim="msg">
Posted Date:- 2021-09-08 05:59:05
Vue supports below modifiers to trigger mouse or keyboard event listeners when the corresponding key is pressed,
1.ctrl
2.alt
3 .shift
4.meta
Posted Date:- 2021-09-08 05:57:25
You can define custom key modifier aliases via the global config.keyCodes. There are few guidelines for the properties
You can't use camelCase. Instead you can use kebab-case with double quotation marks
You can define multiple values in an array format
Vue.config.keyCodes = {
f1: 112,
"media-play-pause": 179,
down: [40, 87]
}
Posted Date:- 2021-09-08 05:56:24
Mixins in Vue.js are a set of defined logic that is stored in a particular way. Mixins can be re-used repeatedly to add functionality to your Vue instances and components. Mixins are important because they provide a lot of functionalities. Following is the list of features that Mixins provide:
1. Mixins facilitate you to easily adhere to the DRY principle and ensure that you do not repeat yourself.
2. Mixins provide great flexibility.
3. Mixin contains options for Vue components.
4. You can use Mixins in Vue.js safely because they do not affect changes outside their defined scope.
5. Mixins in Vue.js provide a great platform for code reusability.
Posted Date:- 2021-09-08 05:53:55
In Vue.js, every component instance has its own isolated scope. So, you cannot directly reference parent data in a child component's template.
Props are used to pass down data to the child components. 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: '<h3>{{ postTitle }}</h3>'
})
Posted Date:- 2021-09-08 05:52:24
The v-model directive is used to create Two-Way Bindings in Vue js. In Two-Way Bindings, data or model binds with DOM, and Dom binds back to the model.
Let's see an example to demonstrate how Two-Way Bindings is implemented.
<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>
Posted Date:- 2021-09-08 05:51:52
In one-way data binding or one-way data flow, the view (UI) part of the application does not update automatically. In this model, when the data Model is changed, you need to write some custom code to make it updated every time after the change. The v-bind directive is used for one-way data flow or binding in Vue.js.
On the other hand, in two-way data binding, the view (UI) part of the application is automatically updated when the data Model is changed. The v-model directive is used for two way data binding in Vue.js.
Posted Date:- 2021-09-08 05:51:21
The methods which do not mutate the original array but always return a new array are called non-mutation methods.
Below are the list of non-mutation methods,
1. filter()
2. concat()
3. slice()
For example, lets take a todo list where it replaces the old array with new one based on status filter,
vm.todos = vm.todos.filter(function (todo) {
return todo.status.match(/Completed/)
})
This approach won't re-render the entire list due to VueJS implementation.
Posted Date:- 2021-09-08 05:50:34
As the name suggests, mutation methods modifies the original array.
Below are the list of array mutation methods which trigger view updates.
1. push()
2. pop()
3. shift()
4. unshift()
5. splice()
6. sort()
7. reverse()
If you perform any of the above mutation method on the list then it triggers view update. For example, push method on array named 'items' trigger a view update,
vm.todos.push({ message: 'Baz' })
Posted Date:- 2021-09-08 05:49:34
In order to track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item with in v-for iteration. An ideal value for key would be the unique id of each item.
Let us take an example usage,
<div v-for="item in items" :key="item.id">
{{item.name}}
</div>
Hence, It is always recommended to provide a key with v-for whenever possible, unless the iterated DOM content is simple.
Note: You shouldn’t use non-primitive values like objects and arrays as v-for keys. Use string or numeric values instead.
Posted Date:- 2021-09-08 05:48:24
By definition, a slot is a placeholder in a child component that is full of components passed from the parent. The content of the regular slot is included the parent scope and then transferred to the child component.
For that reason, child component properties cannot be used in the slot’s content. Rather, scoped slots give room to pass component data to the parent scope, thus allowing the use of data in the slot content.
Posted Date:- 2021-09-08 05:47:52
By definition, Vue-loader is a loader module for a web pack that supports the writing of a single file component using the Vue file format. A single file component file comprises three sections; template, style, and script.
The Vue-loader module supports web packs in processing and extracting each section using different loader modules, for example, SASS or SCSS loaders. The setup, therefore, accommodates the seamless authoring of apps using Vue files.
Additionally, the Vue-loader module also gives room for static assets to be considered as dependencies and enables processing through webpack loaders. Lastly, it also allows for hot reloading during development.
Posted Date:- 2021-09-08 05:47:21
Normally,Vue.js application comprises of a root Vue instance generated with a new Vue, which is organized into a tree of nested, reusable components. Below is a good example, of how a todo app’s component tree might look like;
Posted Date:- 2021-09-08 05:46:55
This mainly depends on its usage and the purpose of the component. Usually, the newly created lifecycle hook is normally the best for placing an API call. This is because, at this stage, the reactivity features and component data are available to operate despite the fact that the components haven’t rendered yet.
11. How can query parameters be fetched in Vue.js?
Normally, according to the docs of route objects, the $route from the components have to be accessed.
That will lead you to what you need, which is;
//from your component
console.log(this.$route.query.test) // outputs 'yay'
Posted Date:- 2021-09-08 05:46:27
Vue.js have the following features;
<> It has a Virtual DOM.
<> It has a data-binding feature which helps in manipulating values to HTML attributes.
<> Its components help in creating customized components that are in turn used in HTML.
<> The capability of providing a transition to HTML elements.
<> Vue.js has HTML based templates.
<> Built-in directives such as v-show.
<> It has watchers which are applied to data that changes.
<> Vue. j’s is a lightweight thus better performance.
<> Routing feature which makes it possible to navigate between pages.
Posted Date:- 2021-09-08 05:45:53
Mixins are flexible methods of redistributing reusable features for Vue components. A mixin object can accommodate any component option. When a component uses a mixin, all mixin components are merged with components options.
Advantages of using
1. It has several objects for heap allocation.
2. It’s run time assembly can prevent the problem of supporting persistence.
3. Additionally, the run time assembly can also lead to objects which seem mysterious.
Disadvantages of using mixins
1. It increases dependencies.
2. Global mixins affect every component, hence this can result in a serious maintenance problem.
Posted Date:- 2021-09-08 05:42:20
In Vue.js, each component instance has its own unique isolated scope. Therefore, parent data cannot be directly referenced in a child’s component template.
The props can be used to pass down data to child components. Furthermore, props are custom attributes that can easily be registered on a component.
In a situation where a value is transferred to a prop attribute, it becomes a property of that component instance.
Vue.component('blog-post', {
// camelCase in JavaScript
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
Posted Date:- 2021-09-08 05:41:16
Vue plugins are simple but powerful tools that enable developers to build and add global level functionality to Vue.
The Vue plugins have a wide range of uses, for example, distributing app-wide components, the addition of extra features, such as routing and immutable data stores for your apps.
Above all, the Vue plugin is very simple to use since all you need is just to install it. One of the commonly used Vue plugins is the VueFire plugin that adds firebase methods and bindings to the whole application.
Posted Date:- 2021-09-08 05:40:42
You can achieve conditional group of elements(toggle multiple elements at a time) by applying v-if directive on <template> element which works as invisible wrapper(no rendering) for group of elements.
For example, you can conditionally group user details based on valid user condition.
<template v-if="condition">
<h1>Name</h1>
<p>Address</p>
<p>Contact Details</p>
</template>
Posted Date:- 2021-09-08 05:39:38
Every Vue application works by creating a new Vue instance with the Vue function. Generally the variable vm (short for ViewModel) is used to refer Vue instance. You can create vue instance as below,
var vm = new Vue({
// options
})
As mentioned in the above code snippets, you need to pass options object. You can find the full list of options in the API reference.
Posted Date:- 2021-09-08 05:39:11
Vue’s two-way binding system is among the toughest steps of developing a web application, synchronization of user data although the v-model makes it very simple.
The V-model detective performs a regular update of the templates. The updates occur whenever the model changes and also updates the data model in case the template changes.
Two-way binding is a great and powerful feature that when used appropriately, can significantly boost the speed of the development process. Additionally, in two-way data is bounded to the DOM, which is in turn bound back to the model.
Below is an example of the implementation of two-way binding;
<Dev id="app">
{{Message}}
<Input v-model="message">
</Dev>
<Script type="text/javascript">
Var message = 'Vue. J's is rad';
New Vue ({ el: '#app', data {{message }};;
</Script>
JavaScript
Posted Date:- 2021-09-08 05:38:40
Below are some of the main differences between between v-show and v-if directives,
1) v-if only renders the element to the DOM if the expression passes whereas v-show renders all elements to the DOM and then uses the CSS display property to show/hide elements based on expression.
2) v-if supports v-else and v-else-if directives whereas v-show doesn't support else directives.
3) v-if has higher toggle costs while v-show has higher initial render costs. i.e, v-show has a performance advantage if the elements are switched on and off frequently, while the v-if has the advantage when it comes to initial render time.
4) v-if supports <template> tab but v-show doesn't support.
Posted Date:- 2021-09-08 05:37:59
The VUE-resource is a plug-in for Vue.js. This plug-in is used with Vue.js to make web requests and handle responses, in which XHMLHttpRequests or JSONP is used.
You can use the following yarn or npm command to install VUE-resource:
$ yarn add vue-resource
$ npm install vue-resource
Posted Date:- 2021-09-08 05:36:52
Evan you is the founder of Vue.js. He was working at Google on several Angular projects when he founded Vue.js.
Posted Date:- 2021-09-08 05:36:07
Generally, this is a very common Vue interview question. Usually, all properties defined in Vue instance are very reactive. This means that in case of any change, the components automatically update and re-render.
Therefore, all these properties are changed to getters and setters in the inItialization stage. Hence, giving Vue the ability to detect when these properties are changed.
Above all, the following setbacks must be considered while designing a Vue app;
1) Because of JavaScript limitation, Vue cannot detect the deletion or addition of an object property.
3) Additionally, it cannot also detect the modification of array items, hence, the need to use Vue .set.
Posted Date:- 2021-09-08 05:35:36
Below are the some of major features available with VueJS
1. Virtual DOM: It uses virtual DOM similar to other existing frameworks such as ReactJS, Ember etc. Virtual DOM is a light-weight in-memory tree representation of the original HTML DOM and updated without affecting the original DOM.
2. Components: Used to create reusable custom elements in VueJS applications.
3. Templates: VueJS provides HTML based templates that bind the DOM with the Vue instance data
4. Routing: Navigation between pages is achieved through vue-router
5. Light weight: VueJS is light weight library compared to other frameworks.
Posted Date:- 2021-09-08 05:34:58
By definition, one-way data flow means that the model is the only source of truth. While two-way data-binding means that UI fields are found to model data. Therefore, in case UI field changes, the model data also changes and vice-versa.
Secondly, one-way data flows are deterministic, in contrast, the two-way binding is associated with several side effects that are difficult to identify and understand.
Additionally, for one-way data flow, the UI aspect of the application can not update automatically. This, in turn, results in a need to customize certain codes to help it update every time there is a change in the data model. Whereas, in data binding, the UI part of the application usually updates automatically when the data model is changed.
Posted Date:- 2021-09-08 05:33:45
Vue js comes with following features
> Templates
> Reactivity
> Components
> Transitions
> Routing
Posted Date:- 2021-09-08 05:33:22
You have access to a $route object from your components, that expose what we need.
//from your component
console.log(this.$route.query.test)
Posted Date:- 2021-09-08 05:32:42
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.
Posted Date:- 2021-09-08 05:32:14
Arrow functions are not independent, as a result, they cannot define a ‘this’ of their own. But instead, the arrow functions are bound to their parent’s function’s context.
In a situation where the arrow function (=>) is used in the Vue app, the keyword ‘this’ does not bind to the Vue instance and therefore, resulting in errors.
For that reason, it is highly advised to use the standard function declaration instead of the arrow function.
Posted Date:- 2021-09-08 05:31:46
Vue.Js is a progressive framework that is used in creating dynamic user interfaces. Moreover, Vue.Js is different from other monolithic frameworks since it designed to be highly adaptable. Generally, Vue is simple thus easy to learn. Its main library is focused on view only, consequently making it easy to integrate with other libraries.
Posted Date:- 2021-09-08 05:31:25