构建一个 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 是主页。

点击 WebIDE 右下角的“Go Live”按钮来运行项目。

接下来，在 VM 顶部打开“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];
   }
   

   此实现使用 Vue.js 的 ref 函数创建一个响应式状态变量 toggledState 和一个更新状态的 toggle 函数。

3. 通过点击切换按钮来测试应用程序。商店的营业状态应在“营业”和“停业”之间切换，并且相应的图像也应随之更改。

恭喜！你已经使用 Vue.js 完成了“切换营业状态”应用程序的实现。完成后的效果如下：

总结

恭喜！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。