Vue.js Кнопки и Обновление Значений

Введение

В этом проекте вы научитесь настраивать среду Vue.js и реализовывать функциональность кнопок для обновления значения, отображаемого на веб-странице.

👀 Предварительный просмотр

🎯 Задачи

В этом проекте вы научитесь:

• Настраивать среду Vue.js
• Реализовывать функциональность кнопок - и + для обновления значения
• Тестировать функциональность кнопок

🏆 Достижения

После завершения этого проекта вы сможете:

• Создать базовое приложение на Vue.js
• Создать реактивный объект данных и обновлять его значения
• Использовать обработчики событий для вызова функций и обновления интерфейса пользователя

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

├── css
│   └── style.css
├── index.html
└── js

В них:

• index.html - главная страница, которую нужно отректировать.
• css - папка, в которой хранятся стили проекта.
• js - файл Vue, на который зависит проект.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу. Нажмите кнопки - и + на странице, и вы увидите, что значение в середине не может быть изменено. Эффект страницы следующий:

Исправление функции

В этом шаге вам нужно исправить ошибку, чтобы при нажатии на кнопки "-" и "+" на странице значения в центре изменялись соответственно.

1. В файле index.html найдите раздел // TODO:
2. Измените его на следующий код:

// TODO
let { value } = toRefs(data);

3. В обработчиках событий @click для кнопок "-" и "+" вызовите функцию update и передайте обновленное значение в качестве аргумента.
4. В функции update обновите свойство value новым значением, переданным в качестве аргумента.

После завершения этих шагов нажмите на кнопки "-" и "+" на странице, и значения в центре изменятся соответственно.

Эффект после завершения следующий:

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.