3、Vue.js 开发：从基础到待办事项应用

饼干CSS

于 2025-08-16 11:36:56 发布

阅读量28

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js实战：从零到全栈文章标签： Vue.js 组合式 API 待办事项应用

本文链接：https://blog.youkuaiyun.com/j2k3l4/article/details/151142390

21 篇文章 ¥499.90

订阅专栏¥69.90

在 App.vue 中，我们可以将其作为 Vue.js 组件使用。打开该文件，会看到带有导入语句的脚本标签。我们可以移除 TheWelcome 导入行，替换为：

import MyFirst from './components/MyFirst.vue'

接着，在模板标签中，移除 <TheWelcome /> 类似 HTML 的标签，替换为 <MyFirst /> HTML 表示法。如果代码正在运行，会发现浏览器自动更新以反映这些更改，这就是热重载，它能实现流畅的开发流程。若停止了进程，可重启并在浏览器中重新访问页面，就能看到创建的组件。

为组件添加一些 CSS 样式，在 MyFirst.vue 文件的模板块下方添加以下代码：

<style scoped>
div {
  color: #35495f;
  font-size: 1.6rem;
}
span {
  color: #41b883;
  font-weight: 700;
}
</style>

样式块的内容会像普通 CSS 文件一样被处理。 scoped 属性意味着 div