Рубрики
HTML Input Vue components Vue project Vue UI Теги

MyInput.vue

MyInput.vue

простой UI тег Input в HTML5, который реализуется в файле MyInput.vue как компонент

UI Input во HTML5 и реализация в MyInput.vue
тег Input
Рубрики
Vue project Vue основы Vue3 логика

Mixins

Mixins или примеси
происходит слияние переиспользуемого объекта с компонентом

Примеси — это гибкий инструмент повторного использования кода в компонентах Vue. Объект примеси может содержать любые опции компонентов. При использовании компонентом примеси, все опции примеси «подмешиваются» к собственным опциям компонента.

Мы можем заметить что у некоторых компонентов есть некие моменты одинаковые и мы можем их вынести в отдельный файл для переиспользования компонентам

<script>
data(){
methods:{}
computed:{}
watch:{}
...
</script>
Mixins во Vue.js
Vue.js
Рубрики
Vue project Vue основы Vue3 логика

Composition API

Composition API позволяет решить проблемы
когда компонент сильно разрастается

  • логические куски сильно размазываются по компоненту.
  • поддержка читаемости кода ухудшается
  • Сложно становится что то найти в большом количестве строк кода
  • данные сосредоточены внутри одного компонента и мы не можем вынести эти данные в отдельный файл так, как теряется реактивность данных

позволяет совершать

  • декомпозиция
  • логические куски держать рядом (библиотеки)
  • добавляет некую особенность реактивности
Composition API во Vue.js
Vue.js
Рубрики
Vue project Vue компонент.script.глобальные Vue основы Vue.js Vue3 логика

Глобальное состояние приложения

Глобальное состояние приложения представляет собой вынесение логики из компонентов в отдельный модуль, подключив его глобально

Установка VueX в терминале

npm install vuex@next --save
Глобальное состояние приложения во Vue.js
Vue.js
Рубрики
Vue project Vue.js

Сортировка постов

Нам понадобится выпадающий список, в котором будем выбирать по какому полю будет идти сортировка (например по заголовку или описанию)

Рубрики
Vue project Vue.js

Жизненный цикл компонента

У каждого компонента есть хуки — функции, которые отрабатывают в определённый момент

Рубрики
Vue project Vue.js

Взаимодействие с сервером

Реализуем функцию, с помощью которой будем получать список постов с Сервера.

JSON Placeholder
сервис

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

limit

За один запрос приходит много постов. Поэтому мы будем делать постраничный вывод (по 10 постов на страницу). В query параметр можно передать ?_limit=10

axios
библиотека

npm i axios
Рубрики
Vue project Vue.js

Модальное окно

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

Рубрики
Vue project Vue.js

Директива v-if

Директива v-if или отрисовка по условию
вывести надпись, когда список постов пустой

Если условие в v-if не выполняется, то элемент полностью удаляется из DOM дерева.

директива v-if во Vue.js
Vue.js
Рубрики
Vue components Vue project Vue UI

UI Компоненты

Button и Input

Нарушается стилистика кнопок Создать и Удалить
Кнопка получается как переиспользуемый компонент

src\components\UI
папка содержит библиотеку UI элементов (button, input и т.д.)

Название или свойство name компонента должно состоять
не менее из двух слов

для того чтобы отличались от дефолтных html тегов