Vue3自定义文章列表组件

一、Vue3的代码展示

<template>
  <div>
    <div v-for="article in articles" :key="article.id" class="article-card">
      <div class="author-info">
        <img :src="article.avatar" alt="Author Avatar" class="avatar" />
        <div class="author-details">
          <span class="author-name">{{ article.username }}</span>
          <span class="publish-time">{{ article.createTime }}</span>
        </div>
      </div>
      <div class="article-details">
        <h3 class="article-title">{{ article.title }}</h3>
        <p class="article-info">{{ article.summary }}</p>
      </div>
      <div class="article-stats">
        <span class="stat-item">查看数: {{ article.viewCount }}</span>
        <span class="stat-item">点赞数: {{ article.likeCount }}</span>
        <span class="stat-item">评论数: {{ article.commentCount }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps(['articles']);
</script>
<style scoped>
.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; 
}
</style>

二、 代码解读

HTML 模板部分：

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

JavaScript 部分：

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

CSS 部分：

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

三、结果展示