Хорошие уроки. Немного запутался в последовательности. Прошел 8 уроков, потом пропала последовательность. Но это мелочи. Желаю автору больше свободного времени и вдохновения для написания новых уроков!!!
Для скрытия окна я использовал метод проще и, как мне кажется, правильней, передал по клику $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==" },
Хороший урок. Спасибо. Если есть возможность, увеличьте масштаб, плохо видно. И можно же метод не задавать кнопке, можно просто же директиву 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 что написал я - это самое простое решение:)
Спасибо за урок, только на самом деле это не универсальный компонент. Нужно было использовать store, и там поработать с action и getters, чтобы не использовать emit.
Victor Cozhuhari потому что не привык:) они более короткие и красивые, но из-за специфики как раз контекста можно запутаться и потом огрести багов:) дело вкуса
@@gofrontend2220 Согласен. Я сразу чётко уяснил их отличие именно в плане контекста, пользуюсь там, где надо, и это экономит много повторяющихся действий. Мне они, кстати, наоборот, не нравятся в плане красоты, но как инструмент они хороши
посмотрите *Урок 8/8. Refactoring приложения Vue. Best-practise* там подробно объясняется. Если кратко, то любой префикс можете придумать, это чтобы с родными html тегами не пересечься
Garik Gelios есть еще такой момент: у вас могут быть общие компоненты и проектные. Так вот общие могут быть потом вынесены в другой проект. И чтобы не путаться какие общие, а какие чисто проектные - проектные должны как-то отличаться по названию. Вот и все.
Kamil Fataliev во-первых эмит не получает доступ к методу родителя. Эмит поднимает метод из дочернего компонента и обрабатывает его методом родителя. Доступа у дочернего компонента не. Вообще ни к чему вне себя самого. Но вы можете передать дочернему компоненту какой-нибудь компьютед через props. и в дочернем принимаете в разделе props
@@gofrontend2220 Здравствуйте! Делаю по видео попап для каждой карточки товара, но при открытии разных карточек данные в ней идут от первой карточки, что я мог упустить? Единственное отличие от вашего видео это то что модалка сделана на бутстрапе, но это ведь не важно насколько я понял
На сколько оправдано использовать 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)
![[ВАЖНО - Читай описание] Универсальный компонент Слайдер (carousel) на Vue.js без плагинов!](/img/n.gif)
Спасибо добрый человек!) Я наконец понял для чего нужны слоты
Алмаз Фахрутдинов наздоровье:)
Спасибо, то что доктор прописал 😉
Борис Черников наздоровье:)
Отлично. Все получилось, понятно объясняете. 👍
Отличнейший урок! Спасибо за труды
Читешь доки все понятно. Потом думаешь: 'а зачем?' Потом смотришь видос и приходит первое понимание. Спасибо.
Спасибо! Ты объяснил то чего нет в оф документации...
Отлично, все работает, очень полезный урок
Хорошие уроки. Немного запутался в последовательности. Прошел 8 уроков, потом пропала последовательность. Но это мелочи. Желаю автору больше свободного времени и вдохновения для написания новых уроков!!!
Классно!
Вот только звук тихий, но видео очень крутое!!
Спасибо большое за труд!!
Timmi Nero да со зауком я дальше разобрался:)
Отличное объяснение , в 11 видео , vm.selected = category.name)
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
💪🚀🚀
jenesius-vue-modal для Vue3 отличный инструмент
Для скрытия окна я использовал метод проще и, как мне кажется, правильней, передал по клику $event в функцию, где: if (event.path[0] == this.$refs.editor_wrap) {this.show_editor = !this.show_editor}
Может кому пригодится.
Было бы очень полезно, если бы вы могли в самом начала показать результат, то что мы хотим сделать, а после уже рассказывать про реализацию.
Пришлось сначала перемотать в самый конец, а потом уже понял что это то что мне нужно и начал смотреть. Но лукас я всё равно поставлю
я по-другому реализовал, без слотов и рефс. через v-show и @close
Я хз где тот комент, где спрашивали, но на всякий случай оставлю это здесь 😁
На 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=="
},
Хороший урок. Спасибо. Если есть возможность, увеличьте масштаб, плохо видно. И можно же метод не задавать кнопке, можно просто же директиву 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, ещё проще действует)
4:15 Стили не желательно так писать т.к. это усложняет поиск потом для следующего программиста этого стиля
Возвращайся на ютуб!
Спасибо за урок, только на самом деле это не универсальный компонент.
Нужно было использовать store, и там поработать с action и getters, чтобы не использовать emit.
А почему не используете стрелочные функции для сохранения контекста?
Victor Cozhuhari потому что не привык:) они более короткие и красивые, но из-за специфики как раз контекста можно запутаться и потом огрести багов:) дело вкуса
@@gofrontend2220 Согласен. Я сразу чётко уяснил их отличие именно в плане контекста, пользуюсь там, где надо, и это экономит много повторяющихся действий. Мне они, кстати, наоборот, не нравятся в плане красоты, но как инструмент они хороши
@@vitiok78 Главное чтоб было удобно самому и не мешало другим, если таковые есть )
Go Frontend подскажи пожалуйста,а вот на TH-cam например колочольчик,это ведь по сути всплывающий popup тоже?и как его написать?)
*Привет мир*
Напутствие к просмотру, если вы пришли сюда ради Vue, а не CSS:
L = +10 сек
J = -10 сек
Shift+> = ускорить (нажимаем 4 раза)
Почему компоненты называются с приставкой v-? Нельзя по расширению файлов понять, что используется vue?
Jeqtos просто так. Мне так нравится. И v к vue никакого отношения не имеет
посмотрите *Урок 8/8. Refactoring приложения Vue. Best-practise* там подробно объясняется.
Если кратко, то любой префикс можете придумать, это чтобы с родными html тегами не пересечься
Garik Gelios есть еще такой момент: у вас могут быть общие компоненты и проектные. Так вот общие могут быть потом вынесены в другой проект. И чтобы не путаться какие общие, а какие чисто проектные - проектные должны как-то отличаться по названию. Вот и все.
Здравствуйте! Как из потомка получить доступ к computed родителя? получение метода идет через emit, а вычисляемые свойства как?
Kamil Fataliev во-первых эмит не получает доступ к методу родителя. Эмит поднимает метод из дочернего компонента и обрабатывает его методом родителя. Доступа у дочернего компонента не. Вообще ни к чему вне себя самого. Но вы можете передать дочернему компоненту какой-нибудь компьютед через props. и в дочернем принимаете в разделе props
@@gofrontend2220 Здравствуйте! Делаю по видео попап для каждой карточки товара, но при открытии разных карточек данные в ней идут от первой карточки, что я мог упустить? Единственное отличие от вашего видео это то что модалка сделана на бутстрапе, но это ведь не важно насколько я понял
Kamil Fataliev не важно да. Надо код смотреть. Попап показывает то, что в него передали. Смотрите почему в него прилетает только первая карточка
Go Frontend попозже у компа буду, код может отправлю, возможно кэш браузера фигней страдает , гляну отпишусь, спасибо
На сколько оправдано использовать emit для поднятия события в родителя?
Я привык пропсами принимать ссылку на функцию в модалке, в вашем случае addToCart из родителя
Kempriol а как еще поднять событие из ребенка в родителя, кроме как эмитом? Ну можно еще шину событий делать. Но имхо эмит проще
Kempriol а пропсы работают только вниз. Из родителя в ребенка
Kempriol а я понял. Нет ну можно как вы делать. Просто типа по бест практису: props это вниз, emit это наверх
@@gofrontend2220 да, получается из ребенка я вызываю метод родителя. спасибо за ответ.. я так же и модалки люблю закрывать из родителя))
Kempriol а вот это плохо. Все методы, которые касаются только компонента должны быть в компоненте. Смотрите, что проще, 1 раз прописать в компоненте модалки метод закрытия по клику вне? Или же каждый раз это делать в родителе? А если у вас 20 ррдителей с этими модалками? 20 методов:) вы просто можете настроить и так и так. Например клик вне модалки - этот метод пишем в компоненте, но так же модалка может получать какой то пропс и следить за ним. И если пропс изменился из родителя - закрыть/открыть попап
При добавлении айтема в корзину стоит ли этом случае делать кнопки disabled?
Андрей StT а как душе угодно. Либо дизейблить и менять на них текст, типа ДОБАВЛЕНО или В КОРЗИНЕ. Либо оставлять как есть, но как то по-другому намекать пользователю о том, что товар добавлен. Напрример уведомлениями, про которые будет урок скоро.
@@gofrontend2220 здравствуйте! А если мы например добавили и при добавлении поменяли текст на ДОБАВЛЕНО, как вы сказали, каким образом сделать так чтобы при повторном нажатии кнопка перевела нас в корзину, а не добавила товар еще раз?
Kamil Fataliev ну поставте на это условие router.push({name: корзина}) как то так
isVisible = !isVisible, а не 2 отдельных метода
Ну такое +/- Со многим не согласен.
нихрена не понял) у меня есть некоторый проект я пытался интерполировать на свой кейс, но вообще не але. спасибо за видео но образовательным его можно назвать только если код ваш копипасить, с точки зрения полезности в плане урока инфы то ее тут мало . без обид)