|
|
@@ -1,25 +1,122 @@
|
|
|
[К содержанию](../readme.md#введение-в-web-разработку)
|
|
|
|
|
|
-# Криптономикон-2 - Vue.js: практика
|
|
|
+# Vue.js
|
|
|
|
|
|
-<!-- 28 мин -->
|
|
|
+## #22 Криптономикон: refs
|
|
|
|
|
|
-1. [#11 Криптономикон-2 - Vue.js: практика](https://www.youtube.com/watch?v=Xzx8SCzrfXU)
|
|
|
+>22 минуты
|
|
|
|
|
|
- Материалы к изучению:
|
|
|
+* [YouTube](https://www.youtube.com/watch?v=uWDmfA7WE5Q&list=PLvTBThJr861yMBhpKafII3HZLAYujuNWw&index=23)
|
|
|
+* [RuTube](https://rutube.ru/video/d1acbb9d381bcfb42412be7cfc31a742/)
|
|
|
|
|
|
- - [реактивность во Vue3:](https://v3.ru.vuejs.org/ru/guide/reactivity.html)
|
|
|
- - [Исходный код урока](https://gitlab.com/vuejs-club/youtube-course/cryptonomicon/-/tree/lesson2)
|
|
|
- - [API для получения ключа:](https://www.cryptocompare.com/)
|
|
|
|
|
|
-1. Начинаем изучать вторую часть учебника [JavaScript](https://learn.javascript.ru/document) (весь раздел "Документ")
|
|
|
+**Расшифровка скринкаста**
|
|
|
|
|
|
----
|
|
|
+Сегодня будем решать проблему с графиком
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Если размер становится очень большим, то ширина столбцов уменьшается до какого-то предела, а потом вообще выходит за размеры блока
|
|
|
+
|
|
|
+Первый вариант, который приходит в голову, ограничить количество записей в массиве цен (метод _shift_ удаляет первый элемент массива):
|
|
|
+
|
|
|
+```js
|
|
|
+graph.value.push(t.price)
|
|
|
+if (graph.value.length > 5) {
|
|
|
+ graph.value.shift()
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+Но такой вариант не учитывает размер блока и выглядит плохо
|
|
|
+
|
|
|
+Самое время познакомиться с [ref](https://ru.vuejs.org/guide/essentials/template-refs.html)
|
|
|
+
|
|
|
+**Ref**, это возможность получить (в коде) ссылку на объект, который мы отрисовали в шаблоне.
|
|
|
+
|
|
|
+Очевидно, что количество элементов в графике должно зависеть от размера блока, в котором этот график рисуется.
|
|
|
+
|
|
|
+Чтобы найти нужный блок, можно воспользоваться панелью разработчика в браузере
|
|
|
+
|
|
|
+1. Кликаем правой кнопкой мыши в окне бразуера и выбираем пункт "посмотреть код"
|
|
|
+1. Выбираем закладку "Элементы"
|
|
|
+1. Активируем кнопку "Выбрать элемент", кликаем мышкой на элемент, который нам интересен (блок с графиком) и в окне элементов будет выделен элемент вёрстки, который соответствует "картинке"
|
|
|
+
|
|
|
+ 
|
|
|
+
|
|
|
+1. Находим этот блок в шаблоне и добавляем в него атрибут `ref="graphRef"`
|
|
|
+
|
|
|
+ ```html
|
|
|
+ <h3 class="text-lg leading-6 font-medium text-gray-900 my-8">
|
|
|
+ {{ sel.name }} - USD
|
|
|
+ </h3>
|
|
|
+ <div
|
|
|
+ ref="graphRef"
|
|
|
+ ^^^^^^^^^^^
|
|
|
+ class="flex items-end border-gray-600 border-b border-l h-64">
|
|
|
+ <div
|
|
|
+ v-for="(bar, idx) in normalizedGraph"
|
|
|
+ ```
|
|
|
+
|
|
|
+ Обратите внимание, во **vue3** ссылка должна иметь уникальное имя (в оригинальном видео имя _graph_ конфликтует с именем массива с данными для графика)
|
|
|
+
|
|
|
+1. Затем опишем переменную, в которую при монтировании DOM будет записана ссылка на визуальный элемент
|
|
|
+
|
|
|
+ В текущей версии документации выглядит так:
|
|
|
|
|
|
-## Задание
|
|
|
+ ```js
|
|
|
+ const graphRef = useTemplateRef('graph')
|
|
|
+ ```
|
|
|
+
|
|
|
+ Хотя можно и так (при монтировании DOM значение записывается в одноименную переменную):
|
|
|
+
|
|
|
+ ```js
|
|
|
+ const graphRef = ref(null)
|
|
|
+ ```
|
|
|
+
|
|
|
+ Во **vue3** реализация **ref** отличается. Во **vue2**, как видно из видео, все **ref** ссылки собираются в объект **$ref**, а во **vue3** каждая ссылка записывается в одноимённую переменную.
|
|
|
+
|
|
|
+ Мы можем добавить логи вывода значения этой переменной при формировании графика
|
|
|
+
|
|
|
+ ```js
|
|
|
+ graph.value.push(t.price)
|
|
|
+ if (graph.value.length > 5) {
|
|
|
+ graph.value.shift()
|
|
|
+ }
|
|
|
+ console.log('graphRef:', graphRef.value)
|
|
|
+ ```
|
|
|
+
|
|
|
+ 
|
|
|
+
|
|
|
+ Пока не выбран тикер, значение равно `null`, а после выбора содержит ссылку на визуальный элемент
|
|
|
+
|
|
|
+1. Теперь, имея ссылку на визуальный элемент и зная **js** и **css** можем получить его ширину (сразу заворачиваем в вычисляемое свойство)
|
|
|
+
|
|
|
+ ```js
|
|
|
+ const maxGraphElements = computed(() => {
|
|
|
+ if (graphRef.value == null) return 0
|
|
|
+ return graphRef.value.clientWidth / 38
|
|
|
+ })
|
|
|
+ ```
|
|
|
+
|
|
|
+ И используем это свойство при формировании графика
|
|
|
+
|
|
|
+ ```js
|
|
|
+ if (graph.value.length > maxGraphElements.value) {
|
|
|
+ graph.value.shift()
|
|
|
+ }
|
|
|
+ ```
|
|
|
+
|
|
|
+ Работает!!!
|
|
|
+
|
|
|
+ Но при изменении размеров экрана количество не пересчитывается. **Ref не реактивен.**
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
|
|
|
-1. Пересмотреть видео [#11 Криптономикон-2 - Vue.js: практика](https://www.youtube.com/watch?v=Xzx8SCzrfXU). Желательно повторить урок самостоятельно, как минимум склонировать [Исходный код урока](https://gitlab.com/vuejs-club/youtube-course/cryptonomicon/-/tree/lesson2) и разобраться что там происходит.
|
|
|
+**Задание**
|
|
|
|
|
|
-1. Перечитать и осмыслить раздел "документ" второй части часть [Учебника](https://learn.javascript.ru/document)
|
|
|
+1. В нашей реализации, пока не изменится размер окна
|
|
|
+1. Исправить баг, когда при уменьшении размера окна элементы графика становятся узкими, пока не обновится валюта
|
|
|
+1.
|
|
|
|
|
|
[Назад](./web_11.md) | [Дальше](./web_13.md)
|
