|
|
@@ -11,433 +11,222 @@
|
|
|
|
|
|
* [Исходный HTML/CSS для самостоятельного повторения](https://gitlab.com/vuejs-club/youtube-course/cryptonomicon-html)
|
|
|
* [реактивность во Vue3:](https://ru.vuejs.org/guide/essentials/reactivity-fundamentals.html)
|
|
|
-* [Исходный код урока](https://gitlab.com/vuejs-club/youtube-course/cryptonomicon/-/tree/lesson2)
|
|
|
* [API для получения ключа:](https://www.cryptocompare.com/)
|
|
|
|
|
|
**Расшифровка скринкаста:**
|
|
|
|
|
|
->**Дисклеймер** Код который мы пишем в рамках этого урока все еще является недостаточно хорошим для продакшена. Прежде чем пытаться нести эту практику в реальные проекты пожалуйста посмотрите серию видео с разработкой этого приложения до конца
|
|
|
-
|
|
|
-Мы с вами освоили _добавление_ и _удаление_ элементов. Давайте добавим еще и выбор потому что
|
|
|
-при выбранном элементе должен отображаться вот этот график
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- с этим
|
|
|
-достаточно просто мы берем и говорим так
|
|
|
-выбор выбранный элемент изменяется с
|
|
|
-течением времени когда мы слышим что
|
|
|
-что-то меняется с течением времени мы
|
|
|
-говорим это состояние назову его 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 больше не
|
|
|
-выбралась это не единственный
|
|
|
-модификатор со списком модификаторов
|
|
|
+>**Дисклеймер** Код который мы пишем в рамках этого урока все еще является недостаточно хорошим для продакшена. Прежде чем пытаться нести эту практику в реальные проекты пожалуйста посмотрите серию видео с разработкой этого приложения до конца.
|
|
|
+
|
|
|
+Мы с вами освоили _добавление_ и _удаление_ элементов. Давайте добавим еще и выбор, потому что при выбранном элементе должен отображаться график.
|
|
|
+
|
|
|
+С этим достаточно просто мы берем и говорим "выбранный элемент изменяется с
|
|
|
+течением времени". Когда мы слышим что что-то меняется с течением времени мы
|
|
|
+говорим это "состояние". Назову его _sel_. Первоначально ничего не выбрано поэтому `null`:
|
|
|
+
|
|
|
+```js
|
|
|
+ const sel = ref(null)
|
|
|
+```
|
|
|
+
|
|
|
+И очевидно, что при клике по элементу я хочу записывать в _sel_ то что было выбрано.
|
|
|
+
|
|
|
+```vue
|
|
|
+<div
|
|
|
+ v-for="t in tickers"
|
|
|
+ :key="t"
|
|
|
+ @click="sel = t"
|
|
|
+```
|
|
|
+
|
|
|
+Заодно демонстрируя, что здесь можно писать js-выражения, а не только
|
|
|
+вызовы функций.
|
|
|
+
|
|
|
+Как мы проверим что что-то выбралось? Давайте для теста выведем `sel` на страничке (вспоминаем про интерполяцию)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Теперь можно дописать логику чтобы график отображался только когда у меня есть `sel`
|
|
|
+
|
|
|
+```vue
|
|
|
+<section
|
|
|
+ v-if="sel"
|
|
|
+ ^^^^^^^^^^
|
|
|
+ class="relative">
|
|
|
+ <h3 class="text-lg leading-6 font-medium text-gray-900 my-8">
|
|
|
+ VUE - USD
|
|
|
+```
|
|
|
+
|
|
|
+А при клике на кнопочку "закрыть" устанавливаем `sel = null`
|
|
|
+
|
|
|
+```vue
|
|
|
+<button
|
|
|
+ @click="sel = null"
|
|
|
+ ^^^^^^^^^^^^^^^^^^^
|
|
|
+ type="button"
|
|
|
+ class="absolute top-0 right-0"
|
|
|
+>
|
|
|
+ <svg
|
|
|
+```
|
|
|
+
|
|
|
+Хорошо двигаемся дальше. В нашем случае мы хотим чтобы у нас выделялись цветом выбранная пара.
|
|
|
+Для этого нужно добавить css класс, который указывает толщину бордера.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для того чтобы прицепить атрибут к классу мы можем написать `:class` и здесь мы можем js-выражение
|
|
|
+
|
|
|
+```vue
|
|
|
+<div
|
|
|
+ v-for="t in tickers"
|
|
|
+ :key="t"
|
|
|
+ @click="sel = t"
|
|
|
+ :class="sel == t ? 'border-4' : ''"
|
|
|
+ class="bg-white overflow-hidden shadow rounded-lg border-purple-800 border-solid cursor-pointer"
|
|
|
+>
|
|
|
+```
|
|
|
+
|
|
|
+Здесь я хочу обратить ваше внимание на то что это
|
|
|
+абсолютно нормально совмещать в одном определении
|
|
|
+атрибут **class** через равно и через двоеточие.
|
|
|
+Это означает что вот первая часть статическая, а вторая динамическая.
|
|
|
+
|
|
|
+Но согласитесь, выглядит дико уродливо поэтому для классов **vue** предлагает несколько вариантов синтаксиса.
|
|
|
+
|
|
|
+* синтаксис массивов. с ним можете ознакомиться сами он менее распространен
|
|
|
+* объектный синтаксис, когда мы пишем объект в котором ключами являются имена классов (в моем случае `border-4`), а значением логическое выражение которое
|
|
|
+отвечает надо ли добавлять этот класс или нет
|
|
|
+
|
|
|
+ ```vue
|
|
|
+ :class="{
|
|
|
+ 'border-4': sel == t
|
|
|
+ }
|
|
|
+ ```
|
|
|
+
|
|
|
+ это читается: "добавь класс border-4, если _sel_ равен `t`"
|
|
|
+
|
|
|
+ обратите внимание, в качестве логического выражения также может быть вызов метода
|
|
|
+
|
|
|
+
|
|
|
+Вот мы добились желаемого. Давайте поправим заголовок графика, чтобы здесь было название валюты: `sel.name`
|
|
|
+
|
|
|
+
|
|
|
+```vue
|
|
|
+<h3
|
|
|
+ class="text-lg
|
|
|
+ leading-6
|
|
|
+ font-medium
|
|
|
+ text-gray-900
|
|
|
+ my-8"
|
|
|
+>
|
|
|
+ {{ sel.name }} - USD
|
|
|
+</h3>
|
|
|
+```
|
|
|
+
|
|
|
+Жмем удалить, ой а как так получилось что нажал кнопку удалить а выбралась пара? Происходит это потому что так работает java-скрипт.
|
|
|
+
|
|
|
+Когда вы кликаете на кнопочку "удалить", генерируется события и это событие, как вы прекрасно знаете начинает "всплывать".
|
|
|
+
|
|
|
+Что означает всплытия события для нас? Оно означает, что все элементы в которые вложены это а это в том числе и наш элемент тоже получат события клик и соответственно сработает выбор элемента
|
|
|
+
|
|
|
+Что мы можем сделать? Мы можем вспомнить что в "удалить" приходит событие `@click` и сделать ему что
|
|
|
+мы делаем в java скрипте: **stopPropagation**.
|
|
|
+
|
|
|
+**vue** и здесь нам помогает и поэтому у нас для клика
|
|
|
+где наша кнопочка "удалить" есть модификатор `.stop` - прекратить всплытие
|
|
|
+
|
|
|
+```vue
|
|
|
+<button
|
|
|
+ @click.stop="handleDelete(t)"
|
|
|
+ ^^^^^
|
|
|
+```
|
|
|
+
|
|
|
+Это не единственный модификатор. Со списком модификаторов
|
|
|
рекомендую ознакомиться самостоятельно
|
|
|
-хорошо теперь давайте пора начинать
|
|
|
-ходить за реальными данными для того
|
|
|
-чтобы ходить за реальными данными мне
|
|
|
-понадобится здесь кнопочка 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 сходили на сервер начали
|
|
|
-отправлять реальные запрос и теперь нам
|
|
|
-предстоит
|
|
|
-двигаться дальше наш злобный
|
|
|
-тысячник ну то есть виртуальный человек
|
|
|
-который ставит наш этих не технические
|
|
|
-задания перед нами будет требовать все
|
|
|
-новых и новых фич и мы с вами будем их
|
|
|
-добавлять и смотреть во что превращается
|
|
|
-наш код и разговаривать что такое хорошо
|
|
|
-и что такое плохо
|
|
|
+
|
|
|
+Хорошо теперь пора начинать ходить за реальными данными...
|
|
|
+
|
|
|
+>Видео посмотрите сами, я здесь привожу финальный результат:
|
|
|
+>
|
|
|
+>При добавлении новой валюты (функция **add**) запускаем таймер, который раз в 3 секунды будет запрашивать данные от АПИ. При получении данных они записываются в подходящий элемент массива (ищет по имени валюты)
|
|
|
+
|
|
|
+```js
|
|
|
+function add () {
|
|
|
+ const newTicker = {
|
|
|
+ name: ticker.value,
|
|
|
+ price: '-'
|
|
|
+ }
|
|
|
+ tickers.value.push(newTicker)
|
|
|
+ setInterval(async () => {
|
|
|
+ const f = await fetch(
|
|
|
+ `https://min-api.cryptocompare.com/data/price?fsym=${newTicker.name}&tsyms=USD&api_key=ce3fd966e7a1d10d65f907b20bf000552158fd3ed1bd614110baa0ac6cb57a7e`
|
|
|
+ )
|
|
|
+ const data = await f.json()
|
|
|
+
|
|
|
+ tickers.value.find(t => t.name === newTicker.name).price = data.USD > 1 ? data.USD.toFixed(2) : data.USD.toPrecision(2)
|
|
|
+ }, 3000)
|
|
|
+ ...
|
|
|
+```
|
|
|
+
|
|
|
+Хорошо самое время добавить график торговли
|
|
|
+
|
|
|
+1. Добавляем реактивную переменную _graph_
|
|
|
+1. В таймер получения данных добавим код для добавления значений в массив
|
|
|
+
|
|
|
+ ```js
|
|
|
+ if (sel.value?.name === newTicker.name) {
|
|
|
+ graph.value.push(data.USD)
|
|
|
+ }
|
|
|
+ ```
|
|
|
+
|
|
|
+ Если есть выбранный тикер и его имя равно текущему тикеру, то добавляем значение в массив
|
|
|
+
|
|
|
+1. Находим в шаблоне место, где рисуется график. Удаляем ненужные дубли и добавляем цикл в одну оставшуюся полоску
|
|
|
+
|
|
|
+ ```vue
|
|
|
+ <div
|
|
|
+ v-for="(bar, idx) in normalizeGraph()"
|
|
|
+ :key="idx"
|
|
|
+ :style="{ height: `${bar}%` }"
|
|
|
+ class="bg-purple-800 border w-10"
|
|
|
+ ></div>
|
|
|
+ ```
|
|
|
+
|
|
|
+ Тут сразу финальный варинант с нормализацией, про неё ниже
|
|
|
+
|
|
|
+1. Реализуем функцию нормализации, которая вычисляем минимум и максимум по всему массиву и нормализует выходные данные
|
|
|
+
|
|
|
+ ```js
|
|
|
+ const graph = ref([])
|
|
|
+
|
|
|
+ function normalizeGraph () {
|
|
|
+ const maxValue = Math.max(...graph.value)
|
|
|
+ const minValue = Math.min(...graph.value)
|
|
|
+ return graph.value.map(
|
|
|
+ price => 5 + ((price - minValue) * 95) / (maxValue - minValue)
|
|
|
+ )
|
|
|
+ }
|
|
|
+ ```
|
|
|
+1. При выборе другой валюты нам нужно чистить график, поэтому вместо выражения `sel = t` пишем вызов функции `select(t)` и реализуем её
|
|
|
+
|
|
|
+ ```js
|
|
|
+ function select (ticker) {
|
|
|
+ sel.value = ticker
|
|
|
+ graph.value = []
|
|
|
+ }
|
|
|
+ ```
|
|
|
+
|
|
|
+Что мы узнали сегодня? Сегодня мы узнали, что:
|
|
|
+
|
|
|
+* с реактивностью все не так очевидно.
|
|
|
+* вспомнили что в `v-for` когда нет уникальных данных для `:key`, за которые можно прицепиться, то можно испотзовать индекс
|
|
|
+* вспомнили что в качестве источника данных для цикла можно использовать выражение (функцию, возвращающую массив)
|
|
|
+* чуть чуть поигрались с реальным api, сходили на сервер начали
|
|
|
+отправлять реальные запрос
|
|
|
+
|
|
|
+Теперь нам предстоит двигаться дальше наш злобный ТЗ-шник ну то есть виртуальный человек который ставит технические задания перед нами будет требовать все новых и новых фич и мы с вами будем их добавлять и смотреть во что превращается наш код и разговаривать что такое хорошо и что такое плохо
|
|
|
|
|
|
---
|
|
|
|
|
|
**Задание**
|
|
|
|
|
|
+Повторите практическое задание из этого занятия
|
|
|
|
|
|
[Назад](./web_04.md) | [Дальше](./web_06.md)
|
