Упражнение. Привязка данных к формам

  • 4 мин

Здесь вы обновите вымышленное приложение, которое позволяет пользователям забронировать путешествие в космос. Вы добавите форму, чтобы пользователь мог забронировать поездку на Луну.

Клонирование начального репозитория и изучение кода

У этого модуля есть начальный репозиторий. Он позволяет сосредоточиться только на концепциях этого модуля.

Необходимо установить Git и Visual Studio Code. В Visual Studio Code вам потребуется расширение Live Server.

Клонируйте начальный репозиторий и откройте папку в Visual Studio Code, выполнив следующий код.

git clone https://github.com/MicrosoftDocs/mslearn-vue-data-events
cd mslearn-vue-data-events/starter
code .

Начальное приложение уже содержит основную модель данных, которую вы будете использовать. product содержит сведения о самом круизе, включая список доступных cabins. Вы будете использовать объект booking для хранения параметров, выбранных пользователем для бронирования. Настройки можно просмотреть в файле index.js.

Создание формы

Создайте форму, которую пользователь будет использовать для настройки бронирования:

  1. В Visual Studio Code откройте файл index.html.

  2. В строке TODO: Add booking form после комментария добавьте следующий HTML-код.

    <!-- TODO: Add booking form -->
<form v-show="!booking.completed">
    <h2>Book now!</h2>
    <div class="row">
        <label for="product-cabin">Select class:</label>
        <select id="product-cabin" v-model="booking.cabinIndex">
            <option v-for="(cabin, index) in product.cabins" :value="index">
                {{ cabin.name }} $ {{ cabin.price.toLocaleString('en-US') }}
            </option>
        </select>
    </div>
    <div class="row">
        <label for="notes">Notes:</label>
        <textarea v-model="booking.notes" rows="3"></textarea>
    </div>
    <div class="row">
        <!--TODO: Add button later -->


    </div>
</form>

Изучение кода

Давайте рассмотрим код HTML, добавленный на страницу.

Элемент формы

<form v-show="!booking.completed">

Элемент form является обычным элементом HTML-формы. Добавленный ключевой атрибут v-show позволяет переключать отображение элемента в Vue.js. В этом случае необходимо отобразить элемент, если бронирование не завершено. Если задать значение !booking.completedv-show , вы указываете, что форма будет отображаться во время резервирования ! (не). completed

Элемент выбора класса

<select id="product-cabin" v-model="booking.cabinIndex">
    <option v-for="(cabin, index) in product.cabins" :value="index">
        {{ cabin.name }} $ {{ cabin.price.toLocaleString('en-US') }}
    </option>
</select>

Список доступных классов отображается с помощью элемента select. Необходимо привязать выбранное значение, которое будет являться индексом, к booking.cabinIndex.

Список доступных классов находится в product.cabins, поэтому вы используете v-for для создания списка вариантов для раскрывающегося списка. В качестве value каждого варианта устанавливается значение index. Вы создаете отображение name класса и его price.

Элемент текстовой области для заметок

<textarea v-model="booking.notes" rows="3"></textarea>

Привяжите параметр booking.notes к textarea. Размер устанавливается путем присвоения атрибуту rows значения 3.

Комментарий todo

Обратите внимание на напоминание о добавлении TODO кнопки. Когда вы научитесь создавать обработчики событий позже в этом модуле, вы поместите здесь эту кнопку.

Совет

Комментарии TODO — это отличный способ делать заметки о задачах, которые необходимо выполнить.

Проверка результатов

Давайте посмотрим на обновленную страницу.

  1. Сохраните все файлы, выбрав Файл>Сохранить все.
  2. Откройте палитру команд, нажав клавиши CTRL+SHIFT+P. На Mac вместо этого нажмите CMD+SHIFT+P.
  3. Убедитесь, что Live Server запущен — введите Live Server и выберите Live Server: открыть с Live Server.
  4. Для этого откройте в браузере адрес http://localhost:5500.

Вы увидите, что на странице отображается следующее изображение:

Снимок экрана: созданная форма.

Теперь вы привяжете данные Vue к форме.