Vue.js

Vue defines itself as “a progressive framework for building user interfaces.” it is a framework very much like Angular and React and actually has many similarities with both. If you are already familiar with these or other frameworks there may be some familiar things you will be working with to get your work out to the public. Vue was made to be able to work with other frameworks or be used on its own for applications when used in combination with modern tooling and supporting libraries.

The framework was created by Evan You after he worked with AngularJS during his employment at Google. he decided to take many of the parts he liked about Angular and build something really lightweight. Things like double curly braces that you see in Angular can also be found in Vue, but it also has components like React. Vue components extend basic HTML elements to encapsulate reusable code.

The code snippet above contains an example of a Vue component. The component presents a button and prints the number of times the button is clicked.

Vue features a reactivity system that uses plain JavaScript objects and optimized re-rendering. Each component keeps track of its reactive dependencies during its render, so the system knows precisely when to re-render, and which components to re-render.

Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. This includes tools to:

• Automatically apply classes for CSS transitions and animations
• Integrate third-party CSS animation libraries, such as Animate.css
• Use JavaScript to directly manipulate the DOM during transition hooks
• Integrate third-party JavaScript animation libraries, such as Velocity.js

When an element wrapped in a transition component is inserted or removed, this is what happens:

1. Vue will automatically test whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings.
2. If the transition component provided JavaScript hooks, these hooks will be called at appropriate times.
3. If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on the next frame.