How to replace jQuery with Vue.JS effectively?

Ignoring all types of hype surrounding JavaScript frameworks is really impossible. Building an entire system for the sake of small abstractions would probably not be feasible. Moreover, moving a project over to a build system and performing deployment method could spare a lot of time and energy. It is not required to write all your HTML in JavaScript.
Vue is flexible enough that you can make use of it directly in HTML. Say if your existing page looks the ways shown below,

<main>
<div class=”thing”>
<p>Some content here</p>
</div>
</main>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script>
//some jquery code here
</script>

You could make changes to the script tag and make use of the HTML and JS. You could make use of the coding directly without the need for rewriting the HTML JavaScript nor using the web pack. You even neglect the need for the huge system.

< main>
< div class=”thing”>
< p>Some content here< /p>
< /div>
< /main>
< script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js”>< /script>
< script>
//some vue code here
< /script>

Get the tags replaced and let the markup be the same. Many fears 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.

<div id=”app”>
<button type=”button” id=”toggle” aria-expanded=”false”>
Toggle Panel
</button>
<p class=”hello”>hello</p>
</div>

$(function() {
$(‘#toggle’).on(‘click’, function() {
$(‘.hello’).toggle();
$(this).attr(‘aria-expanded’, ($(this).attr(‘aria-expanded’) == “false” ? true : false));
});
});

<<div id=”app”>
<button @click=”show = !show” :aria-expanded=”show ? ‘true’ : ‘false'”>
Toggle Panel
</button>
<p v-if=”show”>hello</p>
</div>

new Vue({
el: ‘#app’,
data: {
show: true
}
})

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.

<div id=”app”>
<label for=”textarea”>What is your favorite kind of taco?</label>
<textarea id=”textarea” v-model=”tacos”></textarea>
<br>
<button v-show=”tacos”>Let us know!</button>
</div>

new Vue({
el: ‘#app’,
data() {
return {
tacos: ”
}
}
})

<div id=”app”>
<label for=”textarea”>What is your favorite kind of taco?</label>
<textarea id=”textarea”></textarea>
<br>
<button v-show=”tacos”>Let us know!</button>
</div>

$(function() {
var button = $(‘.button’);
var textarea = $(‘#textarea’);
button.hide();
textarea.keyup(function() {
if (textarea.val().length > 0) {
button.show();
} else {
button.hide();
}
})
});

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.

Catching inputs:
The most important and valuable JavaScript on the website is capturing the input form. So, let us have a look at how it works. The following coding and image represent how capturing user inputs works on both jQuery and Vue.

<div id=”app”>
<label for=”thing”>Name:</label>
<input id=”thing” type=”text” />
<p class=”formname”></p>
</div>

// this is an alias to $(document).ready(function() {
$(function() {
//keypress wouldn’t include delete key, keyup does. We also query the div id app and find the other elements so that we can reduce lookups
$(‘#app’).keyup(function(e) {
var formname = $(this).find(‘.formname’);
//store in a variable to reduce repetition
var n_input = $(this).find(‘#thing’).val();
formname.empty();
formname.append(n_input);
});
});

<div id=”app”>
<label for=”name”>Name:</label>
<input id=”name” type=”text” v-model=”name” /> <!–v-model is doing the magic here–>
<p>{{ name }}</p>
</div>

//this is a vue instance
new Vue({
//this targets the div id app
el: ‘#app’,
data: {
name: ” //this stores data values for ‘name’
}
})

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.

<div id=”app”>
<label for=”thing”gt;Name:</label>
<input id=”thing” type=”text” />
<p class=”formname”> </p>
</div>

// this is an alias to $(document).ready(function() {
$(function() {
//We query the div id app and find the other elements so that we can reduce lookups
$(‘#app’).change(function(e) {
var n_input = $(this).find(‘#thing’).val();
$(this).find(‘.formname’).append(n_input);
});
});

<div id=”app”>
<label for=”name”>Name:</label>
<input id=”name” type=”text” v-model.lazy=”name” />
<p>{{ name }}</p>
</div>

new Vue({
el: ‘#app’,
data: {
name: ”
}
});

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.

Conclusion:
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.
Vue is an abstract for small websites that don’t need more effort. The biggest advantage in using Vue is, comparable in size, easy to reason, fairly trivial to switch functionalities to Vue without the need to change or rewrite HTML in JavaScript. Vue’s flexibility provides an easy transition of codes to build a step and component structure. Vue is so called the progressive framework that helps its users to switch between frameworks without the pressure of changing work style.