ученикам: ушел в отпуск до 15-го июня. в отпуске буду по возможности отвечать на вопросы, но могу пропадать

Работа с формами в фреймворке Vue

Сейчас мы с вами научимся работе с инпутами в фреймворке Vue. С их помощью мы будем реактивно добавлять данные на страницу. Давайте приступим.

Пусть у нас есть инпут:

<div id="app"> <input> </div>

Пусть также у нас есть свойство message:

let app = new Vue({ el: '#app', data: { message: 'hello', }, });

Мы можем связать это свойство и инпут таким образом, чтобы изменение любого из них приводило к изменению другого.

Это делается с помощью директивы v-model, в которой указывается свойство, привязанное к инпуту.

Давайте привяжем к нашему инпуту свойство message:

<div id="app"> <input v-model="message"> </div>

Давайте запустим (запустите):

let app = new Vue({ el: '#app', data: { message: 'hello', }, }); <div id="app"> <input v-model="message"> </div>

После запуска в инпуте будет стоять текст свойства message (его текст 'hello').

А вот если поредактировать данные в инпуте - свойство message также изменится соответствующим образом. Чтобы увидеть это, давайте выведем введенное в инпут содержимое где-нибудь в абзаце:

<div id="app"> <input v-model="message"> <p>Введенное сообщение: {{ message }}</p> </div>

Сразу после запуска и в инпуте, и в абзаце будет стоять текст 'hello'. Если же начать редактировать данные в инпуте - вы увидите, как они одновременно меняются в абзаце под ним.

Давайте убедимся в этом - соберем все вместе и запустим:

let app = new Vue({ el: '#app', data: { message: 'hello', }, }); <div id="app"> <input v-model="message"> <p>Введенное сообщение: {{ message }}</p> </div>

Дан инпут. Сделайте так, чтобы вводимый в инпут текст сразу выводился в абзаце под ним.

Изначально пустой инпут

Пусть вы хотите, чтобы изначально инпут был пустым. Для этого в data для свойства message значением поставим пустые кавычки:

let app = new Vue({ el: '#app', data: { message: '', }, });

Это обязательный шаг - если к инпуту привязано свойство, оно обязательно должно быть определено в data (пусть и будет пустым), иначе все будет работать некорректно.

Действие по кнопке

Пусть у нас есть кнопка и инпут, в который вводится число. Давайте по нажатию на кнопку выведем квадрат введенного в инпут числа.

Приступим к реализации.

Давайте для начала сделаем инпут, привяжем к нему свойство num, сделаем кнопку, по клику на которую будет выполнятся метод calc, и сделаем также абзац, в который будет выводится результат (пусть результат будет в свойстве result):

<div id="app"> <p>Результат: {{ result }}</p> <input v-model="num"> <button v-on:click="calc">Посчитать</button> </div>

Давайте напишем реализацию метода calc. Внутри него свойство num будет доступно как this.num. Для возведения в квадрат перемножим this.num само на себя, а результат запишем в this.result:

methods: { calc: function() { this.result = this.num * this.num; } }

Получится, что как только будет вызван метод calc (а это случится по нажатию на кнопку), в свойство result запишется результат и при этом одновременно выведется в нашем абзаце.

Давайте соберем все вместе и запустим:

let app = new Vue({ el: '#app', data: { num: null, // изначально числа нет result: 0, }, methods: { calc: function() { this.result = this.num * this.num; } } }); <div id="app"> <p>Результат: {{ result }}</p> <input v-model="num"> <button v-on:click="calc">Посчитать</button> </div>

Дан инпут. Дана кнопка. Дан абзац. В инпут вводится число. Сделайте так, чтобы по нажатию на кнопку абзаце появился квадратный корень этого числа.

Даны два инпута. Дана кнопка. Дан абзац. В каждый инпут вводятся числа. Сделайте так, чтобы по нажатию на кнопку в абзаце появилась сумма этих чисел.

Даны два инпута. Дана кнопка. В каждый инпут вводится какой-то текст. Сделайте так, чтобы по нажатию на кнопку текст первого инпута стал во втором и наоборот.

Дан инпут, 3 абзаца и кнопка. В инпут вводится ФИО пользователя через пробел. Сделайте так, чтобы по нажатию на кнопку в первом абзаце появилась фамилия пользователя, во втором - имя, а в третьем - отчество.

Из инпута в массив

Пусть у нас в items хранится массив:

let app = new Vue({ el: '#app', data: { items: ['a', 'b', 'c', 'd', 'e'], }, });

И его содержимое выводится на экран в виде списка:

<div id="app"> <ul> <li v-for="item in items">{{ item }}</li> </ul> </div>

Давайте теперь сделаем инпут и кнопку, по нажатию на которую текст инпута добавится в конец списка в качестве нового пункта:

<div id="app"> <input v-model="newItem"> <button v-on:click="addItem">Добавить</button> </div>

Для корректной работы инпута добавим в data свойство newItem:

let app = new Vue({ el: '#app', data: { newItem: '', // начальное значение инпута items: ['a', 'b', 'c', 'd', 'e'], }, });

По нажатию на кнопку будет вызываться метод addItem, который будет добавлять новый элемент в массив items. Текст элемента будет браться из инпута, то есть из this.newItem:

methods: { addItem: function() { this.items.push(this.newItem); } }

Давайте соберем все вместе и запустим:

let app = new Vue({ el: '#app', data: { newItem: '', items: ['a', 'b', 'c', 'd', 'e'], }, methods: { addItem: function() { this.items.push(this.newItem); } } }); <div id="app"> <input v-model="newItem"> <button v-on:click="addItem">Добавить</button> <ul> <li v-for="item in items">{{ item }}</li> </ul> </div>

Запустите код, введите текст в инпут, нажмите на кнопку - и вы увидите, как текст из инпута добавится в конец нашего списка.

Дан массив. Дан инпут. Дана кнопка. Выведите элементы этого массива в виде списка ul. Сделайте так, чтобы по нажатию на кнопку в конец списка добавился текст из инпута.

Модифицируйте предыдущую задачу так, чтобы новый пункт добавлялся в начало списка.

Модифицируйте предыдущую задачу так, чтобы в конце каждой li появилась кнопка для удаления этого пункта списка.