Если что-то из нижеследующего вам, ну, совершенно не понятно откуда взялось, то стоит прочитать предыдущую публикацию по данной тематике здесь: https://www.liveinternet.ru/users/flash_a/post437914082/. Заодно скачать обучающие примеры оттуда же будет не лишним.

На следующем шаге изучения фреймворка "Vue.js" мы разберём составление списков, поскольку сами по себе списки предполагают использование циклических конструкций. И это ещё далеко не высший пилотаж, но уже что-то посложнее вывода простого сообщения с приветствием.

Помимо циклических конструкций здесь нам предстоит разобраться и с другими важными элементами программирования:

- массивами;
- записями;
- форматом текстовой базы данных "json";
- тегами, отвечающими за списочные структуры.

Начнём с самого простого и интуитивно понятного из этого перечня. Если вспомните тот же Microsoft Office Word, то списки в нём бывают как нумерованными, таки и маркированными.

Нумерованные списки используются там, где важно отразить приоритет упоминаемых элементов, их последовательность или количество; маркированные же списки - это все остальные наборы данных.

У наших элементов в примерах, конечно же будут порядковые номера, поскольку они являются элементами базы данных, которые должны отличаться друг от друга хоть чем-то уникальным, потому, пускай имеет место искусственный уникальный идентификатор. Впрочем, об этом позже. Не в данной публикации уж точно. Пока мы считаем, что совершенно незнакомы с какой-либо базой данных. Забыли. Никакой базы данных нет и в помине.

Для примера составим маркированный список. Сначала вручную, чтобы освежить в памяти HTML (или же продолжить его изучение). Зная, как прописываются списки вручную, позже в красках можно будет понять и всю прелесть использования возможностей фреймворка "Vue.js".

За основу всё равно берём составленную ранее страничку "index.html" (из предыдущей публикации). Да, она будет изменена до неузнаваемости, но не придётся повторно прописывать базовые конструкции, обуславливающие гипертекстовую разметку в текстовом файле. Вместе с тем у нас уже будет подключен модуль "Vue.js".

Итак, создадим сначала маркированный список, содержащий первое сообщение (message1). Заменим теги абзаца/параграфа (р) на теги маркированного списка (ul), а также заключим первое сообщение в теги элемента списка (li).

Пример кода для составления списка, состоящего из одного элемента

В результате получим в нашем браузере следующую картину.

Вывод приветствия в виде элемента списка

Добавим на страницу второе сообщение и внесём это сообщение в список, для чего самую малость подправим код в разделе гипертекстовой разметки.

Дополнение вторым сообщением экземпляра "Vue" и списка.

Вслед за изменением кода снова видим адекватный результат.

Маркированный список из двух элементов

И закрепим результат. Добавим третье сообщение во славу Троице.

Код и соответствующий ему список из трёх элементов

Не будем далее разрушать построенное, а дополним существующий список нумерованным, прописав его ниже. Используем для примера те же самые три сообщения, которые созданы в экземпляре "Vue". Для начала скопируем конструкцию, заключённую в теги маркированного списка, вставим её и заменим теги маркированного списка на теги нумерованного (ol).

Код для составления трёхэлементных маркированного и нумерованного списков

В результате исполнения кода получаются два следом идущих друг за другом списка.

Маркированный и нумерованный списки

Теперь коротко о "json". Не могу сейчас не рассказать этого, так как знания о формате нам потребуются для подготовки исходных данных. На этапе, пока мы учимся, данные для тестирования мы подготавливаем себе сами. Это закон. Зная входную информацию и зная конечный результат, который должен быть получен, мы настраиваем нашу программу / сценарий таким образом, чтобы в ответ на известный набор входных данных получить ожидаемый набор выходных сведений. Если выходные сведения получились не теми, которых мы ожидали, значит, где-то в сценарии была допущена ошибка. Но как только результат получился именно таким, каким он и должен быть, мы начинаем говорить о том, что сценарий составлен нами верно. Не даром программирование, если брать этимологию этого слова, это процесс планирования. Да, мы, действительно, планируем вычисления по определённой закономерности, согласно определённому сценарию.

Ну так вот, данные мы подбираем себе сами. И чтобы не только мы понимали эти данные, но и машина понимала их тоже, необходима договорённость. И такой договорённостью становятся форматы (или, иначе, протоколы). Следующее утверждение взято из Википедии: "JSON (JavaScript Object Notation) - текстовый формат обмена данными, основанный на JavaScript. Как и многие другие текстовые форматы, JSON легко читается людьми".

Давайте рассмотрим пример и разберём его по полочкам:

