How to draw cards in vue

With the continuous advancement of modern development, there are many choices for front-end development frameworks. Among them, Vue.js, as one of the advanced JavaScript frameworks, has been widely used. Vue.js is easy to learn, efficient, and flexible. It can quickly establish a structure during project development, effectively improving development efficiency.

In the development of Vue.js, drawing cards is a very common requirement. Cards are a commonly used web layout and can be used to display a wide variety of content. In this article, we’ll explore how to implement a simple card layout using Vue.js.

First of all, before you start creating a new project using Vue.js, you need to make sure that Node.js is installed on your computer. If you have not installed Node.js, please go to the official website of Node.js to download and install it.

Next, create a new Vue.js project. In the command line, enter the following command:

vue create my-vue-app

This will generate a new project named my-vue-app and automatically install the required dependencies.

In the created Vue.js project, we need to first add a div element to App.vue as a container for our subsequent card layout. At the same time, we also need to import a component named Card.vue into App.vue, which is the core component we will use to implement a single card layout later. Therefore, in the App.vue file, please add the following code first:

<template>
  <div id="app">
    <Card />
  </div>
</template>

<script>
import Card from './components/Card.vue'
export default {
  name: 'app',
  components: {
    Card
  }
}
</script>

Card in the code is the card layout component we imported in the ./components/Card.vue file.

Next, we need to create a new folder named components in the project folder, and create a new file named Card.vue in the folder. In this new file, we can define a card's style, as well as the content we want to display in each card. Here is an example of a simple Card.vue file:

<template>
  <div class="card">
    <img src="https://placeimg.com/640/480/any" alt="" />
    <div class="card-body">
      <h5 class="card-title">{{ title }}</h5>
      <p class="card-text">{{ description }}</p>
      <a href="#" class="btn btn-primary">{{ button }}</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      required: true
    },
    button: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
.card {
  display: inline-block;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  margin: 10px;
  width: 300px;
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.card-body {
  padding: 20px;
}

.card-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.card-text {
  font-size: 16px;
  margin-bottom: 10px;
  color: #666;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
</style>

In the above code, we define a Vue component named Card. This component contains three props: title, description, and button, which represent the title, description, and button of the card respectively. Additionally, we define a style called card that is designed to style each card. When data is passed to the component, Vue.js will automatically render the style and content of each card.

Next, we need to reference the Card component in the App.vue file and pass the title, description, and button text to the component. In order to achieve this, we need to use the v-bind directive on the Card component to pass the title, description and button to the component. The code is as follows:

<template>
  <div id="app">
    <Card
      title="My Card"
      description="This is a simple example of a Vue card component"
      button="Read more"
    />
  </div>
</template>

<script>
import Card from './components/Card.vue'
export default {
  name: 'app',
  components: {
    Card
  }
}
</script>

Now, we have a simple Vue.js card ready layout. Run the application in a browser and view the results of the application. Each Card component is rendered with the same style, including a title, a description, and a "Read more" button.

Summary

This article briefly introduces how to use Vue.js to implement a simple card layout. Multiple custom card layouts can be easily created by defining a Card component. These layouts can be customized to suit various needs using Vue.js’s prop functionality. Vue.js is a powerful framework that encourages developers to build web applications quickly and efficiently. Learning and using Vue.js is one of the powerful tools for front-end developers, helping them develop efficient and easy-to-use web applications faster.

The above is the detailed content of How to draw cards in vue. For more information, please follow other related articles on the PHP Chinese website!