В этой статье мы расскажем о том, как заменить jQuery на VueJS.
Если вы из ИТ-индустрии, вы, возможно, уже знаете обо всей этой шумихе, которую VueJS приобрел в последнее время. Но вы можете не знать, что вы можете заменить JQuery на Vue.
Проще говоря, вы можете включить Vue так же, как вы включаете JQuery, без каких-либо шагов сборки.
1. Как заменить jQuery на VueJS
VueJS достаточно гибок, чтобы заменить JQuery непосредственно в HTML. Например, HTML-код с JQuery будет выглядеть так:
Заменить jQuery — Vuejs HTML
|
1
2
3
4
5
6
7
|
<main> <div class="thing"> <p>Some content here</p> </div></main></script> |
Но если вы хотите заменить JQuery на Vue в приведенном выше примере, тогда все, что вам нужно сделать, это изменить тег script, как показано ниже:
|
1
2
3
4
5
6
7
8
9
|
<main> <div class="thing"> <p>Some content here</p> </div></main><script> <...!Some Vue Code Here...></script> |
Лучшая часть
Вы можете подумать, что это сделает код более сложным, но на самом деле это не так. И в этой статье я докажу это на паре примеров.
Но перед этим давайте сначала немного узнаем о VueJS. Также давайте проверим, чем он отличается от JQuery. Это, как говорится, давайте погружаться прямо в!
2. Что такое VueJS?
VueJS, как вы уже знаете, это JavaScript Framework, используемый для фронт-энда разработки.
Это с открытым исходным кодом и постепенно адаптивный характер. Vue в основном используется для разработки пользовательских интерфейсов, таких как декларативный пользовательский интерфейс, отладка путешествий во времени, компоненты и так далее.
Хотя вы также можете использовать Vue в качестве среды веб-приложений для поддержки одностраничных приложений.
2.1 Чем VueJS отличается от JQuery?
JQuery — это, по сути, кроссплатформенная библиотека Javascript с открытым исходным кодом, созданная для упрощения сценариев HTML на стороне клиента.
Синтаксис JQuery может помочь вам легко перемещаться по документу, обрабатывать события, создавать анимацию, выбирать элементы DOM и разрабатывать Ajax-приложения.
Теперь, когда дело доходит до JQuery, большинство людей считают, что учить новичков просто. Но в действительности JQuery прост в освоении и использовании, если вы хорошо понимаете API JavaScript и DOM. И это совсем не просто для начинающих.
Vue, с другой стороны, популярен благодаря своей простоте обучения.
Давайте рассмотрим несколько примеров, чтобы увидеть, как вы можете заменить JQuery на Vue.
3. Как JQuery & Vue работают индивидуально
Когда вы используете JQuery, вы в основном добавляете швейцарский армейский нож в JavaScript для выполнения определенных задач веб-разработки.
Давайте возьмем простую веб-страницу в качестве примера.
HTML
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<header> header title </header> <div id="sidebar"> Some sidebar stuff </div> <p> Main site content here </p> <div id="loginForm"> A login form </div> |
Теперь, если мы будем использовать JQuery, нам нужно будет написать код для работы с заголовком, боковой панелью и формой входа.
3.1 Код реализации JQuery
Пример jQuery
|
1
2
3
4
5
6
7
8
9
|
$(document).ready(function() { $('header') <!--Something--> $('#sidebar') <!--Something--> $('#loginForm') <!--Something--> }); |
Теперь, если мы используем Vue, то сначала нам нужно будет указать, с чем мы пытаемся работать.
Например, предположим, что ваш клиент попросил вас добавить подтверждение в форму входа на своем веб-сайте.
Вот как может выглядеть код Vue:
3.2 Код реализации Vue
Теперь, если ваш клиент позже попросит вас добавить боковую панель, тогда ваш код Vue может выглядеть так:
Пример Vue
|
1
2
3
4
5
6
7
8
9
|
new Vue({el:'#loginForm',<!--Code Here-->});new Vue({el:'#sideBar',<!--Code Here-->}); |
Как вы можете видеть, мы добавили код приложения 2 Vue в JavaScript. Итак, кажется ли это усложнит ситуацию, когда мы добавим больше функциональности?
Хотя это может выглядеть так, но это не так. Фактически, Vue дает нам преимущество инкапсуляции.
Например, если ваш клиент еще добавляет еще один запрос на добавление чего-то большего, то разделенный код Vue может дать вам уверенность в том, что небольшие ошибки не наступят друг на друга.
Давайте рассмотрим другой пример, чтобы узнать, как вы можете использовать Vue вместо JQuery.
4. Поиск элементов в DOM
Допустим, у нас есть кнопка, и когда она нажата, мы хотим, чтобы произошло определенное действие.
Давайте посмотрим, как мы пишем код в JQuery.
Пример jQuery
|
01
02
03
04
05
06
07
08
09
10
|
<button id="myButton">Click Me! </button><script>$(document).ready(function() { $('#myButton').click(function() { alert(1); });});</script> |
Теперь давайте сравним это с кодом Vue.
Пример Vue
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<div id="app"> <button v-on:click="doSomething">Click Me! </button></div><script>const app = new Vue({ el:'#app', methods: { doSomething: function() { alert(1); } }});</script> |
Код Vue определенно выглядит немного длиннее, и я не собираюсь с вами спорить об этом.
Но если вы посмотрите еще раз, то увидите, что разметка имеет прямую связь между действием и функцией, которая будет вызываться при событии click.
В Vue гораздо проще понять, что происходит. Давайте рассмотрим последний пример, чтобы узнать, как заменить JQuery на Vue.
5. Чтение и запись переменных формы
Работа с формами, вероятно, является наиболее распространенной вещью, которую мы, веб-разработчики, можем сделать с помощью JavaScript.
Давайте возьмем простой пример JQuery для чтения пары полей формы.
Пример jQuery
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<form> <input type="number" id="first"> + <input type="number" id="second"> = <input type="number" id="sum"> <button id="sumButton">Sum</button></form><script>$(document).ready(function() { let $first = $('#first'); let $second = $('#second'); let $sum = $('#sum'); let $button = $('#sumButton'); $button.on('click', function(e) { e.preventDefault(); let total = parseInt($first.val(),10) + parseInt($second.val(),10); $sum.val(total); });});</script> |
Как видите, приведенный выше код JQuery читает и записывает с помощью метода Val ().
В результате мы получаем все три элемента текстового поля и кнопку из DOM.
Теперь давайте выполним ту же задачу, используя Vue.
Пример jQuery
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<form id="myForm"> <input type="number" v-model.number="first"> + <input type="number" v-model.number="second"> = <input type="number" v-model="sum"> <button @click.prevent="doSum">Sum</button></form><script>new Vue({ el: '#myForm', data: { first: 0, second: 0, sum: 0 }, methods: { doSum: function() { this.sum = this.first + this.second; } }})</script> |
Заметили что-то в приведенном выше коде Vue? Ну, Vue предлагает несколько интересных ярлыков.
Для начала, через v-модель, Vue создает двустороннюю привязку данных между значениями полей в DOM.
Измените форму и обновления данных. Измените данные и форму обновлений.
Лично мне больше всего нравится в Vue отсутствие селекторов запросов в JavaScript и то, как HTML-код выглядит намного чище и понятнее с точки зрения того, что он делает.
6. Заключение
Если вы опытный веб-разработчик, который знает, как использовать JQuery и хочет продолжать его использовать, то это нормально.
Но это не меняет того факта, что Vue — следующий большой шаг в мире JavaScript. Он поддерживает создание сложных веб-приложений и обладает огромным потенциалом для полной замены JQuery в JavaScript.
При этом, если у вас все еще есть какие-либо сомнения относительно того, как использовать Vue вместо JQuery, дайте мне знать в комментариях ниже.