一、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. 通過樣式定義了作者頭像、作者姓名、發布時間、文章標題、文章摘要等的樣式。

三、結果展示