web_05.md 26 KB
Vue.js
#11 Криптономикон-2
Материалы к скринкасту:
- Исходный HTML/CSS для самостоятельного повторения
- реактивность во Vue3:
- Исходный код урока
- API для получения ключа:
Расшифровка скринкаста:
Дисклеймер Код который мы пишем в рамках этого урока все еще является недостаточно хорошим для продакшена. Прежде чем пытаться нести эту практику в реальные проекты пожалуйста посмотрите серию видео с разработкой этого приложения до конца
Мы с вами освоили добавление и удаление элементов. Давайте добавим еще и выбор потому что при выбранном элементе должен отображаться вот этот график
с этим достаточно просто мы берем и говорим так выбор выбранный элемент изменяется с течением времени когда мы слышим что что-то меняется с течением времени мы говорим это состояние назову его sale первоначально ничего не выбрано поэтому ну хорошо и очевидно что при клике по элементу я хочу выбирать записывать в сел то что было выбрано да' поэтому игры вот мой before en-tee-ter си при клике записывать и заодно демонстрируя что вот здесь можно писать напоминают шрифтовые выражения не только вызовы функций как мы проверим что у меня что-то выбралось давайте для теста выведем сау вот так обновлю страничку и вот видите действительно меняется и теперь я могу дописать логику чтобы вот этот блок отображался только когда у меня есть сау вот это section если сел и точно также извините давайте писать правильно и он говорит так вы их пожалуйста давайте мы разместим дом и говорю что при клике на кнопочку устанавливаем сел вынул проверяем выбралась закрылась работает круто правда убираю вывод нашего сел хорошо двигаемся дальше в нашем случае мы хотим чтобы у нас выделялись цветом как происходит выделение цветом у нас тут написано что видите border иметь цвет карпова 700 он solid единственное чего нам не хватает css класса который указывает толщину борта ран как же мы это делаем мы уже знаем что для того чтобы прицепить атрибут к классу мы можем написать : глаз и здесь мы можем написать если села равен т то пустая the border 4 в противном случае пустая строка мы не можем здесь написать их почты их ничего не возвращает а так у нас будет жива скриптовые выражение до тернарный оператор смотрите 1 работает здесь я хочу обратить ваше внимание на то что это абсолютно нормально совмещать в одном определении просто допустим класс через равно и через двоеточие это означает что вот эта статическая часть это динамическое текст но согласитесь выглядит дико уродливо поэтому для классов view предлагает несколько синтаксиса синтаксис массивов с ним можете ознакомиться сами он менее распространен а часто же используют так называемый объектный синтаксис когда мы здесь пишем объект в котором ключами являются имена классов в моем случае the border 4 а значением логическое выражение который отвечает надо ли добавлять этот класс или нет то есть я пишу вот так и это читается добавь класс border 4 если сел равен то обратите внимание здесь точно также может быть вызов метод а вот мы добились желаемого так и давайте оживим чтобы здесь было не везде раз мы теперь знаем а мы можем написать сел на эбу обновляем и 50 м от вадима 3 так жмем dima 2 удалить ой а как так получилось что нажал кнопку удалить а выбралась происходит это потому что так работает жира скрипт да вы кликаете на кнопочку которая находится здесь генерируется события и это событие как вы прекрасно знаете начинает всплывать что означает всплытия события для нас оно означает что все элементы в которые вложены это а это в том числе и наш элемент тоже получат события клик и соответственно будет нехорошо что мы можем сделать мы можем вспомнить что в удалить приходит ивенты сделать ему что мы делаем java скрипте стоп про погибшим до прекратить всплыть и новью и здесь нам помогает и поэтому у нас для клика где наша кнопочка удалить вот она точно также для всех событий есть модификатор стоп прекратить всплытие давайте проверим на всякий случай обновлю страничку ветер дома 2 больше не выбралась это не единственный модификатор со списком модификаторов рекомендую ознакомиться самостоятельно хорошо теперь давайте пора начинать ходить за реальными данными для того чтобы ходить за реальными данными мне понадобится здесь кнопочка api до напоминаю что надо зарегистрироваться на крипто кампер чтоб получить бесплатный ключ очевидно что мне нужен price tag спасибо здесь у меня есть документация и вот здесь есть синглу символ прайс она передается f сам test the sims хорошо давайте сделаем так я беру и говорю цепь интервал буду каждые три секунды ходить на сервер дальше я говорю значит konce эфрона away ага ей мне пальца вы значит а sing сходив в чём на https mina pi крип так compair коп до the price tag дальше конечно же не помню совсем ивсем это из какого киккера получать это очевидно бти кир у нас лежит в переменной ньюте черный ему да вот который мы добавляли обратите внимание здесь нельзя использовать за стикер подумайте почему и the sims куда меня интересует везде и api ключ мы должны обязательно передать до переходим назад переходим в наши api ключ и и копирую его сюда чтобы прям его сюда и вставить так так дальше как мы знаем после результатов и чак надо дождаться f джейсон и давайте ради теста сделаем консоль log data посмотрим что нам там приходит открываем наше творение удаляем эти добавляем тикер убить icy ждём 3 секундочки и вот смотрите нам приходит витязь и везде хорошо берем и пишем new kicker . прайс равно дата . везде только давайте ну хотя давайте вот пробуем давайте вообще приведем наше приложение приличный вид то есть здесь делаем пусто удалим дефолтное значение и добавляем 5 7 ничего нет подождите как же так вот у меня все выводилось берите действительно цена приходит как так то юпитер . прайс я туда записываю что получается не реактивно как же так рассказывали что view весь такой реактивный давайте попробуем чуть по другому зыс я беру в киккера ххх раз так найду пожалуй среди них тикер у которого имя такое же как у тизерные хотя странно и живот его просто пушил сюда iv прайс пишу дата везде ведь попробуем добавляем хитер ждём 3 секунды о заработало как так то получается тут мой реактивный тут нет придется разбираться но этим мы займемся в следующем видео давайте то пайку да какой который хайпанул согласитесь выглядит ужасно давайте сделаем красиво для того чтобы было красиво я напишу следующую логику что если да то и изгибаешь и единицы то есть цена больше одного доллара то выводе пожалуйста с точностью до двух знаков в противном случае выводе если оно меньше выводе с точностью два знака после запятой по два значащих знака the prestige едва означает что там может быть много много нулей некоторые монетки стоят достаточно дешево но там всегда будет ровно два значащих знака возьмите 0069 это вот три знака по что первый нолик попроси шин витязь и круто работает хорошо самое время добавить график торговли сейчас видимо не идет потому что они ну медицина идет не так активно похоже потому что цена медленно изменяется давайте добавим график напоминаю что мы вот выделяем и вот здесь должен быть график соответственно говорим график для графика нужны данные эти данные изменяются с течением времени значит это что правильно состояния назову его угров это данные состояния хорошо теперь что я я такой смотрю ум когда у меня данные вот здесь обновились это рю если текущий выбранный элемент равен на моему секиру который обновлялся давайте может new new мне не очень нравится переименуем is new два первых давайте сделаем из граф push дата ее здесь сохранив график данные так хорошо и мне не очень не очень нравится эта операция при factory недоступна интересно почему я тогда не горды руками переименую назову его карен тикер здесь просто ради того чтобы было чуть-чуть более понятно что это такое карен ticker карен тикер коран ticker хорошо и давайте выводить график но график как мы будем выводить смотрите у нас же есть конкретная высота ячеек нас есть максимальная высота нам надо как то сделать так чтобы они не уходили ну то есть как то добить до этой высоты поэтому мы будем из управлять высотой с помощью тега style мы такие давайте возьмем как нам выводить историю очевидно с помощью тегов и for где один ген этот рисуется покажись мне вот она вот эти полосочки до удаляю оставляю одну удаляю тега h20 класс аж 24 который отвечает за высоту этой в 1 пока оставлю его просто увидели и говорю что выводе эти девы с помощь для каждой бар полоска in граф сохраняю и он не жалуется что барни использован что в общем-то логично и мы два первых добавляем kay мы же помним что нам нужен когда у нас нету ничего отличительного уникального элемента мы можем взять индекс это не самая лучшая практика мы будем детально говорить о том что зачем и почему и будем пробовать сохраняем перезагружаем чтобы убрать вот эти вот старые наши творения добавляем 5 7 кликаем и ждем через три он смотрите пока эти полосочки не имеют правильной высоты но они уже появляются хотя бы теперь что касается правильной высоты я хочу воспользоваться точно так же как и биржу класс я могу сделать ставил и точно так же могу здесь передать объекте и сказать что хоть и высота очевидно что я буду управлять процентов при них не известны ни какие пиксели ничего не хочу хардкоре что высота будет допустим бар процент до так там не справедливо сказал а чего это ты тут поставил и горит человек этой кавычки забыл мы даже атрибут так но в графья что сохраняем настоящую цену сейчас скорее всего что-то пойдет не по плану ухухуху 447 тысяч триста девять процентов так нам нужно привести граф в божеский вид я задам нормала из граф создам функцию в которой что я сделаю я найду максимальное значение в моем графике масс макс из граф найду минимальное значение в моем графике и дальше сделаю следующее для каждого элемента графика поэтому map я возьму вычту из него минимальное минимальное значение иначе понимаете если я буду просто приводить в процентах то разницу в сотых долях вы не увидите на такой огромной цифры 47 1327 вычту минимальное значение и разделю на разницу между максимальным значением и минимальным и что получить проценты умножу это на 100 только не 3 конечно a price так и теперь я буду рисовать график своим we forom где-то у меня вот он не от графа out нормала из графы тоже метод его надо вызвать давайте пробовать бить эссе добавляем так факир был пьяный фокус не удался давайте посмотрим что у нас за стиле здесь повешай уселись это ошибки повесь посыпались кино 3 тб рапорте name if we sell скажите мне не понятно давайте посмотрим кино 3 тб рапорте name of нал логично поэтому здесь может не быть текущего выделенного значения все конечно странно что это сейчас происходит но поставим ? да чтобы говорить что если у нас засел ну а это нормально чтобы он не пытался брать уныло поле name да заодно воспользовались современным чего скриптовом синтаксисом смотрим давайте обновим страницу кем всегда держите консоль открытое и отведите мы сейчас не держали пропустили что-то интересное так пока работает ну что ж со стилями посмотрите хайд 0 хоть 102 отведите он начал двигаться вот только согласитесь вот этот хит 0 ведь их bitcoin растет поэтому вот здесь оказалась минимальной зачем выглядит достаточно уродливо давайте мы чуть-чуть с че че рим и добавим следующее что 5 процентов высоты будет всегда поэтому мы говорим что прайс это 5 + и умножаем не на 101 95 ну то есть нижняя часть полосочки будет всегда ноги попробуем дети 7 давайте снова вернем в мир выбрать давайте все-таки уберем там на высоту по умолчанию вот а наш 24 она была в целях и ведь и сразу она правильно выставил а так давайте добавим следующую монетку должен так ой а график то не очистился ну можешь есть а где у нас здесь у нас выбор нам при выборе надо этого салата нам надо еще очищать историю мы конечно можем написать здесь через запятую опять же бонусом узнать как это работает но давайте все-таки сделаем вменяемо я здесь сделали select key и допишу метод ссылок ну чтобы не писать логику в шаблоне много кода в шаблоне это плохо ссылок trekker я говорю из равно тики и диск 1 равно пустой массив и не забываю поставить запятую обновляю страницу 5 7 до кто у нас есть биткойн кэш допустим эфир так смотрим график эфира ждем так интересно на что мы опять жалуемся мы себе вы видели она странно себя очень ведет давайте смотреть файлы тусич ум возможно мы часто прошиваем давайте поднимем с трех секунд до 5 но это же будет проблемой пробуем еще раз здесь итоге ты и заодно смотрим на консольку было ли что-то у нас хотя не очень понятно пока что это за файл и кто fitch на вы посмотреть так на чьей как я вечно забываю убрать этот тайм лайн чтобы он мне не мешал что я запросы ведь вижу вот они на той май на таймлайне рисуются так хром периодически обновляют dev tool и за это вам так свет мой зеркальце с тузами скажем я вот вижу вот над осилить он каждый раз выполняет запрос и так это overview что-то случай с тузами что ты не хочешь мне показывать соседи но лишь 8 0 из девяти request of a а галочка стоит блок это request все вот все у нас хорошо пошло да вот у нас идут много-много опроса давайте в этом графика 5 и посмотрим он должен через три секунды появится обновиться вот действительно эти появился первый элемент теперь 2 и теперь он постепенно будет улучшаться и вот видите работает наши вот эти минимальные пять процентов дает понять что сейчас вот на тех двенадцати секундах который мы смотрели на биткойн он вот падает вниз сильно и вот только что скакнул вверх ведь все поменялось соответственно в принципе в принципе первая итерация нашего подхода закончена что мы узнали сегодня сегодня мы узнали что с реактивностью все не так очевидны и почему-то вот здесь я прям оставлю здесь это комментариям очевидная запись карен тикер . прайс равно наше выражение вот это не заработала почему нам еще предстоит разобраться мы разобрали что в принципе тогда реактивность работает она работает хорошо опять же нам не пришлось ничего думать не шаблонах ни о чем мы вспомнили что витория когда нам не нужен когда нам нету кея за которого прицепиться в данных то есть нету уникальной составляя мы можем использовать яндекс мы вспомнили что в хоре как и везде можно вот здесь писать не просто переменные которые описаны в дата а выражение в данном случае у нас это вызов нашего метода ну и чуть чуть поигрались с реальным и api сходили на сервер начали отправлять реальные запрос и теперь нам предстоит двигаться дальше наш злобный тысячник ну то есть виртуальный человек который ставит наш этих не технические задания перед нами будет требовать все новых и новых фич и мы с вами будем их добавлять и смотреть во что превращается наш код и разговаривать что такое хорошо и что такое плохо
Задание