bak

articles/web_12.md

@@ -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) (весь раздел "Документ")
+**Расшифровка скринкаста**
 
----
+Сегодня будем решать проблему с графиком
+
+![](../img/web_017.png)
+
+Если размер становится очень большим, то ширина столбцов уменьшается до какого-то предела, а потом вообще выходит за размеры блока
+
+Первый вариант, который приходит в голову, ограничить количество записей в массиве цен (метод _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. Активируем кнопку "Выбрать элемент", кликаем мышкой на элемент, который нам интересен (блок с графиком) и в окне элементов будет выделен элемент вёрстки, который соответствует "картинке"
+
+    ![](../img/web_018.png)
+
+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)
+    ```
+
+    ![](../img/web_019.png)
+
+    Пока не выбран тикер, значение равно `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)

articles/web_22.md

@@ -6,4 +6,4 @@
 
 1. [#24 Криптономикон: компоненты - Vue.js: практика](https://www.youtube.com/watch?v=Ql5nV-G-nOs&list=PLvTBThJr861yMBhpKafII3HZLAYujuNWw&index=25)
 
-[Назад](./web_21.md) | [Дальше](./web_23.md)
+[Назад](./web_21.md)