vue vs jq

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 намного проще, чем может показаться на первый взгляд. Итак, установка этой библиотеки выглядит следующим образом:

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

Что такое 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:

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

Примеры Vue и jQuery

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

События

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

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

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

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

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

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

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

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

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

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

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

jQuery: https://jsfiddle.net/ccLffhot

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

В поисках шаблона для сайта?