Vue.js

Цель: изучить идеи виртуального DOM, реактивности, фреймворка, освоить на практике основы работы с Vue.js.

Содержание и порядок выполнения лабораторной работы:

1. Изучить основные идеи заложенные в фреймворк Vue. Изучить синтаксис используемый в шаблонах (текстовой интерполяции, v-if, v-show, v-for и key, v-on, v-bind, v-model) и используемые сокращения директив.
2. Создать новую страницу vue.html в проекте из предыдущих лабораторных работ. Добавить ссылку на эту страницу в меню макета.
3. К созданной странице подключить Vue с CDN и файл для вашего кода.
4. В html добавить элемент, к которому будет подключен экземпляр Vue-приложения.
5. В созданный элемент добавить форму с текстовым полем для создания записей с кнопкой о добавлении новой записи и секцию для добавленных записей.

Логика работы элементов

1. Пока поле в форме пустое кнопка заблокирована и это показано в том числе стилями (v-bind).
2. Когда в поле появляется текст, то разблокируется кнопка и появляется счетчик до максимального числа символов (v-show + computed).
3. Если символов больше заданного максимума, то показывается негативное значение и текст выделяется красным (v-bind).
4. Если остается доступными от 0 до 10 символов, то счетчик желтый.
5. При нажатии (v-on) кнопки добавить запись добавляется ниже (methods), а поле очищается.
6. В объект записи добавить время с помощью Date.now(). Для нормального отображения времени использовать API интернационализации - new Intl.DateTimeFormat('ru', {year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric"}).format(date).
7. Если нет записей то текст “Нет записей”, если всего одна - “Запись”, если больше - “Записи” (v-if) и добавляется счетчик записей (v-show + computed).
8. Отрисовать все добавленные записи (v-for и key).

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница на хостинге проверенная, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

• Doka: React и альтернативы
• Официальное руководство Vue на русском
• MDN: Intl
• Doka: Date + Intl

Вопросы для защиты

1. В чем заключается идея реактивности?
2. Что подразумевается под прогрессивным фреймворком?
3. Чем библиотека отличается от фреймворка?
4. Зачем в принципе использовать фреймворки Vue/Angular?
5. Для чего используется виртуальный DOM в react/vue?
6. Назовите основные директивы во Vue.
7. Двустороннее и одностороннее связывание.
8. Методы и вычисляемые значения.
9. Разница между v-if и v-show.
10. Какие есть возможности у API интернационализации Intl?