建立待办事项清单
在本研讨会中,我们将学习如何使用Vue.js和Bulma制作待办事项清单以进行样式管理。
在本练习中,为简单起见,我们将应用程序划分为4个宏组件,如下所示:
我们已经在星期一的课上设置了环境。 要执行此练习,您可以选择从应用程序的代码进行迭代,或克隆当前的回购,其中包含对所使用的2个样式库(布尔玛和Fontawesome)的引用以及组件App.view的样式表。
以下是制作待办事项清单的说明:
1.创建并初始化我们的第一个TodoCard组件:
将组件命名为待办事项卡
设置组件运行所需的3个块:脚本,样式和html。
设置卡CSS。
2.参考并使用App组件中的TodoCard组件
将TodoCard组件导入App.vue。
在脚本级别创建一个组件键。
在我们的App组件中显示TodoCard。
用布尔玛布置卡的样式。
3.实现我们卡的标题:
在卡片左上方