Vue.js 组件示例: 创建可复用卡片组件

<h2>在 Vue.js 组件中使用示例数据</h2>
<p>当然，请看下面示例的代码，我将在组件的 <code>data</code> 中添加一个示例数据供您参考：html<template>  <div>    <div class='card'>      <img :src='image' alt='Card Image' class='card-image' />      <div class='card-content'>        <h3 class='card-title'>{{ title }}</h3>        <p class='card-description'>{{ description }}</p>        <a :href='link' class='card-link'>Read More</a>      </div>    </div></p>
<pre><code>&lt;div class='example-card'&gt;      &lt;img :src='exampleImage' alt='Example Card Image' class='card-image' /&gt;      &lt;div class='card-content'&gt;        &lt;h3 class='card-title'&gt;{{ exampleTitle }}&lt;/h3&gt;        &lt;p class='card-description'&gt;{{ exampleDescription }}&lt;/p&gt;        &lt;a :href='exampleLink' class='card-link'&gt;Read More&lt;/a&gt;      &lt;/div&gt;    &lt;/div&gt;  &lt;/div&gt;&lt;/template&gt;
</code></pre>
<script>export default {  name: 'Card',  props: {    image: {      type: String,      required: true    },    title: {      type: String,      required: true    },    description: {      type: String,      required: true    },    link: {      type: String,      required: true    }  },  data() {    return {      exampleImage: 'example.jpg',      exampleTitle: 'Example Card',      exampleDescription: 'This is an example card description.',      exampleLink: '#'    }  }}</script>
<style scoped>.card {  width: 300px;  border-radius: 8px;  overflow: hidden;  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  background-color: #fff;}

.example-card {  margin-top: 16px;}

.card-image {  width: 100%;  height: 200px;  object-fit: cover;}

.card-content {  padding: 16px;}

.card-title {  margin: 0;  font-size: 20px;  font-weight: bold;}

.card-description {  margin: 8px 0;  font-size: 16px;  color: #666;}

.card-link {  display: inline-block;  padding: 8px 16px;  background-color: #2c3e50;  color: #fff;  text-decoration: none;  border-radius: 4px;}

.card-link:hover {  background-color: #34495e;}</style>
<p>在上述代码中，我在组件的 <code>data</code> 中添加了一个名为 'Example Card' 的示例数据，并使用该数据来展示示例卡片的图片、标题、描述和链接。</p>
<p>使用示例数据的好处是，您可以在组件中灵活地使用它们，并且可以将其替换为您自己的真实数据。</p>
<p>希望这个示例对您有所帮助！如果您还有其他问题，请随时提问。</p>