In this post, we feature a comprehensive article on How to replace jQuery with VueJS.
If you’re from the IT industry, then you might already know about all the hype that VueJS has gained lately. But, what you might not know is that you can replace JQuery with Vue.
In simple words, you can incorporate Vue just like you incorporate JQuery, without any build steps.
1. How to replace jQuery with VueJS
VueJS is flexible enough to replace JQuery directly in the HTML. For example, an HTML code with JQuery would look like this:
Replace jQuery – Vuejs HTML
<main>
<div class="thing">
<p>Some content here</p>
</div>
</main>
<script src="https://www.javacodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS8=ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
But, if you want to replace the JQuery with Vue in the above example, then all you’ll need to do is change the script tag like shown below :
<main>
<div class="thing">
<p>Some content here</p>
</div>
</main>
<script src="https://www.javacodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS8=ajax/libs/vue/2.5.3/vue.min.js"></script>
<script>
<...!Some Vue Code Here...>
</script>
The Best Part
You may think that this will make the code more complicated, but it actually doesn’t. And in this article, I will prove that with a couple of examples.
But before that, let’s learn a bit about VueJS first. Also, let’s check how it is different from the JQuery. That being said, let’s dive right in!
2. What is VueJS?
VueJS, as you already know, is a JavaScript Framework used for front-end development.
It is open-source and incrementally adaptive in nature. Vue is mainly used for designing User Interfaces like declarative UI, time travel debugging, components, and so on.
Although, you can also use Vue as a web application framework to power single-page applications.
2.1 How VueJS is Different from JQuery?
JQuery is basically a cross-platform and open-source Javascript Library, created to simplify the client-side scripting of HTML.
JQuery syntax can help you to easily navigate a document, handle events, create animations, select DOM elements, and develop Ajax applications.
Now when it comes to JQuery, most people believe that it is simple to learn for beginners. But in reality, JQuery is simple to learn and use if you understand the JavaScript and DOM API well. And that’s not at all easier for beginners.
Vue, on the other hand, is popular due to its simplicity of learning.
Let’s see a few examples to see how you can replace JQuery with Vue.
3. How JQuery & Vue Work Individually
When you use JQuery, you’re basically adding a Swiss Army Knife to JavaScript to perform certain web development tasks.
Let’s take a simple web page as an example.
HTML
<header>
header title
</header>
<div id="sidebar">
Some sidebar stuff
</div>
<p>
Main site content here
</p>
<div id="loginForm">
A login form
</div>
Now, if we use JQuery, then we will have to write code to work with the header, sidebar, and the login form.
3.1 JQuery Implementation Code
jQuery Example
$(document).ready(function() {
$('header') <!--Something-->
$('#sidebar') <!--Something-->
$('#loginForm') <!--Something-->
});
Now, if we use Vue, then we will first have to specify what we’re trying to work with.
For example, suppose your client asked you to add validation to the login form of his website.
Here’s how the Vue code might look like :
3.2 Vue Implementation Code
Now, if your client later asks you to add a sidebar, then your Vue code might look like this:
Vue Example
new Vue({
el:'#loginForm',
<!--Code Here-->
});
new Vue({
el:'#sideBar',
<!--Code Here-->
});
As you can see, we’ve now added 2 Vue application code inside JavaScript. So, does it seem like it would complicate things as we add more functionality?
Though it might look that way, it doesn’t. In fact, Vue gives us the benefit of encapsulation.
For instance, if your client yet adds another request to add something more, then the separated Vue code can give you great peace of mind regarding small mistakes won’t step on each other.
Let’s take another example to learn how you can use Vue instead of JQuery.
4. Finding Elements in DOM
Let’s say we have a button and when it’s clicked, we want some certain action to happen.
Let’s see how we write code in JQuery.
jQuery Example
<button id="myButton">Click Me! </button>
<script>
$(document).ready(function() {
$('#myButton').click(function() {
alert(1);
});
});
</script>
Now, let’s compare this with Vue code.
Vue Example
<div id="app">
<button v-on:click="doSomething">Click Me! </button>
</div>
<script>
const app = new Vue({
el:'#app',
methods: {
doSomething: function() {
alert(1);
}
}
});
</script>
The Vue code definitely looks a bit longer and I’m not going to argue with you about that.
But, if you take a second look, then you will see that the markup has a direct connection between the action and the function that will be called upon the click event.
In Vue, its’ much easier to understand what is going on. Let’s take one final example to learn how to replace JQuery with Vue.
5. Reading & Writing Form Variables
Working on forms is probably the most common things that we, as web developers, can do using JavaScript.
Let’s take a simple example of JQuery to read a couple of form fields.
jQuery Example
<form>
<input type="number" id="first"> +
<input type="number" id="second"> =
<input type="number" id="sum">
<button id="sumButton">Sum</button>
</form>
<script>
$(document).ready(function() {
let $first = $('#first');
let $second = $('#second');
let $sum = $('#sum');
let $button = $('#sumButton');
$button.on('click', function(e) {
e.preventDefault();
let total = parseInt($first.val(),10) + parseInt($second.val(),10);
$sum.val(total);
});
});
</script>
As you can see, the above JQuery code reads and writes through the Val() method.
As a result, we get all three text field items and the button from the DOM.
Now let’s perform the same task using Vue.
jQuery Example
<form id="myForm">
<input type="number" v-model.number="first"> +
<input type="number" v-model.number="second"> =
<input type="number" v-model="sum">
<button @click.prevent="doSum">Sum</button>
</form>
<script>
new Vue({
el: '#myForm',
data: {
first: 0,
second: 0,
sum: 0
},
methods: {
doSum: function() {
this.sum = this.first + this.second;
}
}
})
</script>
Notice something in above Vue code? Well, Vue offers some interesting shortcuts.
For starters, through the v- model, Vue creates two-way data binding between values of fields in DOM.
Change the form and the data updates. Change the data and the form updates.
Personally, what I love the most about Vue is not having query selectors in the JavaScript and how the HTML code looks much cleaner and understandable in terms of what it’s doing.
6. Conclusion
If you’re an experienced web developer who knows how to use JQuery and wants to continue using it, then it’s fine.
But, that doesn’t change the fact that Vue is the next great step in the world of JavaScript. It supports building complex web applications and has a huge potential for replacing JQuery entirely in the JavaScript.
That being said, if you still have any doubts regarding how to use Vue instead of JQuery, let me know in the comments below.
7. Download the Source Code
You can download the full source code of this example here: How to replace jQuery with VueJS
