Vue.js

What are custom directives? A directive is generally some special token in the markup that tells the library to do something with a DOM element. Vue has its own predefined directives but what if we want to do something or perform some action that is not yet explicitly defined with any Vue directive. Vue allows … Read more

The “route” object contains all the information about the current route, which can always be accessed from the application through one of its properties:

$route.path – A string equal to the path of the current route, always resolved as an absolute path (eg “/user/profile”).
$route.params – A key/value object used to return data from dynamic routes. If there are no parameters, the value will be an empty object.
$route.query – An object in the form of key/value pairs used to return query string data.
$route.fullPath – full URL including query and hash.
$route.matched – An array containing the path records of the current route
$route.name – The name of the current route if it is defined
$route.redirectedFrom – The name of the route from which the redirection was performed, if there is a redirection

In web application development, routing is all about user interface separation. Splitting the application into several different pages is necessary for easier viewing of a complex application. In the roughest terms, routing is the definition of rules with the help of which appropriate content is associated with a request submitted by a specific URL address. Routing is often divided into two main sections:

a) Server-side routing
b) Client-side routing

List rendering is very often used in programming, the most common being dynamic list rendering when rendering a series of similarly grouped information.
This article explains how to animate such lists with the Vue.js framework. To animate multiple elements, we cannot use the “transition” component, because it can “wrap” ONLY ONE HTML element, therefore Vue.js introduces a new type of wrapper component, called .

Vue.js has mechanisms for easily integrating CSS animation over an HTML element. Vue.js enables CSS animation by automatically adding specific classes to the HTML element at a certain moment of animation, after which we can use them to define CSS properties for animation.
In addition, Vue.js enables animation with JavaScript because with “transition hooks” (“custom events” that are “triggered” by Vue.js according to the determined timing of the animation) it enables the use of JavaScript for direct manipulation of the DOM.
Also with Vue.js there is the possibility to easily integrate 3rd-party CSS animation libraries (eg Animate.css) or 3rd-party JavaScript animation libraries (eg Velocity.js or GreenSock).

A Vue filter is essentially a function that takes a value, processes it, and then returns the processed value. Filters are not substitutes for methods, computed properties, or watch properties, because filters do not transform data, but only transform the output that the user sees. Filters can be nested and, like all functions, can take arguments. When a filter is used, its context is set to the instance that refers to it, so the “this” keyword points to it.