Vue. Поля ввода

1.

Vue
ПОЛЯ ВВОДА

2.

ТЕКСТОВЫЕ ПОЛЯ
Директива – это ключевое слово, которое используется в
шаблоне и выполняет особое действие.
Директивы, которые уже изучены:
v-on привязывает событие @click, @input, @keydown
v-bind привязывает атрибут :class, :style, :src

3.

ТЕКСТОВЫЕ ПОЛЯ
Директивы:
v-model работает с полями ввода
v-if создаёт условия в шаблоне

4.

input
У поля ввода много разных атрибутов,
давайте вспомним, за что отвечает каждый:
v-model
Во Vue есть специальная директива для
работы со значением поля ввода.

5.

v-model
Data-свойство обновляется каждый раз,
когда меняется значение в поле ввода.
v-model
Значение обновляется каждый раз, когда
меняется data-свойство.

6.

Задача. Редактор текста 2
1. Подготовьте шаблон
Скачайте шаблон компонента из материалов (TextEditor.vue) и положите его в
папку components
Подключите компонент к App.vue. Запустите проект
Пока компонент выглядит очень пусто:

7.

Задача. Редактор текста 2
2. Используйте data
Зато в компоненте уже объявлены все необходимые data-свойства:
Подставьте text в шаблон, а остальные свойства используйте
для управления стилями элемента классом result.
Если всё сделаете правильно, результат будет выглядеть так:

8.

Задача. Редактор текста 2
3. Вводите текст
Настройте поля ввода через новую директиву.

9.

ПОЛЯ С ВЫБОРОМ
Директива v-model и select

10.

select
В data-свойство будет подставляться value
выбранного option.
Внутри атрибута v-bind можно использовать
выражение, которое составить правильный
путь до картинки:

11.

checkbox и v-model

12.

checkbox
У чекбокса есть только два состояния:
выбран и не выбран. Поэтому его v-model –
это всегда значение с типом boolean.
v-if
Чтобы скрывать и показывать элементы в
шаблоне, используй директиву v-if:

13.

Задача. Редактор текста 3
1. Выбор шрифта
Самостоятельно добавьте в вёрстку поля ввода select для выбора семейства шрифтов.
Пройдите все шаги чеклиста, чтобы ничего не забыть:
1. Создайте select и 3 тега option внутри него
2. Создайте новое data-свойство и свяжи его с селектом
3. Используйте data-свойство в стилях элемента с классом result

14.

Задача. Редактор текста 3
2. Настройка текста
Самостоятельно добавьте вёрстку чекбокса для включения заглавных букв (или другого
CSS свойства, которое тебе нравится).
Пройди все шаги чеклиста, чтобы ничего не забыть:
1. Создайте чекбокс с лейблом (или скопируйте из Bootstrap)
2. Создайте новое data-свойство и свяжите его с чекбоксом
3. Используйте data-свойство для добавления нового класса
элементу result
4. Напишите CSS, который соответствует этому классу

15.

Задача. Вход на сайт
1. Настройте шаблон
Скачайте шаблон компонента из материалов
(LoginForm.vue) и положите его в папку components
Подключите компонент к App.vue
Запустите проект
Результат должен выглядеть так:

16.

Задача. Вход на сайт
2. Настройте кнопку входа
Добавьте новое data-свойство isLoggedIn, которое по
умолчанию равняется false.
По клику на кнопку Войти вызывай метод login, который
будет меняет свойство isLoggedIn на true.
Если пользователь ещё не вошёл на сайт, показывай форму
логина. Если уже вошёл — сообщение о входе.

17.

Задача. Вход на сайт
3. Обработайте поля ввода
Добавьте новые data-свойства:
◦ username — имя пользователя
◦ password — пароль
◦ isError — есть ли ошибка в заполнении полей
Правильные данные для входа на
сайт: admin 1234
Если пользователь ввёл данные неправильно,
показывай ошибку. Если данные совпадают,
скрой форму и покажи приветствие.

18.

РАДИОКНОПКИ
Радиокнопки – это набор элементов, среди которых можно
выбрать только один.
Радиокнопки по смыслу
похожи на select, но иногда
бывают удобнее для
пользователя.

19.

radio
Группа радиокнопок имеет общий v-model и разные значения value.

20.

Задача. Какой ты овощ?
1. Настройте шаблон
Скачайте шаблон компонента из материалов
(TestApp.vue) и положите его в
папку components
Подключите компонент к App.vue
Запустите проект
Компонент должен выглядеть так:

21.

Задача. Какой ты овощ?
2. Обработайте результат теста.
По клику на кнопку обработай ответы от
пользователя и скажите ему, кто он!
Таблица вопросов-ответов представлена ниже:
Каким лучше быть?
Какой цвет лучше?
Результат
Умным
Зеленый
Ты брокколи
Умным
Красный
Ты помидор
Красивым
Зеленый
Ты огурец
Красивым
Красный
Ты болгарский перец

22.

Задача. Мемогенератор
Скачайте шаблон компонента из материалов
(MemGenTemplate.vue) и вдохните в него
жизнь с помощью директивы v-model и
парочки textarea.