[ВАЖНО - Читай описание] PUSH-уведомления для web-сайта на Vue.js
HTML-код
- Опубликовано: 30 янв 2020
- --------------------------------------------------------------------------------------------------------------------------------------------------------
ВАЖНО - Видео на этом канале 3х летней давности и большинство уже НЕАКТУАЛЬНЫЕ в силу изменения синтаксиса, методов и подходов во Vue.js версии 3. Все видео были записаны на Vue.js версии 2. Много чего уже просто НЕ БУДЕТ РАБОТАТЬ или выдаст ошибки.
Новый канал на актуальном стеке Vue.js v3, Pinia, Vue router@next, Ionic (мобильные приложения), FireBase (база данных, аутентификация и тд) - / @intothecoding
НО! Новый канал ведется на АНГЛИЙСКОМ ЯЗЫКЕ - так что у вас есть уникальная возможность научиться кодить и подтянуть язык - так как Английский нужен всегда!
Жду вас на новом канале!
--------------------------------------------------------------------------------------------------------------------------------------------------------
В этом уроке сделаем крутые push-уведомления при добавлении товара в корзину!
Компонент уведомлений с использованием vue transition-group.
Репозиторий проекта: github.com/antonboltnev/tutor...
Приятного просмотра!
![[ВАЖНО - Читай описание] Поиск по каталогу с главной страницы Vue js магазина](http://i.ytimg.com/vi/1pay8z5-QfM/mqdefault.jpg)
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](/img/1.gif)
Отличнейший урок👍, знать не знал, как это все сделать. ). Спасибо за эту фишку.
Ingvar River наздоровье)
Ingvar River любые даже самые необычные и сложные ui решения так или иначе делаются простыми js методами, надо лишь немного продумать и представить как оно должно работать:)
@@gofrontend2220 я прост в начале пути. По наличию времени стараюсь смотреть ваши видео и повторять .
Ingvar River отлично:) главное попытаться понять процесс полностью: от идеи до непосредственно кода. Придет со временем:) главное усидчивость и желание
@@gofrontend2220 👍
Отличный урок, отличный канал! спасибо, подписался
Интересно, спасибо за видео
отличный урок, спасибо!
отличный урок, спасибо
для vue 3 в transition-group нужно указать атрибут tag, например tag="div", иначе не будет обертки с классом messages_list.
плюс еще вместо &-enter, &-leave, нужно писать - &-enter-from, &-leave-from соответственно.
ну это не push уведомления если что)
Это сообщения действия в приложении, а push-уведомления приходят вам через браузер...
главное что никого это не смущает!)
Во Vue3 в блок watch:{} нужно добавить вместо messages() такую конструкцию:
messages:{
handler(){
this.hideNotification()
},
deep: true
}
так что с классом messages_list ? прописали стили direction: column-reverse, а вроде ведь не используется? Раз уж добавили вместо push unshift В дереве список имеет класс mesages_list, а в scss прописано для .v-notification__messages_list
Mexanikkmm скорее всего вы правы и стили не нужны. Мы сообщения можем как стилями развернуть, так и через push/unshift. Похоже я забыл убрать стили:) извините.
тоже обратил на это внимание
Спасибо, хороший урок. использовал готовые решения, но очень интересно знать как все работает под капотом.
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
почему бы не использовать "(message, index) in messages" для получения уникального значения, или я ошибаюсь?
i dont mean to be offtopic but does anyone know a way to log back into an instagram account..?
I stupidly lost the password. I would love any tricks you can give me.
@Ronnie Sullivan instablaster ;)
они будут не уникальны. При удалении/ добавлении не в конец индексы сдвинутся
Можно создать div с классом name написав .name, не обязательно писать div.name
Ахах, если перейти по div.name откроется сайт с цитатой из мультика)
Не вводи в заблуждение, это не пуш. Это по сути разукрашенный алерт и не более того.
Не хватает даже базовых знаний, а все лезут учить))🤦