#10. Динамическая реактивность Vue
00:00 Введение и цель проекта -Приветствие и возвращение в NanoSaf. -Обзор проекта в Veautify и демонстрация работы тёмного режима. -Цель: создать корзину для покупок с тёмной темой. 00:50 Структура корзины покупок -Описание структуры корзины: список товаров, количество, общая сумма. -Использование TypeScript для статической типизации объектов. -Создание инвентаря товаров как статичного списка. 01:56 Динамические данные и интерфейс -Определение интерфейса для списка товаров в корзине. -Использование ref для динамических данных. -Статическое моделирование рабочего процесса Chili для работы с интерфейсом. 02:28 Макет и автозаполнение -Создание макета с 12 столбцами для выбора товаров. -Реализация автозаполнения V для выбора товаров. -Настройка заголовков и количества товаров. 04:45 Предварительный просмотр и оптимизация -Проверка предварительного просмотра корзины. -Коррекция размеров элементов и отступов. -Добавление значков для кнопок «вверх» и «вниз». 05:41 Импорт шрифтов -Необходимость импорта шрифтов для значков. -Установка шрифтов MDI и Roboto. -Запуск сервера разработки для отображения изменений. 07:54 Создание шаблонов просмотра -Использование V4 для перебора данных и создания разметки. -Привязка данных к элементам интерфейса. -Решение проблем с IntelliSense и гибридным режимом. 11:07 Выравнивание и финальные настройки -Выравнивание элементов по центру строки. -Создание гибкого отображения для выравнивания цифр. -Финальные настройки макета для улучшения интерфейса. 11:48 Добавление кнопки для добавления элементов -Создание разделителя и кнопки для добавления новых элементов в список. -Использование flex и justify-end для размещения кнопки. -Привязка логики к нажатию кнопки с помощью at. 12:30 Реализация функции добавления элемента -Создание функции «добавить элемент» для добавления элементов в массив. -Вставка нового объекта в массив с начальными значениями. -Проверка работы функции после горячей перезагрузки. 14:01 Добавление общего итога -Создание статичного ряда для отображения общего итога. -Использование V-образных колонок для отображения цены и общего итога. -Настройка стиля для общего итога. 15:00 Вычисление общего итога с помощью reduce -Применение ленивой оценки для вычисления общего итога. -Использование функции reduce для суммирования количества и цены каждого элемента. -Проверка работы функции в IDE. 16:48 Исправление выравнивания и компактность -Корректировка выравнивания элементов управления. -Уменьшение размера контейнеров для более компактного вида. -Добавление знака доллара к общей сумме. 18:01 Реализация функции удаления элемента -Создание функции удаления элемента с индексом. -Добавление кнопки удаления со значком мусорного ведра. -Проверка работы функции удаления при перезагрузке. 19:32 Автоматическое обновление данных -Демонстрация автоматического обновления общего итога при удалении или добавлении элементов. -Настройка встроенного стиля для общего итога с нулевым заполнением. 21:16 Завершение демонстрации -Демонстрация автозаполнения и основных элементов интерфейса. -Подведение итогов демонстрации создания пользовательского интерфейса с помощью Viewtify. 21:57 Реактивность в интерфейсе -Использование реактивности для обновления пользовательского интерфейса. -Привязка данных к интерфейсу с помощью VModel. -Применение computed для автоматического обновления производных представлений данных. -Рекомендация использовать строгую статическую типизацию вместо JavaScript. 22:54 Переход к C -Фокус на взаимодействии между кодом на C и интерфейсом. -Объяснение, почему выбор Ceph вместо Electron может быть обоснован желанием работать на C. -Упоминание интересной инженерной задачи, которую можно решить. 22:54 Заключение -Благодарность за просмотр. -Призыв нажать на кнопку «Нравится». -Обещание новых видео.
00:00 Введение и цель проекта -Приветствие и возвращение в NanoSaf. -Обзор проекта в Veautify и демонстрация работы тёмного режима. -Цель: создать корзину для покупок с тёмной темой. 00:50 Структура корзины покупок -Описание структуры корзины: список товаров, количество, общая сумма. -Использование TypeScript для статической типизации объектов. -Создание инвентаря товаров как статичного списка. 01:56 Динамические данные и интерфейс -Определение интерфейса для списка товаров в корзине. -Использование ref для динамических данных. -Статическое моделирование рабочего процесса Chili для работы с интерфейсом. 02:28 Макет и автозаполнение -Создание макета с 12 столбцами для выбора товаров. -Реализация автозаполнения V для выбора товаров. -Настройка заголовков и количества товаров. 04:45 Предварительный просмотр и оптимизация -Проверка предварительного просмотра корзины. -Коррекция размеров элементов и отступов. -Добавление значков для кнопок «вверх» и «вниз». 05:41 Импорт шрифтов -Необходимость импорта шрифтов для значков. -Установка шрифтов MDI и Roboto. -Запуск сервера разработки для отображения изменений. 07:54 Создание шаблонов просмотра -Использование V4 для перебора данных и создания разметки. -Привязка данных к элементам интерфейса. -Решение проблем с IntelliSense и гибридным режимом. 11:07 Выравнивание и финальные настройки -Выравнивание элементов по центру строки. -Создание гибкого отображения для выравнивания цифр. -Финальные настройки макета для улучшения интерфейса. 11:48 Добавление кнопки для добавления элементов -Создание разделителя и кнопки для добавления новых элементов в список. -Использование flex и justify-end для размещения кнопки. -Привязка логики к нажатию кнопки с помощью at. 12:30 Реализация функции добавления элемента -Создание функции «добавить элемент» для добавления элементов в массив. -Вставка нового объекта в массив с начальными значениями. -Проверка работы функции после горячей перезагрузки. 14:01 Добавление общего итога -Создание статичного ряда для отображения общего итога. -Использование V-образных колонок для отображения цены и общего итога. -Настройка стиля для общего итога. 15:00 Вычисление общего итога с помощью reduce -Применение ленивой оценки для вычисления общего итога. -Использование функции reduce для суммирования количества и цены каждого элемента. -Проверка работы функции в IDE. 16:48 Исправление выравнивания и компактность -Корректировка выравнивания элементов управления. -Уменьшение размера контейнеров для более компактного вида. -Добавление знака доллара к общей сумме. 18:01 Реализация функции удаления элемента -Создание функции удаления элемента с индексом. -Добавление кнопки удаления со значком мусорного ведра. -Проверка работы функции удаления при перезагрузке. 19:32 Автоматическое обновление данных -Демонстрация автоматического обновления общего итога при удалении или добавлении элементов. -Настройка встроенного стиля для общего итога с нулевым заполнением. 21:16 Завершение демонстрации -Демонстрация автозаполнения и основных элементов интерфейса. -Подведение итогов демонстрации создания пользовательского интерфейса с помощью Viewtify. 21:57 Реактивность в интерфейсе -Использование реактивности для обновления пользовательского интерфейса. -Привязка данных к интерфейсу с помощью VModel. -Применение computed для автоматического обновления производных представлений данных. -Рекомендация использовать строгую статическую типизацию вместо JavaScript. 22:54 Переход к C -Фокус на взаимодействии между кодом на C и интерфейсом. -Объяснение, почему выбор Ceph вместо Electron может быть обоснован желанием работать на C. -Упоминание интересной инженерной задачи, которую можно решить. 22:54 Заключение -Благодарность за просмотр. -Призыв нажать на кнопку «Нравится». -Обещание новых видео.