vue2_rus

Главная vue.js

Что такое Vue.js

• Что такое Vue.js
• Декларативная отрисовка
• Условия и циклы
• Работа с пользовательским вводом
• Разбиение приложения на компоненты
• Отношение к пользовательским элементам Web Components

Установка

• Установка
• Инструменты разработчика и Vue
• Подключение через script
• Инструменты командной строки (CLI)
• Объяснение различных сборок
• Среда исполнения + Компилятор vs. Среда исполнения
• Режим разработки против режим продуктива
• Сборка dev-версии

Создание экземпляра Vue

• Создание экземпляра Vue
• Данные и методы
• Перехватчики жизненного цикла экземпляра
• Диаграмма жизненного цикла

Синтаксис шаблонов

• Синтаксис шаблонов
• Интерполяции
• Сырой HTML
• Атрибуты
• Использование выражений JavaScript
• Директивы
• Аргументы
• Динамические аргументы
• Изменители
• Сокращение v-bind
• Сокращение v-on

Вычисляемые свойства и слежение

• Вычисляемые свойства и слежение
• Вычисляемые свойства
• Кэширование вычисляемых свойств
• Вычисляемые свойства и слежение
• Установщики вычисляемых свойств
• Методы-наблюдатели

Работа с классами и стилями

• Связывание CSS-классов
  • Использование объектов
  • Использование массивов
  • Использование с компонентами
• Связывание встрочных-стилей
  • Использование объектов
  • Использование массивов
  • Автоматические приставки
  • Множественные значения

Условная отрисовка

• Условная отрисовка
• v-if
• Условные группы с использованием v-if и template
• v-else
• v-else-if
• Управление повторным использованием элементов при помощи key
• v-show
• v-if в сравнении с v-show
• v-if вместе с v-for

Отрисовка списков

• Отрисовка списков
• Отображение массива элементов с помощью v-for
• v-for для объекта
• Сохранение состояния
• Отслеживание изменений в массивах
• Отображение отфильтрованных/отсортированных результатов
• v-for и диапазоны
• v-for и тег template
• v-for и v-if
• Компоненты и v-for

Обработка событий

• Обработка событий
• Подписка на события
• Обработчики событий
• Методы и встрочные-обработчики
• Изменители событий
• Изменители клавиш
• Коды клавиш
• Системные изменители клавиш
• Изменитель .exact
• Изменители клавиш мыши
• Почему подписчики указываются в HTML?

Работа с формами

• Типичное использование v-model
  • Вводилка
  • Текстобласть
  • Флажки
  • Радиокнопки
  • Выбиралки
• Привязка значений v-model
  • Флажок
  • Радиокнопки
  • Выбиралки
• Изменители
  • .lazy
  • .number
  • .trim
• Использование v-model с компонентами

Подробно о реактивности

• Подробно о реактивности
• Как отслеживаются изменения
• Особенности отслеживания изменений
  • Для объектов
  • Для массивов
• Объявление реактивных свойств
• Асинхронная очередь обновлений

Основы компонентов

• Базовый пример
• Переиспользование компонентов
• Свойство data должно быть функцией
• Организация компонентов
• Передача данных в дочерние компоненты через входные параметры
• Один корневой элемент
• Прослушивание событий из дочерних компонентов в родительских компонентах
• Передача данных вместе с событием
• Использование v-model на компонентах
• Распределение контента слотами
• Динамическое переключение компонентов
• Особенности разбора DOM-шаблона

Регистрация компонентов

• Регистрация компонентов
• Именование компонентов
• Стиль именования
• Глобальная регистрация
• Местная регистрация
• Модульные системы
• Местная регистрация в модульной системе
• Автоматическая глобальная регистрация базовых компонентов

Входные параметры компонент

• Входные параметры компонент
• Стиль именования входных параметров (camelCase в сравнении с kebab-case)
• Указание типа входных параметров
• Передача статических и динамических входных параметров
• Однонаправленный поток данных
• Проверка входных параметров
• Передача обычных атрибутов
• Замена/Объединение существующих атрибутов
• Отключение наследования атрибутов

Самодельные события компонент

• Самодельные события компонент
• Стиль именования событий
• Настройка v-model у компонента
• Подписка на родные события в компонентах
• Изменитель .sync

Слоты компонентов

• Слоты компонентов
• Содержимое слота
• Область видимости при компиляции
• Содержимое слота по умолчанию
• Именованные слоты
• Слоты с ограниченной областью видимости
• Сокращённый синтаксис для одиночного слота по умолчанию
• Деструктурирование входных параметров слота
• Динамическое имя слота
• Сокращённая запись для именованных слотов
• Другие примеры
• Именованные атрибуты с помощью атрибута slot
• Слоты с ограниченной областью видимости с помощью атрибута slot-scope

Динамические и асинхронные компоненты

