Представлять любой массив данных и переключаться между визуализациями
Vue.js - это фреймворк с большим потенциалом. Его легко освоить, он быстрый и легкий в байтах. Если вы новичок, можете начать со следующих статей:
Теперь я собираюсь продолжить свое путешествие по этой структуре с этой статьей о том, как создать приложение Vue, которое представляет текстовые данные, взятые из массива, и переключает его визуализацию из представления списка в представление сетки.
Окончательный результат вы найдете в моем репозитории.
Первые шаги
Прежде всего, давайте создадим три новых файла:
index.html
app.js
style.css
Добавьте в index.html
ссылку на таблицу стилей, на наш файл JavaScript и, конечно же, на Vue.js:
Затем представьте макет нашего приложения:
В нашем приложении будет:
- Кнопка для переключения между сеткой и списком
- Кнопка для переключения между различными массивами данных, чтобы показать, что приложение может отображать разные коллекции.
- Стандартное представление сетки, состоящее из имени столбца как первой строки и каждого элемента как строки
- Представление списка, где каждый элемент является элементом вертикальной коллекции с изображением
Просмотр сетки без Vue.js
Без Vue.js структура представления сетки может выглядеть так:
Как видите, я не использовал тег таблицы, а просто div
. Это помогает лучше переключать представление с помощью css
.
Это стиль:
Наиболее важные моменты, на которые следует обратить внимание:
grid-wrapper, display: table
grid-row, display: table-row
Это выглядит так:
Просмотр списка без Vue.js
Без Vue.js структура представления списка может выглядеть так:
Стиль довольно простой, просто сочетание display: grid
с flexbox
:
Это выглядит так:
Интеграция с Vue.js
Представляемый объект должен быть примерно таким:
Обратите внимание, что у него есть два массива:
columns
: только с названиями каждого свойства для отображенияdata
: массив объектов с такими же свойствами, как указано вcolumns
Пришло время реализовать наше приложение Vue:
Приложение Vue довольно простое:
isGridView
используется для скрытия / отображения макета сетки или макета списка.isBookData
используется для изменения представленных данных. (Вам это не понадобится в производстве; это только для целей этой статьи.)- Вы увидите все тестовые данные в полном коде в репозитории.
Интересной частью является структура HTML, которая представляет собой комбинацию:
v-bind:class
используется для переключения классов CSS списков / сеток на основеisGridViewCondition
v-for
используется для отображения значений массива и имен столбцовv-if
для скрытия / отображения некоторых макетов на основе выбранного представления
И вот окончательный результат: