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

[@Neuroscience-uv3fl]

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 Итоги курса

[@UlbiTV]

Спасибо!!!!!!!!

[@Vladimir_Ur]

Сделал небольшое приложение, написал в консоле npm run serve, появилась ссылка, все работает, но когда делаю билд проекта (npm run build), почему то при запуске index.html пустая страница, че не так ?

[@leandrmiklashevich297]

Ребят, у кого затык с router начиная с 8:00. Вы всё делаете по коду, но он не работает и выдаёт странную ошибку про Webpack. Обратите внимание на версию vue-router. Скорей всего вы ставите 4-ую. А здесь 3. Там было несколько breaking changes при смене версий. Проще всего поставить конкретную версию, которую и использует Ulbi в туториале. npm i vue-router@3.4.9

[@toivokalev498]

классный у тебя комментарий)

[@shiryaev585]

Огромное спасибо!

[@АндрейКутузов-ф4п]

Дай бог тебе здоровья, бро

[@VeloGitaryst]

Благодарю, так и есть. С рождеством!!!

[@leandrmiklashevich297]

@@VeloGitaryst то ўзаемна!)

[@VerS9Panfire]

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

[@РоманКлимов-х9ъ]

бегите от владлена)

[@Unnamed-r8x]

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

[@UlbiTV]

Вью оч крутой!)

[@turtrueweb]

Сам убедился в этом.

[@turtrueweb]

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

[@UlbiTV]

Друзья, что бы вы хотели видеть в следующем ролике? 1. React native полный курс 2. Electron десктопные приложения полный курс 3. Теория для подготовки к собеседованию (вопросы разного уровня сложности, по порядку - чистый js, css, react, vue, клиент-серверное взаимодействие)

[@devorer77]

4. graphQL + apollo + prisma ;)

[@kolyabokov88]

Из предложенных конечно react native, а вообще ооочень хочется Next.js, на русском ютьюбе только у Минина есть, хотелось бы от тебя!) Этот видос смотреть не буду, но лайк влеплю за труды!)

[@UlbiTV]

@@devorer77 ахах, учту, записал))

[@UlbiTV]

@@kolyabokov88 спасибо большое, некст в списке есть, в дальнейшем будет)

[@srt2046]

Бэкенд на laravel + немного фронта для VUE

[@unknownWakeborder]

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

[@gritsienkooleg3447]

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

[@ural-site]

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

[@UlbiTV]

Спасибо!)

[@denisaleksandrov9626]

@@UlbiTV Поддерживаю такой фрмат) Так держать!

[@stasstas206]

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

[@Лаурахит]

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

[@UlbiTV]

Успехов!

[@andriyvozniuk5854]

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

[@UlbiTV]

Спасибо, на это упор и был!)

[@РобертСатдыков]

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

[@UlbiTV]

Старался, друг!) спасибо!)

[@spaikissinfernio8610]

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

[@ИванБагрин-в9э]

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

[@ipa_stor]

Шикарно, как раз хотел ознакомиться:))) почему так идеально вовремя то всё время? :))) как всегда спасибо!!

[@UlbiTV]

😂❤️ Надеюсь будет полезно, спасибо!)

[@ipa_stor]

@@UlbiTV я в этом уверен:)))

[@itpro952]

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

[@UlbiTV]

Ахахах, стараюсь, спасибо!)

[@nazar9796]

Автор ты нечто) - в хорошем смысле слова

[@UlbiTV]

Спасибо вам огромное за поддержку!

[@oldiBerezkoo]

Лучший гайд по сей день, спасибо 🔥

[@marinakaryukova6231]

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

[@neckalas5759]

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

[@loadmore]

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

[@владимирвладимирович-к4в3к]

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

[@ashotonline]

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

[@illia4503]

такие вот видосы без кучи воды и разжовывания очевидных вещей - кайф!

[@wardog4244]

Ну кайф чо, буду еще раз пересматривать, очень интересно бьіло посмотреть реализацию vuex, со стороньі не вьіглядит таким страшньім местом боли как в реакт!

[@UlbiTV]

Спасибо) да vuex удобен достаточно)

[@ИванТюников-д3е]

Согласно официального описания Vue JS в директиву v-for надо добавить v-bind:key = "photo.id"

[@kupersloaka2554]

Спасибо, ты решил мою проблему

[@dmytronice1337]

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

[@btwf3358]

Как всегда на высоте 👍👍👍

[@UlbiTV]

Спасибо, бро)

[@ПавелКуприянов-ь8ы]

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

[@justinmoreyl2029]

Офигенно! Спасибо!

[@UlbiTV]

Благодарю!)

[@taran_dm]

Спасибо за труд. Только плохая практика закидывать ссылку в кнопку. Можно и так

[@UlbiTV]

Согласен с вами, спасибо за замечание)

[@Mi5hqa]

У меня у одного не работает addPhoto после vuex изменений?? Вроде ничего там не менялось, не могу понять причину..

[@komrad_sl1264]

В гугле в названии видео Vuetify упоминается, а тут его нет в названии. Интересно было бы сделать форму авторизации во всплывающем окне.

[@UlbiTV]

Да, это старое название) В ролике используем вьютифай

[@anastasiafrolova6853]

Спасибо за материал, вы довольно понятно объяснили первую часть видео, во второй уже появились вопросы по поводу работы vuetify. У вас есть пример кода на github к этому видео?

[@romankblckblc9582]

Дружище, прикольный туториал. Но я, повторяя за тобой (все один в один), столкнулся с тем, что у меня не рендрится компонент. Скорее всего проблема в версиях. Было бы здорово, если ты рассказал какие версии ты юзал. А так желаю процветания каналу и всем добра=)

[@UlbiTV]

Здесь 2ая версия вью, спасибо!)

[@ghost_education]

возможно не услышал, но на всякий напишу для v-for ВСЕГДА НУЖНО указывать ключ с уникальным названием

[@burenkov]

Спасибо!👍👍 максимум годноты

[@bigenough2122]

Воооу. Что-то интересное)

[@UlbiTV]

Вооу, спасибо!)

[@falsetrue7910]

Крутое видео, но моментами не понятно бывает конечно, слишком быстро, но в целом для введения очень даже не плохо

[@UlbiTV]

Спасибо)

[@g992_r]

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

[@golden_horde]

И как видите ничего не происходит! - Это вполне логично ... 😀😀😀 Ты меня спас со своим видео

[@prostreyd]

Стоит ли использовать vue в больших проектах?

[@UlbiTV]

Не вижу препятствий!)

[@olehmanko4232]

Здраствуйте, подскажите где хранить ключи API, пути к ним. И как к ним обращаться.

[@UlbiTV]

Здравствуйте, можно в локальном хранилище браузера, localstorage, почитайте)

[@olehmanko4232]

А на сервере? Извините за торможение в общении.

[@АлексейМогильный-п3с]

Если не добавляя фотографии нажать кнопку Добавить то в консоли появляется ошибка. В чём причина?

[@UlbiTV]

В том, что картинка с пустым адресом создается, это уже детали, но можете перед созданием проверять, выбрана картинка или нет!)

[@АлексейМогильный-п3с]

@@UlbiTV спасибо )

[@Әубәкір-ж6п]

Ты на проверку загрузки фотки забил, а у меня именно это и отвалилось.

[@MAXISchannelMax]

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

[@wilmerfroilan8991]

code on github?

[@maxim7603]

Спасибо! Круто, полезно

[@UlbiTV]

Спасибо вам!

[@programming5944]

Очень круто!

[@UlbiTV]

Спасибо!)

[@My-video123]

1) Интернет магазин на Vue3 2) Vue3 advanced 3) VENoM 4) Vue3 advanced + firebase

[@Unnamed-r8x]

Бро, как мне понять что я установил Vue 3 или 2 например. Ты упоминал, что Vuetify Не будет работать с Vue 3. Я создал проект в вебшормер. Что мне сделать, что бы Вьютифай заработал?

[@UlbiTV]

Посмотри в package json версию!)

[@Unnamed-r8x]

@@UlbiTV "vue": "^2.6.11", странно, вроде не 3.0. Но Header не появился

[@gowking]

ты же звук отдельно от видео записываешь?

[@UlbiTV]

Да, а что?

[@gowking]

@@UlbiTV просто поинтересовался)

[@Davidovich_aka_smoozydrinker]

Хотя сделал идентично, как в видео, всё-равно командная строка ругается на: v-for="photo in photos" v-bind:photo="photo" Выдает ошибку: Custom elements in iteration require 'v-bind:key' directives. Попробую разобраться с помощью документации. Жаль, что так быстро всё меняется, что нельзя нормально дойти до конца crash-курса, хотя версия vue - вторая, сервер перезапускал несколько раз, вроде всё проверил, как всегда..

[@Davidovich_aka_smoozydrinker]

РЕШЕНИЕ, например: вместо: писать:

[@Davidovich_aka_smoozydrinker]

посыпался, в общем, vue: Error: Cannot find module 'vue-cli-plugin-vuetify', хотя сам плагин в проекте установлен. РЕШЕНИЕ: в терминале переустановить плагин:$ vue add vuetify // однако после обнуляется ранее прописанная верстка NavBar. Gовторить приложение без танцев с бубном нельзя (не могу?). Постоянно ошибки. Придётся документацию читать. возможно, проблемы с vuetify плагином связаны с npm/yarn.

[@UlbiTV]

Всегда, когда изучаешь новые технологии, натыкаешься на кучу ошибок, немного практики, и их уже не будет) Успехов!)

[@VasiliyKolpaxidis]

npm run serve если не ошибаюсь уже не нужен. vue cli тоже устарел вместо него используют вездесущий vite. Очень интересный курс.

[@Archycoon]

Всем привет! Вопрос такой: в видосе сделано так getters: { getAllPhotos(state) { return state.photos }, getDialogVisible: (state) => state.dialogVisible, getCurrentPhoto: (state) => state.currentPhoto }, есть ли разница, как писать геттеры стрелочной функцией или обычной?

[@johny-joe]

Т.к. суть геттеров подразумевает возврат данных, также как и сокращённая запись "стрелки", полагаю, что здесь разницы нет.)

[@котток-г6й]

нереальной крутой контент, сконцентрированный на одном канале. спасибо за видос! 10/10! но вот по вью есть вопросы. после реакта одним только своим синтаксисом вызывает отторжение. единственное желание это закрыть иде и пойти за трудовой, т.к кидают на проект на вью.

[@yevgeniy-ten3482]

Классно 👍

[@UlbiTV]

Cпасибо))

[@ТимурТокумов-и1к]

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

[@MisaNia25]

А можно курс по HTML CSS Js ?

[@UlbiTV]

Этого добра уже очень много на ютубе, не хочу повторяться!)

[@dezolutions6689]

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

[@dezolutions6689]

ну точнее я понимаю, что происходит, на словах, но супер сложно для восприятия

[@UlbiTV]

Сложно, потому что привык к реакту, поработаешь неделю-две, начнешь понимать что вью проще)

[@dezolutions6689]

@@UlbiTV скорее всего, ну вот по реакту у тебя видосы хаваю на раз два, на лету хватаю все, а тут... я когда увидел двустороние связки вот эти, у меня чуть психика не нарушилась, я чуть плакать не начал, после vuex хоть немного в себя пришел

[@MrNosiks]

А нельзя было ссылку на github оставить? Исходник посмотреть.

[@wardog4244]

Не забудте пролайкать коментьі снизу

[@UlbiTV]

Вот вот!)

[@alicenNorwood]

Не хватает Nuxt'а для совсем уж мега крутости.

[@UlbiTV]

По наксту планируется быстрый курс)

[@АлександрКулик-м7я]

Мутации вне vuex практика так себе. А так все очень круто.

[@hangor3620]

Отличный курс для ознакомления, все четко и по делу. Но для себя понял, что фреймворк по сравнению с реактом просто ужасен, неприятный синтаксис и какая-то магия, куча абстракций.

[@nazirazizov2029]

electron

[@annadiza1391]

NUXT.JS+LARAVEL

[@devorer77]

Все, бросаем реакт? :)

[@UlbiTV]

Одно другому не мешает 😂😂

[@Kira_sk]

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

[@UlbiTV]

Это одно из первых таких видео на канале, и возможно есть косяки действительно, в последних 20-30 видео ты их наврядли найдешь :)

[@nodirbeshimov4513]

Спасибо, круто, полезно, но почему ты так торопишься

[@UlbiTV]

Спасибо) Да, согласен, этот курс особенно торопливый вышел)

[@johnnyzhuravlev7334]

top video in russian lang thanks a lot, old sport

[@VasiliyKolpaxidis]

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

[@LuckyStilet1]

24:36 Можно прямо на кастомном компоненте сделать @click.native="...", чтоб не пробрасывать с компонента фото на верх.

[@ГариГарибальди-ъ1я]

Кнопки навигации так и остались убогими

[@UlbiTV]

))

[@Viktorres1]

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

[@shaxruhnazarov1800]

PLS, Can you make your videos slower !!!

[@Rad777i]

Кайф

[@nikitadudchenko5010]

Благодарю за видеоурок. Один из лучших для того, чтобы вспомнить 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)

[@Heretic3234]

Нихрена не для начинающих.(

[@UlbiTV]

Планирую новый курс по вью, он будет лучше)

[@Heretic3234]

@@UlbiTV Когда выйдет? Я накачал всяких - на выходных буду смотреть, но Ваш не помешает. Каждый раз находишь что-то новенькое.

[@UlbiTV]

@@Heretic3234 Не скоро, ближе к лету, щас загруженность очень большая

[@Heretic3234]

@@UlbiTV спасибо, будем ждать.

[@Kira_sk]

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

[@UlbiTV]

А видео как называется?

[@helenit4365]

Беспонтовый это ты!

[@black__angels]

советую сменить голос на искуственный. твой голос просто невозможно слушать. удачи.

[@ivancoin2570]

У кого ошибка с FileReader. Во Vue3 нужно прописать так: reader.readAsDataURL(this.img[0])

[@granmini]

Блин! Огромное спасибо, как же ты мне помог! Второй день маюсь с этой херней. Думаю что не так и пытаюсь разобраться. Теперь все заработало.

[@DodgeViper188]

Вдруг кто столкнулся с тем же что и я, если reader.readAsDataURL(this.img[0]);

[@madogold6487]

Спаситель, ещё бы кншн понять как axios не напрямую ипортировать в компонент

[@ЕвгенийМалый-ш9ф]

большое спасибо я уже проверку ставил if но не спасала