Использование Cash с Vue

Cash — это лёгкая библиотека, обеспечивающая функциональность, схожую с jQuery, но с минимальным размером. Для интеграции с Vue достаточно подключить её через npm:

npm install cash-dom

После установки импорт можно выполнить в любом компоненте Vue:

import $ from 'cash-dom';

Важно понимать, что Cash работает напрямую с DOM, а Vue управляет виртуальным DOM. Следует использовать Cash только после того, как компоненты смонтированы, чтобы избежать несоответствий между виртуальным и реальным DOM.

export default {
  mounted() {
    $('.btn').on('click', () => {
      console.log('Кнопка нажата');
    });
  }
}

Работа с элементами

Cash предоставляет знакомый интерфейс для выбора элементов и выполнения действий с ними:

$('.selector') — выбор элементов по CSS-селектору.
.addClass('class') / .removeClass('class') — работа с классами.
.css('property', 'value') — изменение стилей.
.attr('name', 'value') — работа с атрибутами.
.html() / .text() — доступ к содержимому элементов.

Пример динамического изменения стиля после события Vue:

export default {
  mounted() {
    $('#change-color').on('click', () => {
      $('.box').css('background-color', 'lightblue');
    });
  }
}

События и Cash

Cash облегчает работу с событиями в Vue, когда требуется манипуляция с DOM вне реактивной системы:

.on('event', handler) — добавление обработчика.
.off('event') — удаление обработчика.
.trigger('event') — программный вызов события.

Для динамических элементов важно использовать делегирование:

$(document).on('click', '.dynamic-btn', function() {
  console.log('Динамическая кнопка нажата');
});

Анимации и эффекты

Cash поддерживает базовые анимации:

.fadeIn(duration) / .fadeOut(duration)
.slideUp(duration) / .slideDown(duration)
.toggleClass('class', duration) — анимированное переключение класса

Пример анимации при клике:

export default {
  mounted() {
    $('#toggle-box').on('click', () => {
      $('.box').fadeToggle(500);
    });
  }
}

Интеграция с реактивностью Vue

Прямое манипулирование DOM через Cash может конфликтовать с реактивной системой Vue. Для корректной работы:

Использовать Cash внутри хуков mounted или updated.
Не изменять элементы, которые управляются Vue через v-if, v-for или :class.
Для сложной анимации лучше применять CSS-транзишены Vue и вызывать Cash только для дополнительных эффектов.

export default {
  data() {
    return {
      visible: false
    };
  },
  mounted() {
    this.$watch('visible', (newVal) => {
      if (newVal) {
        $('.box').fadeIn(300);
      } else {
        $('.box').fadeOut(300);
      }
    });
  }
}

AJAX-запросы с Cash

Cash поддерживает упрощённые AJAX-вызовы через метод $.ajax:

$.ajax({
  url: '/api/data',
  method: 'GET',
  success: (response) => {
    console.log(response);
  },
  error: (err) => {
    console.error(err);
  }
});

Важно учитывать, что Vue имеет собственные способы работы с HTTP (через fetch или axios), поэтому использование Cash для AJAX оправдано только при необходимости лёгкой интеграции с существующим кодом.

Примеры совместного использования Vue и Cash

Динамическое создание элементов

export default {
  mounted() {
    $('#add-item').on('click', () => {
      const newItem = $('<li>').text('Новый элемент');
      $('#list').append(newItem);
    });
  }
}

Работа с формами

export default {
  mounted() {
    $('#submit-btn').on('click', (e) => {
      e.preventDefault();
      const formData = $('#my-form').serializeArray();
      console.log(formData);
    });
  }
}

Использование делегирования для динамических компонентов

export default {
  mounted() {
    $('#container').on('click', '.child-btn', function() {
      $(this).toggleClass('active');
    });
  }
}