Vue3自定义文章列表组件

一、Vue3的代码展示

                              {{ article.username }}          {{ article.createTime }}                            
{{ article.title }}
        
{{ article.summary }}
                    查看数: {{ article.viewCount }}        点赞数: {{ article.likeCount }}        评论数: {{ article.commentCount }}            const props = defineProps(['articles']);.article-card {  border: 1px solid #ddd;  padding: 16px;  display: flex;  flex-direction: column;  align-items: flex-start;  transition: background-color 0.3s; /* 添加过渡以实现平滑的颜色变化 */}.article-card:hover {  background-color: #fafafa; /* 在悬停时改变背景颜色 */}.author-info {  display: flex;  align-items: center;  margin-bottom: 8px;}.avatar {  width: 40px;  height: 40px;  border-radius: 50%;  margin-right: 8px;}.author-details {  display: flex;  align-items: baseline;}.author-name {  font-weight: bold;  margin-right: 4px;}.publish-time {  color: #888;  margin-left: 20px;}.article-details {  margin-bottom: 12px;  display: flex;  flex-wrap: wrap;  flex-direction: column;  /*background-color: #3fdbf0;*/  text-align: left; /* Align content to the left */}.article-title {  margin-bottom: 2px;  font-size: 20px;}.article-info {  color: #555;  margin-bottom: 8px;  font-size: 16px;}.article-stats {  display: flex;  justify-content: space-between;  color: #888;}.stat-item {  margin-right: 12px; }

二、 代码解读

HTML 模板部分：

1. 标签是 Vue.js 模板的开始。
2. v-for="article in articles" 遍历 articles 数组中的每个 article。
3. :key="article.id" 用于标识每个循环中的元素，以便 Vue 可以高效地更新 DOM。
4. 定义了一个文章卡片的样式。
5. v-bind 用于动态地绑定元素的属性，例如 :src="article.avatar" 将文章作者的头像与 article.avatar 数据绑定。
6. {{ expression }} 用于在模板中插入表达式的值。

JavaScript 部分：

1. 是 Vue 3 提供的新语法，用于编写组件的逻辑部分。
2. const props = defineProps(['articles']); 用于声明接收来自父组件的 articles 属性。

CSS 部分：

1. 表示样式仅对当前组件起作用。
2. 样式定义了文章卡片的整体样式，作者信息的样式，文章详情的样式，以及文章统计信息的样式。
3. :hover 选择器用于在鼠标悬停时改变文章卡片的背景颜色。
4. 通过样式定义了作者头像、作者姓名、发布时间、文章标题、文章摘要等的样式。

三、结果展示