Vue.js vs jQuery: Use Cases and Comparison with Examples

Introduction

What is Vue.js? How is it different from jQuery? Should I stop using jQuery if I learned Vue.js? Can you use it outside Laravel? If you are a beginner or you just started learning Vue.js you are probably asking yourself the exact same questions or probably confused and wondering what does it do and what are its use cases. If this is you, then this article will help you get over that.

After reading this article you should have an idea about this trending framework when to use it and decide if you will abandon jQuery for it.

What is jQuery?

jQuery (write less, do more) is a fast, small, and feature-rich JavaScript library that works across a multitude of browsers and it was created to make writing vanilla JavaScript easier. jQuery allows for DOM/CSS manipulation, event handling, animation, and making AJAX requests.

When to use jQuery?

jQuery can be used for multiple things. A lot of libraries and plugins require it because you can do simple things like alter an input’s value or get a div’s content to create amazing slideshows/galleries and wonderful animations.

When you are comfortable writing jQuery code you can absolutely write all your JavaScript using jQuery. Here are few examples to demonstrate how easy jQuery is:

• You want to get the value of an input:

$('#input-id').val();

• Add a class to an element:

$('#element-id').addClass('some-class');

• Submit a get request to your API:

$.get('http://example.com/api/endpoint', function(data){
    console.log(data);
});

You can clearly see how easy it is to manipulate the DOM or make AJAX calls using jQuery compared to how you usually would do it using vanilla JavaScript.

It’s so easy that many developers forgot how to write simple code with vanilla JavaScript.

Installation

You can use jQuery by referencing the CDN like this:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Or you can install it via npm:

npm install jquery

What is Vue.js?

Unlike jQuery, Vue.js is an MVC framework that is very much inspired by Angular. In fact, its creator Evan You started this project after working at Google on Angular. He decided to extract the cool parts about Angular and create a framework that is really lightweight and much easier to learn and use.

Vue was first released in February 2014 and it has gained popularity in the Laravel world. As I am writing this article Vue has and 4,933,779 NPM downloads 65,422 Github Stars.

When to use Vue.js?

Vue is suitable for small projects where you just want to add a little bit of reactivity, submit a form with AJAX, show the user a modal, display the value of an input as the user is typing, or many other similarly straightforward things. It’s scalable and also fantastic for a huge project. This is why it’s referred to as the progressive framework. You can find code samples for these examples in the official documentation in different languages:

1. GitHub Commits
2. Todo App
3. Model Component
4. Elastic Header

Check the docs for more examples.

Vue is also perfectly designed for large single-page applications thanks to its Router and Vuex core components. We will cover a lot more advanced parts (Components, Filters, Router, Events, Vuex…) of the framework later on here at Scotch.io but if you are the type to learn from reading other people’s code then I highly recommend going through this example: HackerNews Clone.

Installation

You can use Vue by referencing the CDN like this:

<script src="https://unpkg.com/vue"></script>

Or you can install it via npm:

npm install vue

Examples

In this chapter we will go through several examples of how you can accomplish different tasks with jQuery and Vue.js:

Events

1. Listen for when an element is clicked:

jQuery: https://jsfiddle.net/4x445r2r/

<button id="button">Click me!</button>

(function() {
    $('#button').click(function() {
        alert('Clicked!');
    });
})();

Vue: https://jsfiddle.net/jwfqtutc/

<div id="app">
  <button @click="doSomething">Click me!</button>
</div>

new Vue({
    el: '#app',

    methods: {
        doSomething() {
            alert('Clicked!');
        }
    }
});

3. Listen for when an input has changed:

jQuery: https://jsfiddle.net/5zdcLdLy/

<input id="input" type="text" placeholder="Enter your name">

(function() {
    $('#input').change(function() {
        alert('Hello '+ $(this).val());
    });
})();

Vue: https://jsfiddle.net/as65e4nt/

<div id="app">
  <input @change="doSomething" v-model="name" type="text" placeholder="Enter your name">
</div>

new Vue({
    el: '#app',

    data: {
        name: ''
    },

    methods: {
        doSomething() {
        alert('Hello '+ this.name);
    }
    }
});

Binding classes

jQuery: https://jsfiddle.net/o65nvke2/

<div id="content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, modi. Similique amet aliquam magni obcaecati placeat, iusto ipsum enim, perferendis earum modi debitis praesentium, consequatur dolor soluta deserunt. Saepe, laborum.
</div>

(function() {
    var className = 'red-text';

    $('#content').addClass(className);
})();

Vue: https://jsfiddle.net/a203pyqf/

<div id="app">
  <div id="content" :class="className">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, modi. Similique amet aliquam magni obcaecati placeat, iusto ipsum enim, perferendis earum modi debitis praesentium, consequatur dolor soluta deserunt. Saepe, laborum.
  </div>
</div>

new Vue({
    el: '#app',

    data: {
        className: 'red-text'
    }
});

Update an element’s content

jQuery: https://jsfiddle.net/ccLffhot

<div id="content"></div>

<input type="text" id="text" placeholder="Enter your text">

(function() {

    $('#text').keyup(function() {
          $('#content').html($(this).val());
    });

})();

Vue: https://jsfiddle.net/gjLag10s/

<div id="app">
  <div v-html="content"></div>
  <input type="text" placeholder="Enter your text" v-model="content">
</div>

new Vue({
    el: '#app',

    data: {
        content: ''
    }

});

Toggle the visibility of an element

jQuery: https://jsfiddle.net/4LcL5pco/

<div id="content">
  Alert!
</div>

<button id="button">Toggle</button>

(function() {

    $('#button').click(function() {
        $('#content').toggle();
    });

})();

Vue: https://jsfiddle.net/a8xoaoqy/

<div id="app">
  <div id="content" v-if="visible">
    Alert!
  </div>

  <button @click="visible = !visible">Toggle</button>
</div>

new Vue({

    el: '#app',

    data: {
        visible: true
    }

});

Building a select input from an array

jQuery: https://jsfiddle.net/9f4pcakt/

<span>Social Networks:</span>

<select id="networks"></select>

(function() {

    var socialNetworks = ['Facebook', 'Twitter', 'YouTube', 'Instagram', 'LinkedIn'];
    var list;

    $.each(socialNetworks, function (index, value) {
        list += `<option value="${index}">${value}</option>`;
    });

    $('#networks').html(list);

})();

Vue: https://jsfiddle.net/gktr062m/

<div id="app">
  <span>Social Networks:</span>

  <select id="networks">
    <option v-for="(network, index) in socialNetworks" :value="index">{{ network }}</option>
  </select>
</div>

new Vue({

    el: '#app',

    data: {
        socialNetworks: ['Facebook', 'Twitter', 'YouTube', 'Instagram', 'LinkedIn']
    }

});

Making AJAX requests

jQuery: https://jsfiddle.net/t3qef00y/

<span>List of users:</span>

<ul id="users"></ul>

(function() {

  var list = '';

    $.get('https://example.com/api/users', function(response) {

        $.each(response.data, function (index, user) {
            list += `<li>${user.first_name}</li>`;
        });

        $('#users').html(list);

  });

})();

Vue: https://jsfiddle.net/gbjthb3q/

You cannot make AJAX calls with Vue itself, but the team released a package dedicated to that: GitHub - pagekit/vue-resource: The HTTP client for Vue.js

<div id="app">
<span>List of users:</span>

  <ul id="users">
    <li v-for="user in users">{{ user.first_name }}</li>
  </ul>
</div>

new Vue({

    el: '#app',

    data: {
        users: null
    },

    mounted: function() {
        this.$http.get('https://example.com/api/users').then(response => {
            this.users = response.body.data;
        });
    }

});

Conclusion

Now that you have read this article, you now know the difference between jQuery and Vue, the benefits that come with each one, and when to use each. I personally still use jQuery when I feel like it is enough for the project I am working on and I use Vue for more complexity and reactivity. In the end, it is all a matter of preferences and which tools you are more comfortable with.