Vue JS БЫСТРЫЙ КУРС 2021 для начинающих. Vue router, vuex, vuetify

В этом ролике мы пройдемся по всем основным возможностям фрэймворка vue js. Рассмотрим vue router для постраничной навигации и изучим стэйт менеджер vuex.
Vue js уроки, vue полный курс. Vue vuex vutify. Vue router.

Поддержать меня и мой канал вы можете по ссылкам ниже.

#Vue #Vuejs #Vuex

[Neuroscience-uvfl]

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 могут автоматически импортировать и регистрировать компоненты
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 Итоги курса

[turtrueweb]

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

[unknownWakeborder]

Нужно больше контента на Vue)
Я внезапно с реакта попал на Vue, и обратил внимание, что по Vue намного меньше контена чем по Реакт.
Правда и разрабов тоже меньше. Но спрос то есть, и бабки за это платят.
И желательно "боевые кейсы" с ТS (vue-property-decorator) и всякое такое)

[gritsienkooleg]

Спасибо огромнейшее! Тимур, сколько хорошего контента ты приносишь в этот мир. Уверен, это вернётся сторицей)

[Unnamed-rx]

Учил Реакт, пришел стажером. Думал будет Ангуляр. Оказалось, что надо пилить на Вью. Автор лучший.

[VerSPanfire]

Красава, Владлен растянул это на 2 видео по 50 минут после которых ничего не понятно, а тут ты проделал красивую работу👍

[stasstas]

твои 40 минут это мои пол дня.. зато сейчас я вроде знаю как делать вещи на ву - спасибо!

[ohceliv]

плотность полезной нагрузки на единицу времени зашкаливает

[ural-site]

Отличная подача!!! Четко, быстро без воды и по делу!

[tdbzstv]

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

[itpro]

Я не понимаю как ты в 43 минуты уместил столько информации, сразу вникнуть конечно тяжело, но понять что за vue такой самое то

[andriyvozniuk]

Спасибо, как екскурс в технологию и посмотреть как всё работает самое то)

[neckalas]

Если честно то очень сильно было бы интересно про electron или же electron+react

[ashotashirov]

отличный обзорный курс, большой объем информации, все по делу. Благодарю!

[spaikissinfernio]

Столько лет прошло, а я с кайфом видос посмотрел и многое стало понятно. Спасибо за твои видео!)🤙

[loadmore]

нормалек, актуально для 22, для домашки надо докрутить руками v-model - с getters не очень вариант и добавление фоток через mutation реализовать

[marinakaryukova]

Посмотрела много видео по vue. Если вы не новичок в веб разработке. То лучше начинать с этого видео. Спасибо! Все изложено быстро и понятно.

[dmytronice]

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

[uzqimpj]

Круто, ты из многих новичков лепишь программистов

[ffcmqfu]

спасибо Тимур!
благодаря твоему видео, я за вечер разобрался во вью, и устроился на первую работу