Создание переключателя статуса магазина на Vue.js

Введение

В этом проекте вы научитесь создавать простое приложение на Vue.js, которое позволяет пользователям переключать статус работы магазина между "открыт" и "закрыт". Приложение будет отображать текущий статус магазина и соответствующее изображение в зависимости от статуса. Пользователи могут нажать на кнопку переключения, чтобы изменить статус работы магазина.

👀 Превью

🎯 Задачи

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

• Как настроить структуру проекта с необходимыми папками и файлами
• Как создать настройку Vue.js и определить реактивное состояние и функциональность переключения
• Как реализовать HTML-структуру и CSS-стили для отображения статуса работы магазина и кнопки переключения
• Как интегрировать функциональность переключения, чтобы позволить пользователям менять статус работы магазина

🏆 Достижения

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

• Создать базовую структуру проекта на Vue.js
• Использовать функцию ref для создания реактивных переменных состояния
• Определить и использовать пользовательские функции в настройке Vue.js
• Связывать данные и обработчики событий в HTML-шаблоне
• Стилизовать приложение с использованием CSS, чтобы создать привлекательный интерфейс

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

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

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

├── css
├── images
├── lib
└── index.html

В них:

• css - папка, где хранятся стили проекта.
• images - папка, где хранятся изображения проекта.
• lib - папка, где хранятся зависимости проекта в JS.
• index.html - главная страница.

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

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, чтобы увидеть страницу.

Реализовать функциональность переключения

В этом шаге вы реализуете функциональность переключения для изменения статуса работы магазина.

1. Откройте файл index.html.

2. В функции useToggle замените комментарий // TODO следующим кодом:

   function useToggle(state) {
     // TODO
     const toggledState = ref(state);
   
     function toggle() {
       toggledState.value = !toggledState.value;
     }
     return [toggledState, toggle];
   }
   

   Эта реализация использует функцию ref из Vue.js для создания реактивной переменной состояния toggledState и функции toggle, которая обновляет состояние.

3. Протестируйте приложение, нажав на кнопку переключения. Статус работы магазина должен переключаться между "открыт" и "закрыт", и соответствующее изображение должно изменяться соответственно.

Поздравляем! Вы завершили реализацию приложения "Переключение статуса бизнеса" с использованием Vue.js. Эффект после завершения выглядит так:

Резюме

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