Через нажатие кнопки Создать появляется диалог, в который вводим необходимые данные и создаём пост. Создадим переиспользуемый компонент диалогового окна.
Рубрики
Рубрика: Vue.js
фреймворк
JavaScript
с открытым исходным кодом
для создания пользовательских интерфейсов
похожий
Angular, React
плюсы
реактивность данных (обновлять данные на лету)
Директива v-if или отрисовка по условию
вывести надпись, когда список например постов пустой
Если условие в v-if не выполняется, то элемент полностью удаляется из DOM дерева.
v-if
директива условие
если эта директива true, то блок, на котором прикреплена директива мы будем видеть (posts.length>0).
В обратной ситуации выведем какую то надпись
v-else
директива исключения
если не выполнилась v-if
v-else-if
директива исключения с условием
может сколько угодно быть. Так же создаётся условие и по цепочке проверяется до тех пор, пока какое то из условий не будет равняться true. И всю эту цепочку можно закончить директивой v-else.
v-show
директива похожая v-if
Если значение false, то блок получает стиль display:none.
Элемент просто скрывается, но в DOM дереве он всё ещё находится.
Рубрики
UI Компоненты
Button и Input
Нарушается стилистика кнопок Создать и Удалить
Кнопка получается как переиспользуемый компонент
src\components\UI
папка содержит библиотеку UI элементов (button, input и т.д.)
Название или свойство name компонента должно состоять
для того чтобы отличались от дефолтных html тегов
не менее из двух слов
Для этого нужно в шаблон компонента PostItem добавить кнопку удаления.
Рубрики
Отдельно взятый пост
PostItem
Выделяется ещё один компонент
Возможно в какой то ситуации не потребуется отрисовывать список постов PostList, а нам потребуется отрисовывать отдельно взятый пост.
компонент должен принимать пропс как раз сам пост, где тип этого пропса является объект и он обязателен.