ребят никто не понимает в чем косяк может быть?

Вот есть готовый паг файл, как его засунуть в ву? В теории можно зареквайрить файл и кинуть в v-html ? А можно как-то чистый html вставить без лишнего тега, в котором v-html прописан?

? Хм pug = require('pug-loader!./component.pug') v-html="component({ attrs })"

почему от одного компонента на одной странице такие тупянки

Добрый день ребят! Хочу перейте с sass на stylus. Я использую в проекте глобальные переменные, но когда я устанавливаю stylus, то при указании в vue.config.js loaderOptions как в sass не работает: module.exports = { css: { loaderOptions: { stylus: { data: ` @import "@/sass/_variables.styl"; @import "@/sass/_functions.styl"; ` } } } } этот код не работает. если нужны глобальные переменные то это только по части sass?

просто в подключенном файлике .styl укажи попробуй

просто один в панели, а другой в центре страницы, а тот который в панели тупит

просто в подключенном файлике .styl укажи попробуй

так все указано module.exports = { css: { loaderOptions: { stylus: { data: ` @import "@/sass/_variables.styl"; @import "@/sass/_functions.styl"; ` } } } }

? Хм pug = require('pug-loader!./component.pug') v-html="component({ attrs })"

я так понимаю ты хочешь в .vue файлах вместо template зарекваирить готовый .pug?

да да

И еще атрибуты туда преплести

просто в подключенном файлике .styl укажи попробуй

sass просто папка в которой раньше лежали scss файлы, еще не переименовал, пути павильные

да да

по идее просто <template src="template.pug" lang="pug" />

по идее просто <template src="template.pug" lang="pug" />

Сейчас попробую... А атрибуты?

Сейчас попробую... А атрибуты?

не понимаю о каких аттрибутах речь идет

https://bootstrap-vue.js.org/ Норм, кто-то использует?

норм.

не понимаю о каких аттрибутах речь идет

a(class='ui-link' href={href} target={target}) #{content}

a(class='ui-link' href={href} target={target}) #{content}

Не могу ответить. vue-way это :href="href" ,т.е данные со вью приходят. А как с аттрибутами сделать, без понятия

Ребята, использую миксин. После перехода на другуй страницу по роутер-линку, он как будто не подхватывается. Перезагружаешь страницу - все нормально, переходишь на вторую страницу - ошибка...

А, понял. При переходе на новую страницу продолжает выполняться функция со старой страници, а элемент, который она использует. уже не существует в DOM. А как её заставить перестать выполняться?

А, понял. При переходе на новую страницу продолжает выполняться функция со старой страници, а элемент, который она использует. уже не существует в DOM. А как её заставить перестать выполняться?

на onDestroy снять обработчик

Все, понял...

на onDestroy снять обработчик

Это где?

В destroyed?

Это где?

в компоненте где навешиваешь

что бы до перехода снять обработчик

В destroyed?

before destroy

потому что в destroyed у тебя уже не будет элемента

https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Спасибо, это понятно. Возможно, тупой вопрос, но как снять такой обработчик: methods: { scrollPage: function () { let context = this; window.addEventListener('scroll', function () { context.showElems(); }) }, }

сохранить ссылку на обработчик

То есть?

this.handler = function () {} window.addEventListener('scroll', this.handler) window.removeEventListener('scroll', this.handler)

this.handler = function () {} window.addEventListener('scroll', this.handler) window.removeEventListener('scroll', this.handler)

контекст this продолбается

handler = this.handler.bind(this) window.addEventListener(eventName, handler) window.removeEventListener(eventName, handler)

можно сразу сделать функцию для unsubscribe и вызвать ее потом

this.unsubscribe = () => window.removeEventListener(eventName, handler)

К сожалению, ни разу такого не делал... Спасибо, надеюсь разберусь.

стоит выучить js тогда )

это базовая работа с ивентами

Хорошая идея ?

ну не суть, главное сохранить обработчик, а в каком контексте он нужен - это зависит от программиста

ну не суть, главное сохранить обработчик, а в каком контексте он нужен - это зависит от программиста

вот эта не суть - постоянно встречается у мидлов даже

продолбают контекст и потом удивляются

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

Ребят, всем привет. Подскажите, vue-cli (или другая утилита) может таргетированно взять один файл .vue, и сделать из него бандл? Конкретно один компонент

для того чтобы не терять контекст - есть стрелочные функции

и они ок

обычные функции js нужны уже реже

Структура та же

вот так работает: const path = require('path') module.exports = { css: { loaderOptions: { stylus: { import: [ path.resolve(__dirname, './src/sass/_variables.styl') ] } } } } но в доках vue cli 3 описан процесс только с sass. вы можете сказать есть подводные камни у этого способа?

обычные функции js нужны уже реже

стрелочные функции это сахар

и некоторые внезапно пишут на es5