{

.   "firstName": "Иван",

.   "lastName": "Иванов",

.   "address": 

.   {

.       "streetAddress": "Московское ш., 101, кв.101",

.       "city": "Ленинград",

.       "postalCode": "101101"

.   },

.   "phoneNumbers": 

.   [

.       "812 123-1234",

.       "916 123-4567"

.   ]

}

Итак, мы видим на первой вертикали (которую я специально обозначил точками) "{" - открывающую фигурную скобку и "}" - закрывающую фигурную скобку. Это границы объекта. То есть в данном примере мы рассматриваем один объект. Однако, опытный разработчик заметит, что на самом деле два объекта, но относящихся к разным классам.

Здесь надо немного отвлечься и поговорить про объекты и классы. Лучше всего начать с самого приближенного к нам примера. Все мы люди, все уникальны. Мы элементы класса людей (класса "Люди"). Каждого из нас можно описать довольно большим количеством параметров, что никто делать не возьмётся. Однако, каждая конкретная инстанция как-то же хранит о нас письменные сведения? Да, и это только потому, что рассматривает нас только по отдельному, интересующему её набору параметров. С этой точки зрения описать множество людей, прямо или косвенно связанных с этой инстанцией уже становится вполне решаемой задачей.

Например, для врачей интересующая информация о человеке - это его группа крови, резус фактор, рост, вес и так далее, для работодателей - это занимаемая должность, величина ставки, статус и прочее. Но есть и что-то общее в нас - это, например, фамилии, имена, отчества, номера паспортов или любых других идентифицирующих документов и, конечно же, порядковые номера, под которыми нас стали учитывать в этих инстанциях. То есть как только про нас появилась текстовая запись - мы начинаем рассматриваться как строка базы данных или как объект "Человек" (экземпляр класса "Люди").

То же самое, например, и с адресом. Дом построили. Ему присвоили адрес. Но это только в контексте города адрес - это номер дома и наименование улицы, а в контексте человека адрес это чуть-чуть большее, нежели элемент на городской карте с указанием улицы и номера дома (а иногда корпуса или строения, если номер дома оказался одним и тем же, а дальнейшая нумерация домов на улице уже занята). Для человека адрес рассматривается вплоть до ячейки, в которой он проживает: подъезд, этаж, номер квартиры, код домофона и так далее.

И посмотрите, возвращаясь к примеру, - мы рассматриваем здесь контактную информацию человека, Иванова Ивана, проживающего в Ленинграде, и имеющего два телефонных номера: мобильный и домашний.

Что? Что-то не так с телефонами? Нет, уважаемые, никто не ошибся, и здесь, действительно, должны быть квадратные скобки, поскольку это - массив. Типизированная структура хранения данных. Впрочем, иногда и не типизированная... Но, как правило, тип массива указывается. Дело в том, что номера телефонов - информация однородная, потому её можно упаковать в одну переменную для удобства хранения.

Опять же беру информацию из Википедии: "Массив (в некоторых языках программирования также таблица, ряд, матрица) - структура данных в виде набора компонентов (элементов массива), расположенных в памяти непосредственно друг за другом".

Здесь не дурно вспомнить о типах данных и структурах данных из программирования. Для сокращения публикации лишь вкратце напомню, что есть следующие типы данных:

- логические (либо ноль, либо единица, и в редких случаях учитывается третье состояние неопределённости или, как его ещё называют, пустое множество - null);
- целые (используемые при счёте, ноль и отрицательные (используемые при счёте, но взятые со знаком минус));
- вещественные (целые и бесконечное множество дробных значений, расположенных между двумя соседними целыми);
- строковые (текстовые);
- и другие.

Знание о типах данных позволяет аккуратно выделять память под программу и переменные в ней, а также заранее предотвращать глупые ошибки, связанные с банальным незнанием математики.

Кстати, именно математика учит нас первично типам данных: множествам натуральных чисел, целых и вещественных чисел. Так что я не могу сказать, что это нужно в деталях рассказывать, поскольку все учились в школах. А кто в школе не учился, тот, априори, не программист и данная статья для него не интересна. А умеет ли таковой вообще читать?

И ещё немного про массивы. Из той же математики известно, что точка на Декартовой координатной плоскости описывается координатами "икс" и "игрек" ("абсцисса" и "ордината") - А(x; y). Так вот А - это имя точки, или же имя одномерного массива из двух элементов (x; y). Точка в трёхмерном пространстве описывается тремя координатами (x; y; z), то есть массивом из трёх элементов. А что такое множество точек в пространстве? - Это массив одномерных массивов из трёх элементов или двумерный массив, или таблица, или матрица.

