Если Вы еще не слышали про 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