PrimeVue - это инфраструктура пользовательского интерфейса, совместимая с Vue 3.
В этой статье мы рассмотрим, как начать разработку приложений Vue 3 с помощью PrimeVue.
Просмотр данных
Мы можем использовать DataView
компонент PrimeVue для добавления представлений данных в наше приложение.
Например, мы можем написать:
main.js
import { createApp } from "vue"; import App from "./App.vue"; import PrimeVue from "primevue/config"; import DataView from 'primevue/dataview'; import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions'; import Panel from 'primevue/panel'; import 'primevue/resources/primevue.min.css' import 'primevue/resources/themes/saga-blue/theme.css' import 'primeicons/primeicons.css' import 'primeflex/primeflex.css'; const app = createApp(App); app.use(PrimeVue); app.component("DataView", DataView); app.component("DataViewLayoutOptions", DataViewLayoutOptions); app.component("Panel", Panel); app.mount("#app");
App.vue
<template> <div> <DataView :value="cars" layout='grid'> <template #list="slotProps"> <div class="p-col-12"> <div class="car-details"> <div> <div class="p-grid"> <div class="p-col-12"> Vin: <b>{{ slotProps.data.vin }}</b> </div> <div class="p-col-12"> Year: <b>{{ slotProps.data.year }}</b> </div> <div class="p-col-12"> Brand: <b>{{ slotProps.data.brand }}</b> </div> <div class="p-col-12"> Color: <b>{{ slotProps.data.color }}</b> </div> </div> </div> </div> </div> </template> <template #grid="slotProps"> <div style="padding: 0.5em" class="p-col-12 p-md-3"> <Panel :header="slotProps.data.vin" style="text-align: center"> <div class="car-detail"> {{ slotProps.data.year }} - {{ slotProps.data.color }} </div> </Panel> </div> </template> </DataView> </div> </template> <script> export default { name: "App", data() { return { cars: [ { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" }, { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" }, { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" }, ], }; }, methods: {}, }; </script>
Мы устанавливаем свойство value
, чтобы заполнить его данными.
Слот list
используется для рендеринга элементов с атрибутом layout
, установленным в list
.
А слот grid
используется для рендеринга элементов, когда параметр layout
установлен на grid
.
Мы получаем входные данные со свойством slotProps.data
.
Слот header
позволяет нам заполнять содержимое заголовка.
А слот footer
позволяет нам заполнить нижний колонтитул:
<template> <div> <DataView :value="cars" layout="list"> <template #header>Header </template> <template #footer>Footer </template> <template #list="slotProps"> <div class="p-col-12"> <div class="car-details"> <div> <div class="p-grid"> <div class="p-col-12"> Vin: <b>{{ slotProps.data.vin }}</b> </div> <div class="p-col-12"> Year: <b>{{ slotProps.data.year }}</b> </div> <div class="p-col-12"> Brand: <b>{{ slotProps.data.brand }}</b> </div> <div class="p-col-12"> Color: <b>{{ slotProps.data.color }}</b> </div> </div> </div> </div> </div> </template> <template #grid="slotProps"> <div style="padding: 0.5em" class="p-col-12 p-md-3"> <Panel :header="slotProps.data.vin" style="text-align: center"> <div class="car-detail"> {{ slotProps.data.year }} - {{ slotProps.data.color }} </div> </Panel> </div> </template> </DataView> </div> </template> <script> export default { name: "App", data() { return { cars: [ { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" }, { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" }, { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" }, ], }; }, methods: {}, }; </script>
Заключение
Мы можем добавить представление данных в наше приложение Vue 3 с помощью DataView
компонента PrimeVue.