• Динамические и асинхронные компоненты
• keep-alive с динамическими компонентами
• Асинхронные компоненты
• Управление состоянием загрузки

Обработка крайних случаев для компонент

• Обработка крайних случаев для компонент
• Доступ к корневому экземпляру
• Доступ к экземпляру родительского компонента
• Доступ к экземплярам дочерних компонентов и элементов
• Внедрение зависимостей
• Программное добавление прослушивателей событий
• Рекурсивные компоненты
• Циклические ссылки между компонентами
• Встрочные-шаблоны
• X-Templates
• Контролирование обновлений
• Принудительное обновление
• “Дешёвые” статические компоненты с помощью v-once

Анимование списков и появления/исчезновения

• Анимование списков и появления/исчезновения
• Анимование одиночного элемента/компонента
• Классы переходов
• CSS-переходы
• CSS-анимации
• Пользовательские классы переходов
• Совместное использование переходов и анимаций
• Указание длительности перехода
• JavaScript-перехватчики
• Переходы при первичной отрисовке
• Переходы между элементами
• Режимы переходов
• Переходы между компонентами
• Переходы в списках
• Анимация вставки и удаления элементов списка
• Анимация перемещения элементов списка
• Упругая анимация элементов списка
• Повторное использование анимованных переходов
• Динамические переходы

Анимование переходов между состояниями

• Анимование переходов между состояниями
• Анимация состояния при помощи наблюдателей
• Динамические переходы между состояниями
• Представление переходов как компонентов
• Оживление проектов

Примеси

• Примеси
• Слияние настроек
• Глобальные примеси
• Пользовательские стратегии слияния настроек

Самодельные директивы

• Самодельные директивы
• Перехватчики
• Аргументы перехватчиков
• Динамические аргументы директивы
• Сокращённая запись перехватчика bind и update
• Передача объекта данных в директиву

Функции-создатели и JSX

• Функции-создатели и JSX
• Узлы, деревья, и виртуальный DOM
• Виртуальный DOM
• Аргументы createElement
• Подробно об объекте данных
• Полный пример
• Ограничения
• Достижение возможностей шаблона с помощью JavaScript v-if и v-for и v-model
• События и изменители клавиш
• Слоты
• JSX
• Функциональные компоненты
• Передача атрибутов и событий дочерним элементам/компонентам
• slots() или children
• Компиляция шаблонов

Добавки

• Добавки
• Использование добавок
• Создание добавки

Фильтры

• Фильтры

Инструменты

• Однофайловые компоненты
• Тестирование
• Публикация в продуктиве, прекомпиляция шаблонов, извлечение CSS из компонентов, отслеживание ошибок во время выполнения

Масштабирование

• Маршрутизация
• Управление состоянием приложения, Vuex, Простое вместилище состояния с нуля
• Отрисовка на стороне сервера, Nuxt.js
• Безопасность

Стилеводство кода

• Рекомендации по стилю кода
• Имена компонентов из нескольких слов
• Свойство data компонента должно быть функцией
• Входные параметры должны быть определены как можно более подробно
• Уникальные ключи для v-for
• Избегайте использования v-if с v-for
• Местные стили компонента
• Именование закрытых свойств
• Файлы компонентов
• Именование однофайловых компонентов
• Именование базовых компонентов
• Именование компонентов, используемых в единственном экземпляре
• Именование тесно связанных компонентов
• Порядок слов в именах компонентов
• Самозакрывающиеся теги компонентов
• Стиль именования компонентов в шаблонах
• Стиль именования компонентов в JS/JSX
• Использование полных слов при именовании компонентов
• Стиль именования входных параметров
• Элементы с несколькими атрибутами
• Простые выражения в шаблонах
• Простые вычисляемые свойства
• Значения атрибутов в кавычках
• Сокращённая запись директив
• Порядок настроек компонента/экземпляра
• Порядок атрибутов элемента
• Пустые строки между настроек компонента/экземпляра
• Порядок секций в однофайловых компонентах
• v-if/v-else-if/v-else без key
• Отбиратели элементов при использовании scoped
• Неявное общение между родительским и дочерними компонентами
• Управление состоянием приложения без flux

Рецепты

• Добавление свойств экземпляра
• Избежание утечек памяти
• Хранение данных на клиенте
• Самодельные директивы крутки
• Отладка в VS Code
• Правка SVG иконок
• Проверка форм
• Слоты с ограниченной видимостью
• Бессерверный журнал
• Тестование vue
• Запрос к серверу через Axios

API

• Глобальные параметры
• Глобальный API
• Настройки — данные
• Настройки — DOM
• Настройки-перехватчики жизненного цикла
• Настройки — ресурсы
• Настройки — композиция
• Настройки — разное
• Свойства экземпляра
• Методы экземпляра — данные
• Методы экземпляра — события
• Методы экземпляра — жизненный цикл
• Директивы
• Специальные атрибуты
• Встроенные компоненты