Структура Vue-компонента в Quasar
Quasar построен поверх Vue.js, что обеспечивает полную совместимость с компонентной системой Vue. Каждый компонент в Quasar является расширением стандартного Vue-компонента с добавлением специфических возможностей для работы с UI, адаптивностью, анимациями и интеграцией с Quasar-плагинами.
Основные секции компонента
Vue-компонент в Quasar состоит из трёх основных частей:
- Template — визуальное представление компонента.
- Script — логика и состояние компонента.
- Style — стилизация и оформление компонента.
Template
Секция содержит HTML-разметку
компонента и служит для описания интерфейса. Quasar предоставляет
множество встроенных UI-компонентов, таких как:
q-btn— кнопки с разнообразными стилями и анимациями.q-input— поля ввода с поддержкой валидации.q-card— карточки для организации контента.q-layout,q-header,q-footer— элементы макета страницы.
Пример структуры template:
Пример компонента
Контент карточки
Ключевой особенностью является использование
специализированных пропсов Quasar для управления
поведением компонентов. Например, elevated,
padding, align и color позволяют
минимизировать кастомную CSS-работу.
Script
Секция
Особенности:
useQuasar()предоставляет доступ к глобальному API Quasar для уведомлений, диалогов, темизации.- Реактивные переменные создаются через
refилиreactive. - Методы компонента определяются как обычные функции в