Как легко перейти с jQuery на VUE?

Вопрос вытекает из предыдущего вопроса об актуальности js фрймворков -

Javascript фреймворки — дань моде или быстрота и у...

Судя по ответам, js фреймворки - это удобно, быстро, ничего лишнего - это круче jquey!

---------------------------------------------------------------------------------------------

Возьмем одну ср. статистическую страницу, к примеру простой лендинг, которая состоит из:

  1. Навигация. При скролле или клике на пункт меню происходит прокрутка к соответствующей секции, пункту присваивается класс active
  2. Аккордеон.
  3. Табы.
  4. Галлерея. Для просмотра изображений используется fancybox плагин
  5. Слайдер. Тоже плагин
  6. Форма обратной связи. Необходима настройка валидации (validation плагин), отправка формы. Тут есть небольшое решение


Это уже если не учитывать анимацию и прочие мелочи.

Есть ли какие-нибудь уроки или статьи по реализации таких базовых элементов на странице с помощью vue?

Как я понимаю, подключение jquery плагинов не избежать, как и прочих vue компонентов?
  • Вопрос задан
  • 3370 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
Конкретно здесь проще, и я бы даже сказал, нужно сделать страницу на jquery =))

------------------------

Если же вас интересует как в принципе заменить jquery на vue, то постараюсь ответить.

1. Как и в случае jquery, ищем подключаем подходящий пакет. Например этот.

2. Аккордеон реализуется вручную парой строчек

<div>
  <h2 @click="toggle"></h2>
  <div v-if="stateOpen">
    Скрытое содержимое
  </div>
</div>

{
  data() {
    return {
      stateOpen: false,
    }
  },
  methods: {
    toggle(){
      this.stateOpen = !this.stateOpen;
    }
  }
}

Анимации раскрытия по вкусу, с помощью обёртки transition

3. Аналогично предыдущему пункту. 10 минут на реализацию.
4. Аналогично первому пункту.
5. Аналогично первому пункту.
6. Блин, ну тут то же самое =)) Мне нравится этот пакет: vue-form

Вот и всё. jQuery можно не подключать.
Ответ написан
Пригласить эксперта
Ответы на вопрос 7
Мне кажется, что фреймворки подойдут для более сложных приложений, нежели лендинги. В большом приложении есть много компонентов, которе часто используются в нескольких местах, есть роутинг и много других плюшек. Если это одностраничный лендинг, я бы не пихал туда никакой фреймворк. Просто не вижу смысла
Ответ написан
Комментировать
zooks
@zooks
Frontend
Для лендосов рекомендую этот фреймворк:
vanilla-js.com
Ответ написан
Krasnodar_etc
@Krasnodar_etc
avito front
Нет, это, конечно, абсолютно реально сделать и на Vue, не подключая jQ всякие... только нахрена? Всю суть фреймворков понимаешь, когда делаешь SPA/много обращаешься к серверу/... Зачем это на лендосе? Тут кода-то строчек 200 написать надо.

Вы сделали правильный вывод про фреймворки, но так далеко не уедешь. Откройте оф. сайт Vue , почитайте инфу о нём. А лучше пройдите какой-нибудь туториал , тогда вы в разы лучше представлять себе фреймворки будете.
Имхо, лучший туториал для новичка - у Реакта . Это оч просто, часа 3 займёт.
Ответ написан
@devunion
Официальная документация достаточно простая и понятная. Для простого лендинга, наверное, нет смысла тащить фреймворк. Разве что в образовательных целях. Польза от фреймвокра становится заметной, если нужно переиспользовать компоненты в разных местах. Или появляется какая-нибудь более сложная логика на странице. К примеру, визуальный конструктор нужного продукта или что-то в этом духе. В лендинге нет особого смысла бить страницу на кучу компонентов типа Header, Footer, которые будут использоваться один раз. Их можно просто сложить в разные файлы если хотите немного структурировать проект и склеить целую страницу в процессе сборки. Если компонентов много (к приеру, какие-нибудь продукты), тогда уже можно думать про компоненты.

Вобщем, учиться можно на любом проекте. В процессе поймете границы применимости фреймворка и т.д.
Ответ написан
Комментировать
jaxxreal
@jaxxreal
Fullstack Developer
Например прочитав эту замечательную статью https://www.smashingmagazine.com/2018/02/jquery-vu...
Ответ написан
Комментировать
HeadOnFire
@HeadOnFire
PHP, Laravel & WordPress Evangelist
Конкретно в перечисленном вами примере нет совершенно ничего сложного и я вообще не вижу необходимости использовать какой-либо фреймворк. Все можно легко решить ванильным js, часть вообще чистым CSS.

Пожалуй, единственное исключение - если бюджет более чем скромен, сроки небольшие, надо просто сделать и забыть. Тогда это может быть экономией.

Что касается фреймворков в целом, и jQuery тоже - держите в голове, что цифры размера этих библиотек "gzipped and minified" это очень обманчиво. Они влияют исключительно на скорость загрузки этих скриптов, а этим можно даже пренебречь. При использовании протокола HTTP/2 тем более. Проблема с ними начинается позже - когда браузер их разгзипит и начнет анализировать. Вот здесь происходит существенная трата времени, которая тормозит отрисовку страницы. Тот же jQuery последний в неупакованном виде - почти 260Кб кода, который нужно распарсить и выполнить. Это весьма ресурсоемко.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы