@senselessV7

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

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

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

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

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

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

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


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

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

Как я понимаю, подключение jquery плагинов не избежать, как и прочих vue компонентов?
  • Вопрос задан
  • 2099 просмотров
Решения вопроса 1
  • dpr
    @dpr
    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
  • mountpoint
    @mountpoint
    null
    Мне кажется, что фреймворки подойдут для более сложных приложений, нежели лендинги. В большом приложении есть много компонентов, которе часто используются в нескольких местах, есть роутинг и много других плюшек. Если это одностраничный лендинг, я бы не пихал туда никакой фреймворк. Просто не вижу смысла
    Ответ написан
  • Krasnodar_etc
    @Krasnodar_etc
    little front
    Нет, это, конечно, абсолютно реально сделать и на Vue, не подключая jQ всякие... только нахрена? Всю суть фреймворков понимаешь, когда делаешь SPA/много обращаешься к серверу/... Зачем это на лендосе? Тут кода-то строчек 200 написать надо.

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

    Вобщем, учиться можно на любом проекте. В процессе поймете границы применимости фреймворка и т.д.
    Ответ написан
  • HeadOnFire
    @HeadOnFire
    WordPress Evangelist
    Конкретно в перечисленном вами примере нет совершенно ничего сложного и я вообще не вижу необходимости использовать какой-либо фреймворк. Все можно легко решить ванильным js, часть вообще чистым CSS.

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

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

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

Войти через TM ID
Похожие вопросы
EVEN Foundation Москва
от 110 000 до 140 000 руб.
Averia Electronics Волгоград
от 50 000 до 100 000 руб.