Vue.js против jQuery: сравнение с примерами

Если Вы еще не слышали про Vue.js, то, вероятно, Вы либо только начинаете свой путь фронтенд-разработчика, либо очнулись от долго сна. Сегодня мы постараемся разобраться в этом.

Немного вступления

Что такое vue.js? Чем он отличается от jQuery? Я не должен дальше работать с jQuery, если познакомился с Vue? Я могу использовать его за пределами фреймворка Laravel? Если у Вас в голове возникают такие вопросы, то данная статья для Вас.

После прочтения этого материала, у Вас должно будет сложится понимание о том, что из себя представляет JS-фреймворк Vue.js и стоит ли отказываться от jQuery ради него.

Что такое jQuery?

Если Вы не знаете, что такое jQuery, хотя я очень удивлюсь этому, ведь данный инструмент существует уже более 10 лет и был задействован как в мелких проектах, так и в крупных компания, зарабатывающих миллионы ежемесячно, то попробую объяснить в двух словах:

jQuery — это шустрая, компактная и богатая библиотека JavaScript, которая отлично поддерживается большинством современных браузеров, главная цель которой, сделать написание ванильного JavaScript проще. Библиотека jQuery позволяет осуществлять манипуляции с DOM\CSS элементами, обрабатывать события, создавать анимацию и реализовывать AJAX-запросы.

Основной особенностью любви к jQuery является ее практичность и легкость в освоении. Также, для нее существует рекордное количество плагинов: слайдеры, лайтбоксы, мегаменю, галереи, вкладки и многое другое. Используя jQ Вы можете добраться до любого DOM-элемента в считанные секунды.

Изучить jQuery намного проще, чем может показаться на первый взгляд. Итак, установка этой библиотеки выглядит следующим образом:

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

Либо используя NPM:

$ npm install jquery

Что такое Vue.js?

В отличие от jQuery, Vue.js — это MVC фреймворк, который очень сильно вдохновился возможностями Angular. На самом деле, создатель Vue начал разработку этого проекта после работы в Google с Angualr. Он решил извлечь все прелести из последнего и создать нечто, которое будет решать множество современных задач и прост в освоении. Сказать, что Vue стал популярным очень быстро — ничего не сказать. На момент написания статьи, данный проект набрал 65,422 звезды на GitHub`е.

Vue отлично подходит для небольших проектов, где Вы просто хотите добавить немного реактивности, отправить форму с AJAX, показать пользователю модальное окно, отобразить то, как пользователь вводит текст, или много других аналогичных простых вещей. Vue прекрасно масштабируемый и может быть использован в крупных проектах. Именно поэтому он называется прогрессивным фреймворком. По этой ссылке можно найти введение в основы Vue на русском языке — https://ru.vuejs.org/v2/guide/.

Установка фреймворка Vue.js:

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

Либо используя NPM:

$ npm install vue

Примеры Vue и jQuery

Ниже мы будем рассматривать несколько примеров того, как можно выполнять различные задачи с jQuery и Vue.js.

События

1. Действие, когда срабатывает событие клика мышью:

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!');
        }
    }
});

2. Когда у input меняются данные при вводе пользователем:

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);
    }
    }
});

Уже даже на этом примере Вы сможете наблюдать просадку jQuery по производительности.

3. Назначение класса элементу:

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'
    }
});

4. Изменение содержимого блока:

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: ''
    }

});

5. Переключение видимости\невидимости элемента:

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

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

<button id="button">Toogle</button>

(function() {

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

})();

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

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

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

new Vue({

    el: '#app',

    data: {
        visible: true
    }

});

6. Заполнение выпадающего списка select данными из массива:

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']
    }

});

7. Делаем AJAX-Запрос:

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

<span>List of users:</span>

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

(function() {

  var list = '';

    $.get('https://reqres.in/api/users', function(response) {

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

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

  });

})();

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

<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://reqres.in/api/users').then(response => {
            this.users = response.body.data;
        });
    }

});

Вы не сможете сделать AJAX-вызов от себя. Для этого разработан плагин — GitHub — pagekit/vue-resource: The HTTP client for Vue.js

Заключение

Теперь, когда Вы уже имеете определенное представление о Vue, Вы должны сами решать, где его применять. Лично я до сих пор использую jQuery, если понимаю, что он справится со всеми моими задачами. Подключаю Vue, если требуется решать дополнительные сложности или нужна капля реактивности. В конце концов, каждый лично выбирает под себя инструменты.

Источник: https://scotch.io