Файл со списком студентов https://disk.yandex.ru/d/YTZYrKRe0wEBmw
Архив проекта который получился https://disk.yandex.ru/d/XQcIgOdE5TKjqA
Извиняюсь за перегруз звука...
00:00:00 Введение
00:04:03 Ставим nodejs
00:06:07 Создаем папку проекта
00:06:45 Создаем Vue проект
00:08:02 Ставим плагины для Vue
00:10:00 Ставим пакеты с помощью npm install
00:11:40 Запускаем проект с помощью npm run dev
00:12:10 Быстро пробегаемся по устройству базового проекта
00:14:40 Очищаем проект от лишних файлов
00:18:05 Прописываем файл App.vue с нуля
00:19:15 Запуск проекта через package.json файл
00:20:15 Подключаем bootstrap как внешний ресурс
00:21:40 Проверяем что работает разметка
00:22:19 Создаем переменные
00:23:50 Создаем input и подключаем к нему переменную a
00:26:13 Создаем input и подключаем к нему переменную b
00:27:25 Вытаскиваем значение из ref переменной
00:28:00 Создаем кнопку и привязываем к ней реакцию
00:30:50 Складываем переменные как две строки
00:31:42 Создаем зависимую переменную через computed
00:33:25 Реализуем возможность выбора операций через select
00:37:55 Реализуем список в виде набора кнопочек
00:39:55 Генерируем разметку в цикле v-for
00:42:07 Переключаем операцию через click
00:43:15 Выносим кнопку в компоненту
00:45:55 Используем defineProps для объявления свойств
00:47:00 Используем defineEmits для объявления событий
00:48:50 Подсвечиваем кнопку с активной операцией
00:50:43 Динамически генерируем класс кнопки
00:54:48 Выносим калькулятор в отдельную компоненту
00:56:48 Подключаем файл со студентами в проект
00:58:24 Разбираем данные студентов
00:58:48 Подключаем данные студентов
01:03:03 Выводим отдельные свойства студентов
01:04:30 Выносим отдельного студента в отдельную компоненту
01:06:44 Выводим картинку студента
01:07:34 Настраиваем стиль отображения элемента списка через style scoped
01:09:25 Делаем динамическую ссылку на студента через computed
01:11:28 Добавляем фильтр
01:13:09 Прячем записи с помощью v-if
01:14:23 Фильтруем данные через computed
01:18:21 Заключение