Smooth integration of Vue js in multi-page applications which might have used Vanilla JS or Jquery earlier

• Simplifies stuff like event handling, data handling, API calls and more
• Routing can be implemented on the front-end
• Component based structure encourages modularity in user interface development.
• Saves lines of code

To use Vue js in your multi-page application, you need to target the section where you need to use Vue in the Vue instance through class or ID (aiming through ID is preferred). Vue prevents targeting body element of the page.

The about.html page contains examples for event handling through Vue. The section tag is wrapped with a Vue object so that event and data handling can be done through Vue instead of pure Vanilla JS.

Filtering is demonstrated using currency where $ sign is appended before each currency value in the currency array.

Watchers are used to keep track of changes in a given variable. For instance, if a boolean variable is monitored through a watcher, then we can hook a function to it which can be executed as soon as the boolean variable is changed.

There are multiple ways of animating DOM elements in Vue JS.

• Use conditional classes
• Use Transition wrapper
• Animation through Javascript life-cycle hooks

Animating through classes could be the easiest way to animate stuff in Vue JS while using Transitions might be the right way to do it and supports animating multiple elements at once.

Conditional rendering of DOM elements can be controlled using v-if and v-show built in directives in Vue JS.

This would contain the resources I've went through while learning Vue JS over the years I've been working in Vue JS.