0:00 Введение

0:42 Установка vue-cli

1:00 Установка проекта

1:33 Обзор vuetify

2:04 Страница установки vuetify

2:23 Установка vuetify через консоль и обзор структуры папок

2:39 Попытка запуска проекта

3:10 Удаление лишних файлов и папок

3:35 Краткое ознакомление со структурой написание кода для одного компонента

3:48 Создание навигационной панели

5:27 Вынесение шаблона навигационной панели в отдельный компонент

6:27 Создание страниц

7:00 Установка vue-router для навигации по страницам

7:10 Создание файла router.js для прописывания путей

8:10 lazy loading

8:46 Импорт используемого плагина VueRouter в main.js

9:10 Как отображать компоненты, прописанные в routes

9:26 "Оживление" кнопок

10:05 Демонстрация перехода по страницам

10:15 Создание фото галереи

10:37 Как работать с данными во Vue

11:50 отображение данных в компоненте через директиву v-for

12:15 передача данных через props свойство компонента и их отображение

12:36 Обязательная директива v-bind для передачи props в компонент

13:02 Как отображать props компонента в шаблоне(интерполяция данных)

13:29 Как получать данные динамически с помощью асинхронного запроса вместо hard code

13:39 Установка библиотеки axios

13:49 Подключение библиотеки axios и обращение к ней через this в каждом компоненте

14:05 Как выглядит get запрос в компоненте

14:15 Понарошечный api jsonplaceholder для получения данных через запросы

14:25 Как ограничить количество получаемых данных

14:35 Как обработать полученный ответ от сервера после запроса(Promise)

14:45 Рефакторинг написания запросов компонента

15:00 Обращение к данным и методам компонента(компонент – это объект) происходит через this

15:10 Теперь данные отображаются те, которые пришли из jsonplaceholder

15:20 Примеры тегов и их атрибутов для верстки, о которых лучше почитать в документации vuetify

16:30 Как выглядит галерея с изображениями

16:40 Создание фотографий

17:50 Оживление формы добавления фотографий в галерею(v-model, @click)

19:15 Как прочитать фотографию

20:15 Как прокинуть объект фотографии в родительский компонент для отображения в галерее

21:00 Реализация метода по названию испускаемого события, которое отлавливается

21:49 Ошибка в файловом вводе(нельзя передавать строки)

22:20 Компонент "Всплывающее окно"(v-model для вставки полей из объекта photo)

24:25 Редакторы кода и IDE могут автоматически импортировать и регистрировать компоненты

24:30 "Оживление" диалогового окна(@click, this.$emit)

25:40 Видимость диалогового окна

27:00 Как выглядит диалоговое окно и ошибки все с тем же файловым вводом(ожидает объект)

27:15 Диалоговое окно появляется, но фото не отображается

27:25 Передал img, а надо было url

27:40 Вторая попытка(успех!)

27:45 Ошибка в логах(как и React, props изменять нельзя, хотя в React компоненты являются чистыми функциями, поэтому они там неизменяемы по определению "чистых функций"; почему во Vue также решили, что props нельзя изменять – кто знает)

28:00 Что такое двухстороннее связывание или двухсторонняя привязка

28:40 Отслеживание

29:00 Демонстрация отслеживания

29:10 Меняем значение dialogVisible при отслеживании изменения значения value

29:35 dialogVisible делаем отслеживаемым

29:50 Демонстрация диалоговых окон без ошибок в консоли

30:05 Вычисляемые свойства

30:50 Демонстрация изменения названия фотографии от одной к другой в модальном окне

30:59 Что хорошего в вычисляемом свойстве?

31:15 Условный рендеринг фотографий(v-if, v-esle-if, v-else)

32:00 Скрытие элемента(v-show, меняет display свойство css на none в случае false)

32:20 Итоги по основам Vue

32:30 Vuex(аналог Redux, MobX)

32:50 Создание store

33:00 Снова показ того, как во Vue подключаются плагины
33:50 Модули Vuex(в Redux для этого есть reducer)
34:13 Структура модуля Vuex
37:15 Ошибка в логах, потому что axios надо импортировать в каждый используемый модуль
37:35 Демонстрация работы без ошибки
37:55 dialogVisible в модуле, действия и мутации для него, состояние, геттер
40:50 Ошибки в консоле – надо @click:outside
41:13 Демонстрация работы без ошибки
41:25 Сократить запись this.$store.dispatch и подобные через mapGetters, mapActions, mapMutations, mapState
41:45 деструктуризация при импортировании мап-функций
41:50 rest operator для раскрытия значений массива через запятую в methods
42:06 Подобные действия делаются с mapMutations
42:43 Итоги курса

Привет, подскажи, как у тебя выходит автозаполнение и подсказки при использовании vuex? у меня последняя версия vue, vuex, webstorm и у меня не работают подсказки, приходится commit, action и прочее вводить самому копируя и вставляя. Спасибо заранее

До половины видео не дотянул. Мозг сдох. Сначала горел долго а потом сдох ))))

Кайф

Благодарю за видеоурок. Один из лучших для того, чтобы вспомнить Vue и попрактиковаться в нём, из того, что я смотрел.

P.S. для пользы другим: функции showDialog и setCurrentPhoto во Vuex можно было записать в одну:

SHOW_DIALOG(state, payload) {

state.dialogVisible = true;

state.currentPhoto = payload;

},

И вызвать её вот так из компонента:

openPhoto: function () {

this.$store.commit('SHOW_DIALOG', this.photo)

// или через mapMutations:
// this.SHOW_DIALOG(this.photo)
},

Ну и автор видимо просто забыл переписать функционал добавления своего фото на Vuex.

Для этого аналогично в mutations пишем:
AD_PHOTO: (state, payload) => state.photos.push(payload),

И в компоненте вместо этого эмита: this.$emit("addPhoto", photo) ,пишем это:
this.$store.commit('AD_PHOTO', photo)

Никак не закрывается модальное окно
А так все супер – главное, понятно. Спасибо большое!

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

Очень полезное видео. На канале очень много полезных видео. Спасибо Тимур, честно говоря только благодаря тебе получается изучить сложное понятным языком.

Для начинающих сомнительное название. Спасибо за урок! Еле все чехлы в кучу собрал(

Спасибо за твой труд!