Но что мы выигрываем, когда организовываем массив? - То, что в одном имени, в одной переменной хранится однородная информация, при этом достать нужную из нужного кармана всегда можно указав точную координату этого самого кармана по строке и по столбцу (двумерный случай).

И остались у нас в теории не рассмотренными записи. Тут, действительно, буду краток и скажу, что запись - это последовательная структура, которая во всём многообразии сведений позволяет докопаться до истины. Так структура записи это:

[корень].[вложение 1].[вложение 2]. … .[вложение N]

Не убегая далеко от рассмотренного примера в формате "json", можно построить запись вида.

Человек.Адрес.Город

И через эту запись мы узнаем, что Иванов живёт в Ленинграде. При этом если вдруг "Ленинград", внезапно, переименуют в "Санкт-Петербург", то не нужно каждому Петербуржцу прописывать другой город, он изменится для всех автоматически. Правда, если мы вручную вводим данные, то ничего, естественно, не изменится автоматически, но вот если мы работаем в рамках базы данных, тогда, конечно, всё поменяется. А если и в базе не поменялось, то, вероятно, кто-то что-то криво настроил и не контролирует целостность данных вообще никак. А такого допускать ни в коем случае нельзя.

Что же, теперь мы умные, теоретически подкованные, и можем продолжить развивать наш проект. Избавимся от лишнего. Оставим только маркированный список с одним единственным элементом. А message1 заменим на "human", в которого запишем найденный на просторах Википедии и рассмотренный здесь "json".

Начало работы с объектом в коде и результат вывода объекта целиком

Получается, что мы видим сведения об этом человеке всё в том же сумбурном виде "json". Но конечный пользователь не должен уметь читать "json", потому предоставим ему имеющиеся у нас сведения в удобном для чтения виде.

Форматирование имеющихся сведений об объекте и их вывод в качестве результата

Внимательный читатель увидит, что адрес отобразился не полностью. Он так же заметит, что во втором элементе списка, в третьей подстановке в записи нарушена иерархическая последовательность. Это и привело к ошибке. Добавим недостающее звено "address" в запись и всё встанет на свои места.

Исправление ошибки

Усложняем. Пусть теперь у нас будет не один человек в переменной, а массив людей в переменной. Переименуем "human" в "people", добавим открывающую и закрывающую квадратные скобки, обуславливающие массив, скопируем объекта Иванова в буфер обмена, после закрывающей скобки объекта проставим запятую и скопируем далее содержимое из буфера, переименовав Иванова в Петрова, а также изменив сведения о нём. Не забываем, что в список в разделе гипертекстовой разметки страницы тоже необходимо внести коррективы, связанные изменением структуры и некоторых имён, а также сразу предусмотреть вывод информации о Петрове.

Изменение набора исходных данных и результат работы с ним

И, как видите, эксперимент удался. Что скажете? Заметна однотипность, не так ли? Поручим эту работу циклической конструкции? Вперёд! Сперва обратимся к официальному руководству и уясним для себя раз и навсегда, что всё это взято уже не из головы.

Копия фрагмента официального руководства "Vue.js"

Мы же, как следует разобравшись в примере, в директиве "v-for" напишем "human in people" вместо "todo in todos", где циклический оператор "for" будет просматривать по очереди каждый элемент массива "people", а оператор "in" будет присваивать в "human" рассматриваемый i-й элемент "people[i]". Работа оператора аналогична "forEach" из си-образных языков программирования.

Результат составления списка с использованием циклической конструкции

Тоже, соответственно, желаемый результат получен. Добавим во "Vue.js" третьего человека, но, на сей раз, в части гипертекстовой разметки уже ничего менять не придётся. Удобно? Удобно.

Обработка сведений о трёх объектах и вывод результатов

На этом пока всё, но в следующий раз попробуем составлять объекты не вручную, а кормить ими нашу систему напрямую из базы данных.

Вложение: 5952389_vue_lists.rar

Серия сообщений "Vue.js":
Часть 1 - ПЛАГИН -xBASEVIEW- ДЛЯ -TOTAL COMMANDER-. ВВЕДЕНИЕ
Часть 2 - JSON TEST
Часть 3 - ФРЕЙМВОРК VUE.JS. С ЧЕГО НАЧАТЬ. РАБОЧИЙ ПРИМЕР
Часть 4 - АВТОМАТИЗИРУЕМ СОСТАВЛЕНИЕ СПИСКОВ С VUE.JS. ПРИМЕРЫ
Часть 5 - ДЕЛАЕМ ПРОГРАММИРОВАНИЕ СО VUE.JS УДОБНЕЕ И ПРИЯТНЕЕ
Часть 6 - УЧЕБНО-МЕТОДИЧЕСКОЕ