Хорошие уроки. Немного запутался в последовательности. Прошел 8 уроков, потом пропала последовательность. Но это мелочи. Желаю автору больше свободного времени и вдохновения для написания новых уроков!!!
Хороший урок. Спасибо. Если есть возможность, увеличьте масштаб, плохо видно. И можно же метод не задавать кнопке, можно просто же директиву v-show со значением true ставить. И ещё - можно же как-то обойтись без нативного js при закрытии на wrapper?
V-show это скрытие и показ элемента через display:none, v-if это вообще удаление и монтирование элемента в дом-дерево. Если элементу сказать v-show=“true” это будет во-первых бессмысленное действие, так как элемент изначально видим, а во-вторых статичное. Чтобы скрыть элемент по-умолчанию, надо ему через директиву v-if или v-show задать переменную с значением false, а для показа надо эту переменную менять на true. А как можно менять переменную без метода? Разве что в template на кнопку на @click так и повесить @click=“переменная=true”. Но не хорошо писать javascript в template, если можно поместить это в метод
Антон Трофимов Для закрытия вы можете использовать директивы. Например v-clickoutside (это не дериктива vue. Вам придется ее писать самому!). Поищите в гугле, но это тоже отчасти наттвный js. Либо плагины какие-то. Но поверьте, те 2 строчки на нативном js что написал я - это самое простое решение:)
Было бы очень полезно, если бы вы могли в самом начала показать результат, то что мы хотим сделать, а после уже рассказывать про реализацию. Пришлось сначала перемотать в самый конец, а потом уже понял что это то что мне нужно и начал смотреть. Но лукас я всё равно поставлю
Для скрытия окна я использовал метод проще и, как мне кажется, правильней, передал по клику $event в функцию, где: if (event.path[0] == this.$refs.editor_wrap) {this.show_editor = !this.show_editor} Может кому пригодится.
На 2:55 После прописывания строки "material-design-icons-iconfont": "^5.0.1" , в файл package,json и строки import 'material-design-icons-iconfont' в файл main.js возникает ошибка: Module not found: Error: Can't resolve 'material-design-icons-iconfont' in 'C:\GitHub \tutorial_online_shop\src' . Данную ошибку устранил собственно командой установки : npm install material-design-icons-iconfont --save . После чего ошибка пропала. Данная команда установки прописала еще в файле package-lock.json следующий объект: "material-design-icons-iconfont": { "version": "5.0.1", "resolved": "registry.npmjs.org/material-design-icons-iconfont/-/material-design- icons-iconfont-5.0.1.tgz", "integrity": "sha512-Xg6rIdGrfySTqiTZ6d +nQbcFepS6R4uKbJP0oAqyeZXJY/bX6mZDnOmmUJusqLXfhIwirs0c++a6JpqVa8RFvA==" },
Спасибо за урок, только на самом деле это не универсальный компонент. Нужно было использовать store, и там поработать с action и getters, чтобы не использовать emit.
Victor Cozhuhari потому что не привык:) они более короткие и красивые, но из-за специфики как раз контекста можно запутаться и потом огрести багов:) дело вкуса
@@gofrontend2220 Согласен. Я сразу чётко уяснил их отличие именно в плане контекста, пользуюсь там, где надо, и это экономит много повторяющихся действий. Мне они, кстати, наоборот, не нравятся в плане красоты, но как инструмент они хороши
Kamil Fataliev во-первых эмит не получает доступ к методу родителя. Эмит поднимает метод из дочернего компонента и обрабатывает его методом родителя. Доступа у дочернего компонента не. Вообще ни к чему вне себя самого. Но вы можете передать дочернему компоненту какой-нибудь компьютед через props. и в дочернем принимаете в разделе props
@@gofrontend2220 Здравствуйте! Делаю по видео попап для каждой карточки товара, но при открытии разных карточек данные в ней идут от первой карточки, что я мог упустить? Единственное отличие от вашего видео это то что модалка сделана на бутстрапе, но это ведь не важно насколько я понял
посмотрите *Урок 8/8. Refactoring приложения Vue. Best-practise* там подробно объясняется. Если кратко, то любой префикс можете придумать, это чтобы с родными html тегами не пересечься
Garik Gelios есть еще такой момент: у вас могут быть общие компоненты и проектные. Так вот общие могут быть потом вынесены в другой проект. И чтобы не путаться какие общие, а какие чисто проектные - проектные должны как-то отличаться по названию. Вот и все.
На сколько оправдано использовать emit для поднятия события в родителя? Я привык пропсами принимать ссылку на функцию в модалке, в вашем случае addToCart из родителя
Kempriol а вот это плохо. Все методы, которые касаются только компонента должны быть в компоненте. Смотрите, что проще, 1 раз прописать в компоненте модалки метод закрытия по клику вне? Или же каждый раз это делать в родителе? А если у вас 20 ррдителей с этими модалками? 20 методов:) вы просто можете настроить и так и так. Например клик вне модалки - этот метод пишем в компоненте, но так же модалка может получать какой то пропс и следить за ним. И если пропс изменился из родителя - закрыть/открыть попап
Андрей StT а как душе угодно. Либо дизейблить и менять на них текст, типа ДОБАВЛЕНО или В КОРЗИНЕ. Либо оставлять как есть, но как то по-другому намекать пользователю о том, что товар добавлен. Напрример уведомлениями, про которые будет урок скоро.
@@gofrontend2220 здравствуйте! А если мы например добавили и при добавлении поменяли текст на ДОБАВЛЕНО, как вы сказали, каким образом сделать так чтобы при повторном нажатии кнопка перевела нас в корзину, а не добавила товар еще раз?
нихрена не понял) у меня есть некоторый проект я пытался интерполировать на свой кейс, но вообще не але. спасибо за видео но образовательным его можно назвать только если код ваш копипасить, с точки зрения полезности в плане урока инфы то ее тут мало . без обид)
![[ВАЖНО - Читай описание] Фильтры во Vue.js](http://i.ytimg.com/vi/Nhi3J_jMiVo/mqdefault.jpg)
![[ВАЖНО - Читай описание] Фильтры во Vue.js](/img/tr.png)
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](http://i.ytimg.com/vi/5lBf-Fm4io4/mqdefault.jpg)
![เปิด อาณาจักร หมื่นล้าน "สาระตั้ม" l [Nickynachat]](http://i.ytimg.com/vi/3XE0nPF4YkQ/mqdefault.jpg)
![[ВАЖНО - Читай описание] SELECT. Создание кастомного стилизуемого компонента на Vue.js](/img/n.gif)
Спасибо добрый человек!) Я наконец понял для чего нужны слоты
Алмаз Фахрутдинов наздоровье:)
Отлично. Все получилось, понятно объясняете. 👍
Отличнейший урок! Спасибо за труды
Спасибо, то что доктор прописал 😉
Борис Черников наздоровье:)
Читешь доки все понятно. Потом думаешь: 'а зачем?' Потом смотришь видос и приходит первое понимание. Спасибо.
Спасибо! Ты объяснил то чего нет в оф документации...
Отлично, все работает, очень полезный урок
Хорошие уроки. Немного запутался в последовательности. Прошел 8 уроков, потом пропала последовательность. Но это мелочи. Желаю автору больше свободного времени и вдохновения для написания новых уроков!!!
Отличное объяснение , в 11 видео , vm.selected = category.name)
Классно!
Вот только звук тихий, но видео очень крутое!!
Спасибо большое за труд!!
Timmi Nero да со зауком я дальше разобрался:)
💪🚀🚀
Хороший урок. Спасибо. Если есть возможность, увеличьте масштаб, плохо видно. И можно же метод не задавать кнопке, можно просто же директиву v-show со значением true ставить. И ещё - можно же как-то обойтись без нативного js при закрытии на wrapper?
Вы про какую именно кнопку? Показа поапа? А как его тогда показывать и скрывать? Кто будет менять true на false в v-show/v-if?)
V-show это скрытие и показ элемента через display:none, v-if это вообще удаление и монтирование элемента в дом-дерево. Если элементу сказать v-show=“true” это будет во-первых бессмысленное действие, так как элемент изначально видим, а во-вторых статичное. Чтобы скрыть элемент по-умолчанию, надо ему через директиву v-if или v-show задать переменную с значением false, а для показа надо эту переменную менять на true. А как можно менять переменную без метода? Разве что в template на кнопку на @click так и повесить @click=“переменная=true”. Но не хорошо писать javascript в template, если можно поместить это в метод
Антон Трофимов Для закрытия вы можете использовать директивы. Например v-clickoutside (это не дериктива vue. Вам придется ее писать самому!). Поищите в гугле, но это тоже отчасти наттвный js. Либо плагины какие-то. Но поверьте, те 2 строчки на нативном js что написал я - это самое простое решение:)
@@gofrontend2220 Добрый день. На счёт закрытия на область вне попапа - нашел такую штуку click.self, ещё проще действует)
jenesius-vue-modal для Vue3 отличный инструмент
Было бы очень полезно, если бы вы могли в самом начала показать результат, то что мы хотим сделать, а после уже рассказывать про реализацию.
Пришлось сначала перемотать в самый конец, а потом уже понял что это то что мне нужно и начал смотреть. Но лукас я всё равно поставлю
я по-другому реализовал, без слотов и рефс. через v-show и @close
Я хз где тот комент, где спрашивали, но на всякий случай оставлю это здесь 😁
4:15 Стили не желательно так писать т.к. это усложняет поиск потом для следующего программиста этого стиля
Для скрытия окна я использовал метод проще и, как мне кажется, правильней, передал по клику $event в функцию, где: if (event.path[0] == this.$refs.editor_wrap) {this.show_editor = !this.show_editor}
Может кому пригодится.
На 2:55 После прописывания строки "material-design-icons-iconfont": "^5.0.1" , в файл package,json и строки import 'material-design-icons-iconfont' в файл main.js возникает ошибка: Module not found: Error: Can't resolve 'material-design-icons-iconfont' in 'C:\GitHub
\tutorial_online_shop\src' . Данную ошибку устранил собственно командой установки : npm install material-design-icons-iconfont --save . После чего ошибка пропала. Данная команда установки прописала еще в файле package-lock.json следующий объект:
"material-design-icons-iconfont": {
"version": "5.0.1",
"resolved": "registry.npmjs.org/material-design-icons-iconfont/-/material-design-
icons-iconfont-5.0.1.tgz",
"integrity": "sha512-Xg6rIdGrfySTqiTZ6d
+nQbcFepS6R4uKbJP0oAqyeZXJY/bX6mZDnOmmUJusqLXfhIwirs0c++a6JpqVa8RFvA=="
},
Go Frontend подскажи пожалуйста,а вот на TH-cam например колочольчик,это ведь по сути всплывающий popup тоже?и как его написать?)
Спасибо за урок, только на самом деле это не универсальный компонент.
Нужно было использовать store, и там поработать с action и getters, чтобы не использовать emit.
А почему не используете стрелочные функции для сохранения контекста?
Victor Cozhuhari потому что не привык:) они более короткие и красивые, но из-за специфики как раз контекста можно запутаться и потом огрести багов:) дело вкуса
@@gofrontend2220 Согласен. Я сразу чётко уяснил их отличие именно в плане контекста, пользуюсь там, где надо, и это экономит много повторяющихся действий. Мне они, кстати, наоборот, не нравятся в плане красоты, но как инструмент они хороши
@@vitiok78 Главное чтоб было удобно самому и не мешало другим, если таковые есть )
Возвращайся на ютуб!
Напутствие к просмотру, если вы пришли сюда ради Vue, а не CSS:
L = +10 сек
J = -10 сек
Shift+> = ускорить (нажимаем 4 раза)
Здравствуйте! Как из потомка получить доступ к computed родителя? получение метода идет через emit, а вычисляемые свойства как?
Kamil Fataliev во-первых эмит не получает доступ к методу родителя. Эмит поднимает метод из дочернего компонента и обрабатывает его методом родителя. Доступа у дочернего компонента не. Вообще ни к чему вне себя самого. Но вы можете передать дочернему компоненту какой-нибудь компьютед через props. и в дочернем принимаете в разделе props
@@gofrontend2220 Здравствуйте! Делаю по видео попап для каждой карточки товара, но при открытии разных карточек данные в ней идут от первой карточки, что я мог упустить? Единственное отличие от вашего видео это то что модалка сделана на бутстрапе, но это ведь не важно насколько я понял
Kamil Fataliev не важно да. Надо код смотреть. Попап показывает то, что в него передали. Смотрите почему в него прилетает только первая карточка
Go Frontend попозже у компа буду, код может отправлю, возможно кэш браузера фигней страдает , гляну отпишусь, спасибо
*Привет мир*
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
Почему компоненты называются с приставкой v-? Нельзя по расширению файлов понять, что используется vue?
Jeqtos просто так. Мне так нравится. И v к vue никакого отношения не имеет
посмотрите *Урок 8/8. Refactoring приложения Vue. Best-practise* там подробно объясняется.
Если кратко, то любой префикс можете придумать, это чтобы с родными html тегами не пересечься
Garik Gelios есть еще такой момент: у вас могут быть общие компоненты и проектные. Так вот общие могут быть потом вынесены в другой проект. И чтобы не путаться какие общие, а какие чисто проектные - проектные должны как-то отличаться по названию. Вот и все.
На сколько оправдано использовать emit для поднятия события в родителя?
Я привык пропсами принимать ссылку на функцию в модалке, в вашем случае addToCart из родителя
Kempriol а как еще поднять событие из ребенка в родителя, кроме как эмитом? Ну можно еще шину событий делать. Но имхо эмит проще
Kempriol а пропсы работают только вниз. Из родителя в ребенка
Kempriol а я понял. Нет ну можно как вы делать. Просто типа по бест практису: props это вниз, emit это наверх
@@gofrontend2220 да, получается из ребенка я вызываю метод родителя. спасибо за ответ.. я так же и модалки люблю закрывать из родителя))
Kempriol а вот это плохо. Все методы, которые касаются только компонента должны быть в компоненте. Смотрите, что проще, 1 раз прописать в компоненте модалки метод закрытия по клику вне? Или же каждый раз это делать в родителе? А если у вас 20 ррдителей с этими модалками? 20 методов:) вы просто можете настроить и так и так. Например клик вне модалки - этот метод пишем в компоненте, но так же модалка может получать какой то пропс и следить за ним. И если пропс изменился из родителя - закрыть/открыть попап
При добавлении айтема в корзину стоит ли этом случае делать кнопки disabled?
Андрей StT а как душе угодно. Либо дизейблить и менять на них текст, типа ДОБАВЛЕНО или В КОРЗИНЕ. Либо оставлять как есть, но как то по-другому намекать пользователю о том, что товар добавлен. Напрример уведомлениями, про которые будет урок скоро.
@@gofrontend2220 здравствуйте! А если мы например добавили и при добавлении поменяли текст на ДОБАВЛЕНО, как вы сказали, каким образом сделать так чтобы при повторном нажатии кнопка перевела нас в корзину, а не добавила товар еще раз?
Kamil Fataliev ну поставте на это условие router.push({name: корзина}) как то так
isVisible = !isVisible, а не 2 отдельных метода
Ну такое +/- Со многим не согласен.
нихрена не понял) у меня есть некоторый проект я пытался интерполировать на свой кейс, но вообще не але. спасибо за видео но образовательным его можно назвать только если код ваш копипасить, с точки зрения полезности в плане урока инфы то ее тут мало . без обид)