vue3手写card组件

简介: vue3手写card组件

在这篇文章中,我们将介绍如何使用Vue 3的Composition API来手写一个简单的Card组件。我们将展示该组件的模板、逻辑和样式,以便您了解如何使用Vue 3的最新语法糖来创建可复用的UI组件。

模板


<template>
  <div class="card">
    <img :src="imageUrl" alt="Card Image" />
    <div class="card-body">
      <h3>{{ title }}</h3>
      <p>{{ description }}</p>
      <button @click="handleClick">Click me</button>
    </div>
  </div>
</template>

以上是Card组件的模板部分。它包括了一个图片、标题、描述和一个点击按钮。

逻辑


<script>
import { ref } from 'vue';
export default {
  setup(props) {
    const imageUrl = ref(props.imageUrl);
    const title = ref(props.title);
    const description = ref(props.description);
    function handleClick() {
      alert('Button clicked!');
    }
    return {
      imageUrl,
      title,
      description,
      handleClick
    };
  },
  props: {
    imageUrl: {
      type: String,
      required: true
    },
    title: {
      type: String,
      default: 'Card Title'
    },
    description: {
      type: String,
      default: 'This is a card component'
    }
  }
};
</script>

在逻辑部分,我们使用ref来定义响应式变量,并且利用setup函数来设置组件的逻辑。同时,我们也定义了props来接收外部传入的数据。

样式


<style>
.card {
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  margin: 10px;
  width: 300px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.card-body {
  padding: 15px;
}
h3 {
  margin: 0 0 10px 0;
}
button {
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
</style>

最后,我们设置了Card组件的样式,包括边框、阴影、内边距等,以及图片、标题和按钮的样式。

通过以上示例,我们展示了如何使用Vue 3的Composition API来手写一个Card组件。希望这篇文章对你有所帮助!

目录
相关文章
|
4天前
|
JavaScript 前端开发 索引
「Vue3系列」Vue3 条件语句/循环语句
在 Vue 3 中,你可以使用条件语句来动态地控制模板中的渲染内容。Vue 提供了多种方式来实现条件渲染,包括 `v-if`、`v-else-if`、`v-else` 和 `v-show` 指令。
27 0
|
5天前
|
JavaScript
Vue 父传子组件传参 defineProps
Vue 父传子组件传参 defineProps
|
5天前
|
JavaScript 前端开发
Vue 创建组件
Vue 创建组件
|
5天前
Vue3框架中让table合计居中对齐
Vue3框架中让table合计居中对齐
|
5天前
Vue3 子/父组件相互调用
Vue3 子/父组件相互调用
27 0
|
5天前
|
JavaScript
vue3 使用element plus 打包时 报错
vue3 使用element plus 打包时 报错
12 0
|
5天前
|
JavaScript
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
27 0
|
5天前
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
|
1天前
|
JavaScript
vue 组件注册
vue 组件注册