Vue is flexible enough that you can make use of it directly in HTML. Say if your existing page looks the ways shown below,
Get the tags replaced and let the markup be the same. Many fear that the code gets complicated while implementing Vue. But, the real fact is, Vue is legible, easy to manage and remarkably simple.
In this article let us dive into certain use cases in JQuery and how to get them switch to Vue.
Let’s Get Started!!!
Hide and Display:
The most common use case in JQuery is hiding and displaying something. JQuery has already made the task really simple. Now let us have a look at how Vue makes it interesting.
Here we find both JQuery and Vue works really simple. Still, the reason for working with Vue interests is because of the Toggle function. The Vue consists of a tool called the Vuedevtools. The Vuedevtools is completely different from the Chrome devtools. By using this you get special information about Vue.
Both JQuery and Vue seem to hide and display elements. But in case if something goes wrong nor the code entered is not working, we would probably be adding the console.log or set breakpoints to track errors.
Whereas, when it comes to Vue devtools the toggle option directly handles on the error. The below image represents the action of Toggle button which updates the status as True/False. In case if the DOM is not working the way it is expected to work then you could make use of the Vue in real time to find out what is happening with the code.
This makes the process of debugging an error really simple. The other most important thing is the v-if, which is easy to extend other condition. One can make use of v-show instead of v-if in case if the element that is toggled shows and hides frequently.
The v-if completely unmounts the element, whereas, the v-show will merely toggle the visibility. This is a really important factor that one should concentrate as Show or Hide can be done based on various conditions. They might even occur based on the user input. This is where JQuery gets messy.
When you are used to this style, you get to operate much faster than expected, it is because you don’t need to trace the logic line by line.
This example reveals Vue’s strength. Vue is reactive and it is particularly capable of responding to changes. The changes are done as you type. Which means changes are made instantly.
Storing User Input And Output:
When it comes to storing and retrieving data Vue works in a way, decoupled from having to think about DOM events. When it comes to JQuery, it is tightly coupled to the activities of DOM and those that rest on DOM events to build out the variables its stores. Now let us have a look at the updated version of the last example where the information is gathered on pressing the enter key.
The JQuery is simplified in order to avoid capturing things in every keystroke. It is observed that the team is still working on things out of DOM. In Vue, the team is in control of what’s changing. One could directly attach it to things that we wish to update. In this case, we have a small abstraction called the modifier. Vue is very much clear not to store these until a change event occurs.
This article is indeed an eye-opener to JQuery users. But it is not declared that Vue is something that is better than JQuery. JQuery users who feel that the platform is comfortable can proceed with the same.