Забываем о jQuery с Vue.js (Часть 2)
Тогл(переключение между двумя состояниями) CSS классов
Далее мы рассмотрим тогл CSS классов, так как это самая распространённая задача для jQuery.
jQuery:
//*.html
<div id="app">
<button aria-pressed="false">Затогли меня</button>
<p class="toggle">Иногда мне нужно быть иначе стилизованным</p>
</div>//*.css
.red {
color: red;
}//*.js
$(function() {
$('button').click(function(e) {
$('.toggle').toggleClass('red');
$(this).attr('aria-pressed', ($(this).attr('aria-pressed') == "false" ? true : false));
});
});
Vue:
//*.html
<div id="app">
<button @click="active = !active" :aria-pressed="active ? 'true' : 'false'">Затогли меня</button>
<p :class="{ red: active }">Иногда мне нужно быть иначе стилизованным</p>
</div>//*.js
new Vue({
el: '#app',
data: {
active: false
}
})
И опять в версии на jQuery мы храним состояние в DOM. У элемента есть класс, и jQuery принимает решение в зависимости от наличия класса, которое она проверяет отправляя запросы DOM. В версии Vue , мы храним условие, оно будет изменяться в зависимости от состояния. Мы не запрашиваем информацию из DOM, мы храним её самостоятельно.
Мы храним свойство active внутри data, кнопка переключает условие, и класс .red меняет свое состояние базируясь на условии.
Скорее всего вы уже заметили, что опасение о том, что с Vue.js придётся писать больше кода полностью развеиваются.
Скрытие и раскрытие
Типичной задачей для jQuery является скрытие и раскрытие чего-либо. jQuery отлично справлялась с тем, чтобы эта задача была как можно более простой. Давайте сравним реализацию с Vue.
jQuery:
//*.html
<div id="app">
<button type="button" id="toggle" aria-expanded="false">
Toggle Panel
</button>
<p class="hello">hello</p>
</div>//*.js
$(function() {
$('#toggle').on('click', function() {
$('.hello').toggle();
$(this).attr('aria-expanded', ($(this).attr('aria-expanded') == "false" ? true : false));
});
});
Vue:
//*.html
<div id="app">
<button @click="show = !show" :aria-expanded="show ? 'true' : 'false'">
Toggle Panel
</button>
<p v-if="show">hello</p>
</div>//*.js
new Vue({
el: '#app',
data: {
show: true
}
})
И jQuery и Vue отлично справляются с упрощением задачи, но есть несколько причин, чтобы выбрать Vue для тогла. У Vue есть инструмент под названием Vue devtools. он совсем непохож на Chrome devtools, он даёт нам понять какие процессы Vue выполняются.
В обоих версиях jQuery и Vue мы можем наблюдать как элемент “прячется” и появляется. Но что если что-то пойдёт не по плану? Чтобы начать процесс дебагинга с jQuery нам понадобилось бы добавить console.log-и или расставить точки остановки, чтобы разобраться с проблемой.
Нет ничего плохого в том, чтобы использовать console.log-и, но с помощью Vue devtools мы можем наблюдать за выполнением кода в реальном времени. В гифке ниже можно заметить, что после нажатий на кнопку Vue devtools обновляет состояние true/false соответственно. Если DOM когда-либо отработает не так как мы этого ожидаем, мы все еще сможем проследить изменения в Vue в реальном времени. Это значительно облегчает процесс дебагинга приложения.
Так же v-if легко изменяется и под другие условия. Я могу использовать v-show вместо v-if если то, состояние чего я изменяю, будет скрываться и показываться часто: v-if полностью извлечёт элемент, в то время как v-show просто изменит свойство visibility. Это различие является очень важным, так как изменять visibility требует меньше производительных мощностей, чем полностью изымать/вставлять элемент DOM. Я могу показывать или прятать что-либо базируясь на множестве условий. Это место как раз вызывает путаницу в jQuery, стучаться к DOM в нескольких местах и координировать их соответственно. Ниже показан пример координирования изменений базируясь на присутствии ввода информации пользователем:
//*.html
<div id="app">
<label for="textarea">Какой у тебя любимый вид шаурмы?</label>
<textarea id="textarea" v-model="tacos"></textarea>
<br>
<button v-show="tacos">Дай нам знать!</button>
</div>//*.js
new Vue({
el: '#app',
data() {
return {
tacos: ''
}
}
})
jQuery:
//*.html
<div id="app">
<label for="textarea">Какой у тебя любимый вид шаурмы?</label>
<textarea id="textarea"></textarea>
<br>
<button v-show="tacos">Дай нам знать!</button>
</div>//*.js
$(function() {
var button = $('.button');
var textarea = $('#textarea'); button.hide();
textarea.keyup(function() {
if (textarea.val().length > 0) {
button.show();
} else {
button.hide();
}
})
});
Контролирование форм
Традиционной задачей для jQuery является отправка данных из формы с помощью AJAX, поэтому нам следует рассмотреть и это. На самом деле Vue не имеет встроенных инструментов по типу AJAX; В основном при написании Vue кода используют что то типа Axios (JavaScript библиотека для создания HTTP запросов).
Этот пример немного сложнее остальных.
План действий:
- Кнопка будет серой до начала ввода в поле формы, потом она получит класс “active” и станет синей;
- Когда мы подтверждаем отправку информации из формы, мы приостановим загрузку страницы.
- Когда данные будут отправлены, мы отобразим ответ сервера на странице.
jQuery:
//*.html
<div id="app">
<form action="/">
<div>
<label for="name">Name:</label><br>
<input id="name" type="text" name="name" required/>
</div>
<div>
<label for="email">Email:</label><br>
<input id="email" type="email" name="email" required/>
</div>
<div>
<label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br>
<textarea id="caps" name="caps" required></textarea>
</div>
<button class="submit" type="submit">Submit</button>
<div>
<h3>Response from server:</h3>
<pre class="response"></pre>
</div>
</form>
</div>//*.js
$(function() {
var button = $("button");
var name = $("input[name=name]");name.keyup(function() {
if (name.val().length > 0) {
button.addClass('active');
} else {
button.removeClass('active');
}
});$("form").submit(function(event) {
event.preventDefault();//получение данных из формы
var formData = {
name: $("input[name=name]").val(),
email: $("input[name=email]").val(),
caps: $("input[name=caps]").val()
};// отправка данных, обработка ответа
$.ajax({
type: "POST",
url: "//jsonplaceholder.typicode.com/posts",
data: formData,
dataType: "json",
encode: true
}).done(function(data) {
$(".response")
.empty()
.append(JSON.stringify(data, null, 2));
});
});
});
Код на строчках с 2 по 10 отвечает за смену класса кнопки, как мы уже делали ранее. Мы отправляем параметр названый “event” в форму, и потом пишем event.preventDefault() предотвращая обновление страницы. Далее мы собираем данные из полей формы, отправляем их, и посылаем ответ от сервера в метод .done() AJAX запроса.
Vue:
//*.html
<div id="app">
<form @submit.prevent="submitForm">
<div>
<label for="name">Name:</label><br>
<input id="name" type="text" v-model="name" required/>
</div>
<div>
<label for="email">Email:</label><br>
<input id="email" type="email" v-model="email" required/>
</div>
<div>
<label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br>
<textarea id="caps" v-model="caps" required></textarea>
</div>
<button :class="[name ? activeClass : '']" type="submit">Submit</button>
<div>
<h3>Response from server:</h3>
<pre>{{ response }}</pre>
</div>
</form>
</div>//*.js
new Vue({
el: '#app',
data() {
return {
name: '',
email: '',
caps: '',
response: '',
activeClass: 'active'
}
},
methods: {
submitForm() {
axios.post('//jsonplaceholder.typicode.com/posts', {
name: this.name,
email: this.email,
caps: this.caps
}).then(response => {
this.response = JSON.stringify(response, null, 2)
})
}
}
})
В версии Vue мы решаем какие поля формы заполнять, и “прикрепляем” их с помощью v-model. Мы проверяем наличие имени чтобы тоглить класс. Вместо отправки параметра event и event.preventDefault(),всечто нам потребуется написать - это @submit.prevent на нашем элементе формы, он сделает все за нас. Для отправки запроса мы используем Axios и сохраняем ответ сервера внутри сущности Vue.
Для версии готового продукта нам следует добавить валидацию, отлов о, и написать тесты, но в этом маленьком примере можно заметить каким аккуратным и чистым может быть код Vue.
Вывод
Вполне нормально использовать jQuery! Смысл этой статьи показать что Vue предоставляет отличную абстракцию для небольших сайтов без излишеств. Vue сопоставима по размеру, и достаточно проста для изменения кусочков готового функционала без переписывания структуры HTML в JavaScript и адаптации систем построения проектов.
Vue является очень гибкой библиотекой, поэтому очень легко подстроится под проекты на всех этапах, начиная с самого начала до разрастания до большого проекта.
Источник — https://www.smashingmagazine.com/2018/02/jquery-vue-javascript
