Vue шаг за шагом. Постраничный вывод данных. Пример#5
Постраничный вывод данных
Продолжая тему разделения полномочий и обязанностей в приложении, будут созданы компоненты по следующему принципу: Родительский компонент будет взаимодействовать с backend-ом, работать с данными и отдавать их дочерним компонентам. Дочерние компоненты будут отображать данные и при необходимости выполнить какие либо операции с данными, будут передавать «родителю» события, но сами изменять данные не будут. Родитель получив событие будет выполнять операции с данными и раздавать их дочерним компонентам.
В данном примере компонент client работает с данными, а таблица вынесена в отдельный компонент с именем client-table. Таким образом родительский компонент client работает с данными, дочерний компонент client-table только их отображает.
Обратите внимание, что компонент таблицы создан на базе миксина table. В миксине table собрано все для постраничного вывода, сортировки, фильтрации и всего, что нам потребуется в табличном выводе данных. В данный момент для описания компоненты таблицы требуется указать только миксин и описать шаблон.
Также создан компонент пагинации. Пагинация пока только на стороне клиента. Т.е. загружаются все данные и выводятся постранично. Методы работы пагинации с участием сервера будут рассмотрены когда дойдем до реального бекенда. При этом компонентный подход позволит быстро решить эту задачу.
Добавлен компонент v-style для создания стилей в шаблонах компонентов. При использовании систем сборки, мы будем использовать vue компоненты и надобность в компоненте v-style отпадет.
Таблица получает от родителя данные:
:rows="data"
Возвращает события:
@read="read_front($event)"
@update="update_front($event)"
@delete="delete_front($event)"
Таким образом компонент таблицы только отображает данные, но не изменяет их. От таблицы родительскому компоненту приходят события, которые сообщают какие действия с какими данными нужно выполнить. При таком подходе есть возможность строить очень сложные, различного рода интерфейсы, где дочерние компоненты только отображают данные в разнообразнейшем виде, а фактическим изменением занимается только родитель. Это позволит в дальнейшем быстрее и с меньшими усилиями модифицировать интерфейсы. А если изменится обработка данных или формат взаимоотношения с backend-ом, то не трогать компоненты, которые занимаются отображением данных.
Вычисляемые свойства
Обратите внимание, что в миксине table используются computed (вычисляемые) свойства. Вычисляемые свойства следует применять всегда, когда нужно обработать входные данные. Фактически вычисляемое свойство — это функция. Но в отличии от методов результат вычисляемого свойства кешируется. Пересчитывается вычисляемое свойство только при изменении данных. Таким образом, при многократном обращении к вычисляемому свойству, будет возвращаться однажды вычисленный результат. В случае если применять методы, вычисления будут выполнятся всякий раз при обращении к нему.
Ссылки
Вычисляемые свойства: https://ru.vuejs.org/v2/guide/computed.html
Резюме
В этом примере рассмотрен способ создания компоненты для постраничного вывода данных на основе миксина. Так же рассмотрен пример взаимодействия между родительской и дочерней компонентами.
В следующем примере
Сортировка столбцов в таблице. Поиск/фильтрация данных. Библиотека vue-material, подключение и первое применение.
Смотри также:
- Vue. Vue-router
- Vue. Свойство data. Основы компонент
- Vue. CRUD. Работа с данными
- Vue. Mixins (Примеси)
- Vue. computed свойства. Постраничный вывод данных
- Vue. Сортировка, поиск данных в таблицах
- Vue. Таблица - трансформер под настольные и мобильные версии
- Vue. Стандартная таблица. Минимизируем код
- Vue. Динамическая загрузка компонент
- Vue. Диалоги и Notifications
- Vue.Стандартный компонент для редактирования данных
- Vue. Разнообразие из кирпичиков
- Flask + Vue. Финальный пример
Недавні записи
- CRSF to PWM
- U-FOC PC Monitor для Chrome browser
- Фільтрація Back-EMF. Безсенсорні BLDC мотори
- Text to speech. Українська мова
- LCD Display ST7567S (IIC)
- Розпізнавання мови (Speech recognition)
- Selenium
- Комп'ютерний зір (Computer Vision)
- Деякі думки про точність вимірювань в електроприводі
- Датчики Холла 120/60 градусів
Tags
bluetooth bldc nodemcu tim max1674 eeprom led avr hih-4000 brushless programmator mpu-6050 usart examples smd sensors piezo rs-232 motor html git meteo bme280 gps bkp encoder java-script raspberry-pi websocket esp8266 books solar eb-500 atmega mongodb gpio sms css pwm ethernet pmsm st-link capture dma stm32 watchdog lcd rfid python uart battery dc-dc soldering timer ssd1331 wifi nvic dht11 docker i2c 3d-printer adc bmp280 flash rtc servo barometer remap exti mpx4115a web flask ngnix usb displays foc ssd1306 mpu-9250 options
Архіви