наличие сахара не освобождает от потребности понимать как это работает

а пихать везде стрелочные фукнции - это пиздец

зачем замыкание там где его не должно быть

чаще всего оно нужно чем нет

вот так работает: const path = require('path') module.exports = { css: { loaderOptions: { stylus: { import: [ path.resolve(__dirname, './src/sass/_variables.styl') ] } } } } но в доках vue cli 3 описан процесс только с sass. вы можете сказать есть подводные камни у этого способа?

А какие у тебя мысли на тему подводных камней?

но спорить не буду

чаще всего оно нужно чем нет

ты забываешь сказать что это твое имхо и в твоем случае ;)

чаще всего надо избавиться от контекста

для оптимизации работы с gc

ок, хорошо. Расскажите в каких ситуациях оптимизации такого рода оправданы?

игры?

во всех случаях

ERROR: S client not available

не допущение переиспользования памяти и тем более ее утечки - это атрибут хорошего программиста

могу скинуть список литературы для развития

а пихать везде стрелочные фукнции - это пиздец

Че

Хорошо, давайте, спасибо.

Они чаще нужны чем нет

Да и пишутся короче

Они чаще нужны чем нет

нет такой статистики

еще раз - не все используются babel

нет такой статистики

Я провёл

Алекс, а можно так: let context = this; window.removeEventListener('scroll', context.showElems) Так у меня все работало, а с байндом - ошибка...

Алекс, а можно так: let context = this; window.removeEventListener('scroll', context.showElems) Так у меня все работало, а с байндом - ошибка...

покажи как с байндом делал

А какие у тебя мысли на тему подводных камней?

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

покажи как с байндом делал

scrollPage: function () { let showElems = this.showElems.bind(this) window.addEventListener('scroll', showElems) }, destroyScrollPage: function () { let showElems = this.showElems.bind(this) window.removeEventListener('scroll', showElems) }, }, mounted: function () { this.$nextTick(function () { this.showElems(); this.scrollPage(); }) }, beforeDestroy: function () { this.destroyScrollPage(); }

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

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

> showElems это props? скорее всего потер старый контекст.

Ой, сори, метод

Хорошо, давайте, спасибо.

https://www.labirint.ru/books/656404/ https://www.labirint.ru/books/632959/ https://www.labirint.ru/books/571060/ https://www.labirint.ru/books/643363/ https://www.labirint.ru/books/641481/ https://www.labirint.ru/books/634082/ https://www.labirint.ru/books/642466/

Ух ес3

scrollPage: function () { let showElems = this.showElems.bind(this) window.addEventListener('scroll', showElems) }, destroyScrollPage: function () { let showElems = this.showElems.bind(this) window.removeEventListener('scroll', showElems) }, }, mounted: function () { this.$nextTick(function () { this.showElems(); this.scrollPage(); }) }, beforeDestroy: function () { this.destroyScrollPage(); }

ты дважды зачем делаешь

scrollPage: function () { let showElems = this.showElems.bind(this) window.addEventListener('scroll', showElems) }, destroyScrollPage: function () { let showElems = this.showElems.bind(this) window.removeEventListener('scroll', showElems) }, }, mounted: function () { this.$nextTick(function () { this.showElems(); this.scrollPage(); }) }, beforeDestroy: function () { this.destroyScrollPage(); }

там где навешиваешь addEventListener

создай unsubscribe функцию

и вызови ее в хуке потом

https://www.labirint.ru/books/656404/ https://www.labirint.ru/books/632959/ https://www.labirint.ru/books/571060/ https://www.labirint.ru/books/643363/ https://www.labirint.ru/books/641481/ https://www.labirint.ru/books/634082/ https://www.labirint.ru/books/642466/

спасибо

Почему дважды?

scrollPage: function () { let showElems = this.showElems.bind(this) window.addEventListener('scroll', showElems) }, destroyScrollPage: function () { let showElems = this.showElems.bind(this) window.removeEventListener('scroll', showElems)

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

я тоже не вижу. я шарил по докам sass-loader и stylus-loader, и понял, что похожу data: @import... это специфика именно sass-loader.

создай unsubscribe функцию

Не понял ?

надо не забывать о ссылках в js

scrollPage() { handler = this.showElems.bind(this) window.addEventListener('scroll', handler) this.unsubscribe = () => window.removeEventListener('scroll', handler) }, destroyScrollPage() { this.unsubscribe() }

еще я видел style-resources-laoder https://cli.vuejs.org/ru/guide/css.html#%D0%B0%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5-%D0%B8%D0%BC%D0%BF%D0%BE%D1%80%D1%82%D1%8B может его использовать, вместо loaderOptions? честно сказать я не совсем понял чем они отличаются, если не учесть, что loaderOptions как я понимаю указаные файлы до компиляции ипортирует а style-resources-laoder уже в каждый файл