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