Упражнение. Добавление обработчиков событий

  • 4 мин

Теперь обновите приложение, чтобы добавить обработчик событий для созданной кнопки в форме. Кнопка будет включать флаг booking.completed для обновления отображения.

Добавление функции

Начните с добавления в приложение Vue:

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

  2. В строке после TODO: Add methods комментария добавьте следующий код, чтобы создать функцию bookCabin . Эта функция является обработчиком событий.

    // TODO: Add methods
methods: {
    bookCabin() {
        this.booking.completed = true;
    }
}

    Обратите внимание, что this привязан к текущему приложению. Он предоставляет доступ к объекту booking из данных.

Добавление кнопки в форму

Теперь добавьте кнопку в форму:

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

  2. В строке после TODO: Add button later комментария добавьте следующий HTML-код, чтобы создать кнопку.

    <!--TODO: Add button later -->
<button class="button" type="button" @click="bookCabin">Book now!</button>

    Обратите внимание, что атрибут @click привязан к созданной ранее функции bookCabin.

Тестирование страницы

Теперь можно протестировать обновленную страницу.

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

Вы настроили обработчик событий в Vue.