Оглавление
Вступление ................................................................................................................... 14
Предисловие................................................................................................................. 15
Благодарности.............................................................................................................. 16
Об этой книге ............................................................................................................... 18
Целевая аудитория.................................................................................................. 19
Структура книги ...................................................................................................... 19
Исходный код .......................................................................................................... 20
Требования к программному обеспечению .............................................................. 20
Интернет-ресурсы ................................................................................................... 21
Дополнительная информация.................................................................................. 21
Об авторе................................................................................................................ 21
Об иллюстрации на обложке ................................................................................... 22
Часть I. Знакомимся с Vue.js
Глава 1. Введение в Vue.js .......................................................................................... 24
1.1. На плечах у гигантов ........................................................................................ 25
1.1.1. Шаблон проектирования MVC.............................................................. 25
1.1.2. Шаблон проектирования MVVM ........................................................... 27
1.1.3. Что такое реактивное приложение ...................................................... 28
1.1.4. Калькулятор на JavaScript.................................................................... 29
1.1.5. Калькулятор на Vue ............................................................................. 32
1.1.6. Сравнение JavaScript и Vue .................................................................. 33
1.1.7. Как Vue использует MVVM и реактивность............................................ 33
Оглавление  7
1.2. Почему именно Vue.js ....................................................................................... 35
1.3. Мысли на будущее............................................................................................ 36
Резюме.................................................................................................................... 37
Глава 2. Экземпляр Vue............................................................................................... 38
2.1. Наше первое приложение................................................................................. 38
2.1.1. Корневой экземпляр Vue...................................................................... 39
2.1.2. Убедимся в том, что приложение работает .......................................... 41
2.1.3. Выведем что-нибудь внутри представления......................................... 44
2.1.4. Исследование свойств в Vue ................................................................ 45
2.2. Жизненный цикл Vue ........................................................................................ 47
2.2.1. Добавление хуков жизненного цикла................................................... 47
2.2.2. Исследование кода жизненного цикла................................................. 49
2.2.3. Стоит ли оставлять код жизненного цикла? ......................................... 51
2.3. Вывод товара.................................................................................................... 51
2.3.1. Определение данных товара ............................................................... 51
2.3.2. Разметка представления товара .......................................................... 52
2.4. Применение фильтров вывода.......................................................................... 55
2.4.1. Написание функции фильтра............................................................... 56
2.4.2. Добавление фильтра в разметку и проверка разных значений ............ 57
Упражнение............................................................................................................. 58
Резюме.................................................................................................................... 58
Часть II. Представление и модель представления
Глава 3. Поддержка интерактивности ......................................................................... 60
3.1. Корзина покупок начинается с добавления массива.......................................... 60
3.2. Привязка к событиям DOM................................................................................ 62
3.2.1. Основы привязки событий ................................................................... 62
3.2.2. Привязывание события к кнопке добавления в корзину....................... 63
3.3. Кнопка для подсчета и вывода элементов в корзине ........................................ 64
3.3.1. Когда следует использовать вычисляемые свойства ............................ 65
3.3.2. Проверка событий обновления с помощью вычисляемых свойств........ 66
3.3.3. Вывод количества элементов в корзине и тестирование ...................... 72
8  Оглавление
3.4. Сделаем кнопку дружественной для пользователей.......................................... 73
3.4.1. Учет товара ......................................................................................... 74
3.4.2. Учет и работа с вычисляемыми свойствами ......................................... 75
3.4.3. Знакомство с директивой v-show ......................................................... 76
3.4.4. Отображение и скрытие кнопки с помощью v-if и v-else....................... 77
3.4.5. Добавление кнопки корзины в виде переключателя ............................ 79
3.4.6. Отображение страницы оформления заказа с помощью
директивы v-if...................................................................................... 80
3.4.7. Сравнение v-show с v-if/v-else .............................................................. 81
Упражнение............................................................................................................. 82
Резюме.................................................................................................................... 82
Глава 4. Формы и поля ввода...................................................................................... 83
4.1. Связывание с помощью v-model........................................................................ 84
4.2. Повторный взгляд на связывание значений ...................................................... 92
4.2.1. Привязка значений к флажку .............................................................. 92
4.2.2. Привязка значений и переключатели .................................................. 93
4.2.3. Знакомство с директивой v-for............................................................. 95
4.2.4. Директива v-for без необязательного аргумента key ............................ 97
4.3. Знакомство с модификаторами ......................................................................... 98
4.3.1. Использование модификатора .number................................................ 99
4.3.2. Обрезка вводимых значений.............................................................. 100
4.3.3. Модификатор .lazy............................................................................. 102
Упражнение........................................................................................................... 102
Резюме.................................................................................................................. 102
Глава 5. Условные выражения, циклы и списки......................................................... 103
5.1. Сообщения о наличии товара ......................................................................... 103
5.1.1. Сообщение об оставшемся товаре с помощью v-if.............................. 104
5.1.2. Дополнительные сообщения с использованием v-else
и v-else-if ........................................................................................... 106
5.2. Циклический перебор товара.......................................................................... 108
5.2.1. Добавление звездного рейтинга на основе диапазона v-for ............... 108
5.2.2. Привязка HTML-класса к звездному рейтингу..................................... 110
5.2.3. Информация о товарах ...................................................................... 112
Оглавление  9
5.2.4. Импорт товаров из файла product.json............................................... 114
5.2.5. Рефакторинг приложения с использованием директивы v-for ............ 115
5.3. Сортировка записей........................................................................................ 120
Упражнение........................................................................................................... 122
Резюме.................................................................................................................. 122
Глава 6. Работа с компонентами ............................................................................... 123
6.1. Что такое компоненты .................................................................................... 123
6.1.1. Создание компонентов ...................................................................... 124
6.1.2. Локальная регистрация ..................................................................... 125
6.2. Иерархия компонентов ................................................................................... 127
6.3. Использование входных параметров для передачи данных............................. 128
6.3.1. Передача литералов через входные параметры................................. 128
6.3.2. Динамические входные параметры.................................................... 129
6.3.3. Проверка входных параметров .......................................................... 133
6.4. Определение шаблона для компонента........................................................... 135
6.4.1. Вложенные шаблоны ......................................................................... 136
6.4.2. Атрибут text/x-template...................................................................... 137
6.4.3. Использование однофайловых компонентов...................................... 138
6.5. Работа с пользовательскими событиями ......................................................... 139
6.5.1. Отслеживание событий...................................................................... 139
6.5.2. Изменение входных параметров потомка с помощью .sync ................ 141
Упражнение........................................................................................................... 142
Резюме.................................................................................................................. 142
Глава 7. Продвинутые компоненты и маршрутизация................................................ 144
7.1. Работа со слотами........................................................................................... 145
7.2. Именованные слоты........................................................................................ 148
7.3. Слоты с ограниченной областью видимости.................................................... 150
7.4. Создание приложения с динамическими компонентами .................................. 152
7.5. Создание асинхронных компонентов............................................................... 154
7.6. Рефакторинг зоомагазина с помощью Vue-CLI................................................. 156
7.6.1. Создание нового приложения с помощью Vue-CLI.............................. 157
7.6.2. Настройка маршрутов ........................................................................ 159
10  Оглавление
7.6.3. Добавление CSS, Bootstrap и Axios ..................................................... 160
7.6.4. Подготовка компонентов.................................................................... 162
7.6.5. Создание компонента Form ................................................................ 164
7.6.6. Добавление компонента Main ............................................................ 165
7.7. Маршрутизация............................................................................................... 168
7.7.1. Добавление параметризированного маршрута product ....................... 168
7.7.2. Настройка router-link с помощью тегов ............................................... 171
7.7.3. Оформление router-link с помощью стилей ......................................... 173
7.7.4. Добавление дочернего маршрута edit ................................................ 174
7.7.5. Перенаправление и подстановочные маршруты................................. 177
Упражнение........................................................................................................... 179
Резюме.................................................................................................................. 179
Глава 8. Переходы и анимация.................................................................................. 180
8.1. Что такое переходы........................................................................................ 180
8.2. Основы анимации ........................................................................................... 185
8.3. JavaScript-хуки ................................................................................................ 186
8.4. Переход между компонентами ........................................................................ 189
8.5. Обновление зоомагазина ................................................................................ 192
8.5.1. Добавление перехода в проект зоомагазина...................................... 192
8.5.2. Добавление анимации в проект зоомагазина..................................... 193
Упражнение........................................................................................................... 196
Резюме.................................................................................................................. 196
Глава 9. Расширение Vue .......................................................................................... 197
9.1. Повторное использование кода с помощью примесей ..................................... 197
9.1.1. Глобальные примеси ......................................................................... 202
9.2. Пользовательские директивы с примерами..................................................... 203
9.2.1. Глобальные пользовательские директивы с модификаторами,
значениями и аргументами ................................................................ 206
9.3. Функция отрисовки и JSX................................................................................ 208
9.3.1. Пример функции отрисовки............................................................... 209
9.3.2. Пример использования JSX................................................................ 212
Упражнение........................................................................................................... 216
Резюме.................................................................................................................. 216
Оглавление  11
Часть III. Моделирование данных, работа с API и тестирование
Глава 10. Vuex .......................................................................................................... 218
10.1. Для чего нам Vuex ........................................................................................ 218
10.2. Состояние и мутации в Vuex.......................................................................... 222
10.3. Геттеры и действия....................................................................................... 225
10.4. Использование Vuex в проекте зоомагазина с помощью Vue-CLI ................... 228
10.4.1. Установка Vuex с помощью Vue-CLI.................................................. 228
10.5. Вспомогательные методы Vuex...................................................................... 231
10.6. Краткое введение в модули .......................................................................... 234
Упражнение........................................................................................................... 236
Резюме.................................................................................................................. 236
Глава 11. Взаимодействие с сервером....................................................................... 237
11.1. Отрисовка на стороне сервера ...................................................................... 238
11.2. Введение в Nuxt.js ........................................................................................ 240
11.2.1. Создание приложения для поиска музыки........................................ 241
11.2.2. Создание проекта и установка зависимостей ................................... 243
11.2.3. Создание элементов интерфейса и компонентов.............................. 246
11.2.4. Обновление стандартной разметки.................................................. 249
11.2.5. Добавление хранилища на основе Vuex ........................................... 249
11.2.6. Использование промежуточных обработчиков ................................. 250
11.2.7. Создание маршрутов в Nuxt.js.......................................................... 251
11.3. Взаимодействие с сервером с помощью Firebase и VuexFire........................... 256
11.3.1. Подготовка к работе с Firebase ........................................................ 257
11.3.2. Подключение Firebase к проекту зоомагазина.................................. 261
11.3.3. Хранение состояния аутентификации в Vuex.................................... 262
11.3.4. Поддержка аутентификации в компоненте Header........................... 263
11.3.5. Работа с базой данных Realtime Database в файле Main.vue............. 267
Упражнение........................................................................................................... 268
Резюме.................................................................................................................. 269
Глава 12. Тестирование ............................................................................................ 270
12.1. Создание тестовых сценариев....................................................................... 271
12.2. Непрерывная интеграция, доставка и развертывание ................................... 272
12.2.1. Непрерывная интеграция................................................................. 272
12  Оглавление
12.2.2. Непрерывная доставка..................................................................... 273
12.2.3. Непрерывное развертывание........................................................... 273
12.3. Виды тестов .................................................................................................. 274
12.4. Подготовка среды для тестирования............................................................. 274
12.5. Создание первого тестового сценария с помощью vue-test-utils .................... 277
12.6. Тестирование компонентов ........................................................................... 280
12.6.1. Тестирование входных параметров.................................................. 281
12.6.2. Тестирование текста........................................................................ 282
12.6.3. Тестирование CSS-классов............................................................... 282
12.6.4. Симуляция Vuex............................................................................... 283
12.7. Настройка отладчика Chrome ........................................................................ 285
Упражнение........................................................................................................... 288
Резюме.................................................................................................................. 288
Приложения
Приложение А. Настройка среды разработки........................................................... 290
А.1. Chrome Developer Tools ................................................................................... 290
А.2. vue-devtools для Chrome ................................................................................. 291
А.3. Загрузка сопутствующего кода для отдельных глав ........................................ 293
А.4. Установка Node.js и npm................................................................................. 293
А.4.1. Установка Node.js с помощью автоматических установщиков ............ 294
А.4.2. Установка Node.js с помощью NVM .................................................... 294
А.4.3. Установка Node.js с помощью системы управления пакетами
в Linux ............................................................................................... 295
А.4.4. Установка Node.js с помощью MacPorts или Homebrew ...................... 295
А.4.5. Проверяем, установлен ли пакет Node .............................................. 295
А.5. Установка Vue-CLI .......................................................................................... 296
Приложение Б. Ответы на вопросы ......................................................................... 297
Глава 2.................................................................................................................. 297
Глава 3.................................................................................................................. 297
Глава 4.................................................................................................................. 297
Глава 5.................................................................................................................. 298
Оглавление  13
Глава 6.................................................................................................................. 298
Глава 7.................................................................................................................. 298
Глава 8.................................................................................................................. 298
Глава 9.................................................................................................................. 298
Глава 10................................................................................................................ 299
Глава 11................................................................................................................ 299
Глава 12................................................................................................................ 299
Шпаргалка.................................................................................................................. 300