Как заменить jQuery на Vue

Хотите узнать Vue.js с нуля? Получите полную коллекцию книг Vue, охватывающих основы, проекты, советы и инструменты и многое другое с SitePoint Premium. Присоединяйтесь сейчас всего за $ 14,99 / месяц .

Я готов поспорить, что есть много разработчиков, которые все еще тянутся к jQuery, когда им поручено создавать простые приложения. Часто нам нужно добавить интерактивность на страницу, но поиск JavaScript-инфраструктуры кажется излишним — со всеми дополнительными килобайтами, шаблонами, инструментами сборки и компоновщиками модулей. Включение jQuery из CDN кажется легким делом.

В этой статье я хотел бы попытаться убедить вас, что использование Vue.js (далее — Vue), даже для относительно простых проектов, не должно быть головной болью и поможет вам написать лучше код быстрее. Мы возьмем простой пример, кодируем его в jQuery, а затем воссоздаем его в Vue шаг за шагом.

Что мы строим

В этой статье мы собираемся создать базовый онлайн-счет с использованием этого шаблона с открытым исходным кодом от Sparksuite . Надеюсь, это должно внести освежающие изменения в еще один список дел и обеспечить достаточную сложность, чтобы продемонстрировать преимущества использования чего-то вроде Vue, в то же время оставаясь простым для понимания.

Мы собираемся сделать это интерактивным, предоставив входные данные для товара, цены за единицу и количества, а также автоматически пересчитав столбец Цена при изменении одного из значений. Мы также добавим кнопку для вставки новых пустых строк в счет-фактуру и поле Итого, которое будет автоматически обновляться при редактировании данных.

Я изменил шаблон так, чтобы HTML-код для одной (пустой) строки теперь выглядел так:

<tr class="item"> <td><input value="" /></td> <td>$<input type="number" value="0" /></td> <td><input type="number" value="1" /></td> <td>$0.00</td> </tr> 

JQuery

Итак, прежде всего, давайте посмотрим, как мы можем сделать это с помощью jQuery.

 $('table').on('mouseup keyup', 'input[type=number]', calculateTotals); 

Мы присоединяем слушателя к самой таблице, которая будет выполнять функцию calcTotals при изменении значений « Стоимость единицы» или « Количество» :

 function calculateTotals() { const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get(); const total = subtotals.reduce((a, v) => a + Number(v), 0); $('.total td:eq(1)').text(formatAsCurrency(total)); } 

Эта функция ищет все строки элементов в таблице и проходит по ним, передавая каждую строку в функцию calcSubtotal, а затем суммируя результаты. Эта total затем вставляется в соответствующее место в счете.

 function calculateSubtotal(row) { const $row = $(row); const inputs = $row.find('input'); const subtotal = inputs[1].value * inputs[2].value; $row.find('td:last').text(formatAsCurrency(subtotal)); return subtotal; } 

В приведенном выше коде мы собираем ссылку на все <input> в строке и умножаем второе и третье вместе, чтобы получить промежуточный итог. Это значение затем вставляется в последнюю ячейку в строке.

 function formatAsCurrency(amount) { return `$${Number(amount).toFixed(2)}`; } 

У нас также есть небольшая вспомогательная функция, которую мы используем, чтобы убедиться, что как промежуточные итоги, так и итоги отформатированы с двумя десятичными разрядами и имеют префикс с символом валюты.

 $('.btn-add-row').on('click', () => { const $lastRow = $('.item:last'); const $newRow = $lastRow.clone(); $newRow.find('input').val(''); $newRow.find('td:last').text('$0.00'); $newRow.insertAfter($lastRow); $newRow.find('input:first').focus(); }); . $('.btn-add-row').on('click', () => { const $lastRow = $('.item:last'); const $newRow = $lastRow.clone(); $newRow.find('input').val(''); $newRow.find('td:last').text('$0.00'); $newRow.insertAfter($lastRow); $newRow.find('input:first').focus(); }); 

Наконец, у нас есть обработчик кликов для нашей кнопки « Добавить строку» . Здесь мы выбираем последнюю строку элемента и создаем дубликат. Входные данные клонированной строки устанавливаются в значения по умолчанию и вставляются как новая последняя строка. Мы также можем быть добрыми к нашим пользователям и установить фокус на первый ввод, готовый к тому, чтобы они начали печатать.

Вот завершенная демонстрация jQuery:

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> 

 const app = new Vue({ el: 'table' }); 

 const app = new Vue({ el: 'table', data: { items: [ { description: 'Website design', quantity: 1, price: 300 }, { description: 'Hosting (3 months)', quantity: 1, price: 75 }, { description: 'Domain name (1 year)', quantity: 1, price: 10 }, ] } }); 

 <tr class="item" v-for="item in items"> </tr> 

 <td><input v-model="item.description" /></td> <td>$<input type="number" v-model="item.price" /></td> <td><input type="number" v-model="item.quantity" /></td> <td>${{ item.price * item.quantity }}</td> 

 const app = new Vue({ // ... methods: { myMethod() {} }, // ... }) 

 methods: { addRow() { this.items.push({ description: '', quantity: 1, price: 0 }); }, }, 

 <button class="btn-add-row" @click="addRow">Add row</button> 

 const app = new Vue({ // ... computed: { total() { return this.items.reduce((acc, item) => acc + (item.price * item.quantity), 0); } } }); 

 <tr class="total"> <td colspan="3"></td> <td>Total: ${{ total }}</td> </tr> 

 const app = new Vue({ // ... filters: { currency(value) { return value.toFixed(2); } } }); 

 <td>Total: ${{ total | currency }}</td>