|
|
@@ -19,9 +19,7 @@
|
|
|
|
|
|
Мы с вами освоили _добавление_ и _удаление_ элементов. Давайте добавим еще и выбор, потому что при выбранном элементе должен отображаться график.
|
|
|
|
|
|
-С этим достаточно просто мы берем и говорим "выбранный элемент изменяется с
|
|
|
-течением времени". Когда мы слышим что что-то меняется с течением времени мы
|
|
|
-говорим это "состояние". Назову его _sel_. Первоначально ничего не выбрано поэтому `null`:
|
|
|
+С этим достаточно просто мы берем и говорим "выбранный элемент изменяется с течением времени". Когда мы слышим что что-то меняется с течением времени мы говорим это "состояние". Назову его _sel_. Первоначально ничего не выбрано поэтому `null`:
|
|
|
|
|
|
```js
|
|
|
const sel = ref(null)
|
|
|
@@ -36,8 +34,7 @@
|
|
|
@click="sel = t"
|
|
|
```
|
|
|
|
|
|
-Заодно демонстрируя, что здесь можно писать js-выражения, а не только
|
|
|
-вызовы функций.
|
|
|
+Заодно демонстрируя, что здесь можно писать js-выражения, а не только вызовы функций.
|
|
|
|
|
|
Как мы проверим что что-то выбралось? Давайте для теста выведем `sel` на страничке (вспоминаем про интерполяцию)
|
|
|
|
|
|
@@ -83,10 +80,8 @@
|
|
|
>
|
|
|
```
|
|
|
|
|
|
-Здесь я хочу обратить ваше внимание на то что это
|
|
|
-абсолютно нормально совмещать в одном определении
|
|
|
-атрибут **class** через равно и через двоеточие.
|
|
|
-Это означает что вот первая часть статическая, а вторая динамическая.
|
|
|
+Здесь я хочу обратить ваше внимание на то что это абсолютно нормально совмещать в одном определении
|
|
|
+атрибут **class** через равно и через двоеточие. Это означает что вот первая часть статическая, а вторая динамическая.
|
|
|
|
|
|
Но согласитесь, выглядит дико уродливо поэтому для классов **vue** предлагает несколько вариантов синтаксиса.
|
|
|
|
|
|
@@ -138,14 +133,13 @@
|
|
|
^^^^^
|
|
|
```
|
|
|
|
|
|
-Это не единственный модификатор. Со списком модификаторов
|
|
|
-рекомендую ознакомиться самостоятельно
|
|
|
+Это не единственный модификатор. Со списком модификаторов рекомендую ознакомиться самостоятельно
|
|
|
|
|
|
Хорошо теперь пора начинать ходить за реальными данными...
|
|
|
|
|
|
>Видео посмотрите сами, я здесь привожу финальный результат:
|
|
|
>
|
|
|
->При добавлении новой валюты (функция **add**) запускаем таймер, который раз в 3 секунды будет запрашивать данные от АПИ. При получении данных они записываются в подходящий элемент массива (ищет по имени валюты)
|
|
|
+>При добавлении новой валюты (функция **add**) запускаем таймер, который раз в 3 секунды будет запрашивать данные от АПИ (ключ из видео пока работает, но если что - зарегистрируйтесь). При получении данных они записываются в подходящий элемент массива (ищет по имени валюты). Тут возник вопрос к реактивности, который отложили на потом
|
|
|
|
|
|
```js
|
|
|
function add () {
|
|
|
@@ -191,7 +185,7 @@ function add () {
|
|
|
|
|
|
Тут сразу финальный варинант с нормализацией, про неё ниже
|
|
|
|
|
|
-1. Реализуем функцию нормализации, которая вычисляем минимум и максимум по всему массиву и нормализует выходные данные
|
|
|
+1. Реализуем функцию нормализации, которая вычисляеи минимум и максимум по всему массиву и нормализует выходные данные
|
|
|
|
|
|
```js
|
|
|
const graph = ref([])
|
|
|
@@ -204,6 +198,7 @@ function add () {
|
|
|
)
|
|
|
}
|
|
|
```
|
|
|
+
|
|
|
1. При выборе другой валюты нам нужно чистить график, поэтому вместо выражения `sel = t` пишем вызов функции `select(t)` и реализуем её
|
|
|
|
|
|
```js
|
|
|
@@ -216,12 +211,12 @@ function add () {
|
|
|
Что мы узнали сегодня? Сегодня мы узнали, что:
|
|
|
|
|
|
* с реактивностью все не так очевидно.
|
|
|
-* вспомнили что в `v-for` когда нет уникальных данных для `:key`, за которые можно прицепиться, то можно испотзовать индекс
|
|
|
-* вспомнили что в качестве источника данных для цикла можно использовать выражение (функцию, возвращающую массив)
|
|
|
+* вспомнили, что в `v-for`, когда нет уникальных данных для `:key`, за которые можно прицепиться, то можно использовать индекс (синтаксис `v-for="(item, index) in list"`)
|
|
|
+* вспомнили, что в качестве источника данных для цикла можно использовать выражение (функцию, возвращающую массив)
|
|
|
* чуть чуть поигрались с реальным api, сходили на сервер начали
|
|
|
отправлять реальные запрос
|
|
|
|
|
|
-Теперь нам предстоит двигаться дальше наш злобный ТЗ-шник ну то есть виртуальный человек который ставит технические задания перед нами будет требовать все новых и новых фич и мы с вами будем их добавлять и смотреть во что превращается наш код и разговаривать что такое хорошо и что такое плохо
|
|
|
+Теперь нам предстоит двигаться дальше. Наш злобный ТЗ-шник, ну то есть виртуальный человек который ставит технические задания перед нами, будет требовать все новых и новых фич и мы с вами будем их добавлять и смотреть во что превращается наш код и разговаривать что такое хорошо и что такое плохо
|
|
|
|
|
|
---
|
|
|
|
