Bagaimana untuk menarik kad dalam vue

Dengan kemajuan berterusan pembangunan moden, terdapat banyak pilihan untuk rangka kerja pembangunan bahagian hadapan. Antaranya, Vue.js, sebagai salah satu rangka kerja JavaScript termaju, telah digunakan secara meluas. Vue.js mudah dipelajari, cekap dan fleksibel Ia boleh mewujudkan struktur dengan cepat semasa pembangunan projek, meningkatkan kecekapan pembangunan dengan berkesan.

Dalam pembangunan Vue.js, kad lukisan adalah keperluan yang sangat biasa. Kad ialah reka letak web yang biasa digunakan dan boleh digunakan untuk memaparkan pelbagai jenis kandungan. Dalam artikel ini, kami akan meneroka cara melaksanakan reka letak kad ringkas menggunakan Vue.js.

Pertama sekali, sebelum anda mula membuat projek baharu menggunakan Vue.js, anda perlu memastikan Node.js dipasang pada komputer anda. Jika anda belum memasang Node.js, sila pergi ke tapak web rasmi Node.js untuk memuat turun dan memasangnya.

Seterusnya, buat projek Vue.js baharu. Dalam baris arahan, masukkan arahan berikut:

vue create my-vue-app

Ini akan menjana projek baharu bernama my-vue-app dan memasang kebergantungan yang diperlukan secara automatik.

Dalam projek Vue.js yang dibuat, kami perlu terlebih dahulu menambahkan elemen div pada App.vue sebagai bekas untuk reka letak kad kami yang seterusnya. Pada masa yang sama, kami juga perlu mengimport komponen bernama Card.vue ke dalam App.vue, yang merupakan komponen teras yang akan kami gunakan untuk melaksanakan susun atur kad tunggal kemudian. Oleh itu, dalam fail App.vue, sila tambah kod berikut dahulu:

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

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

Kad dalam kod ialah komponen reka letak kad yang kami import dalam fail ./components/Card.vue.

Seterusnya, kita perlu mencipta folder baharu bernama komponen dalam folder projek dan mencipta fail baharu bernama Card.vue dalam folder. Dalam fail baharu ini, kami boleh menentukan gaya kad, serta kandungan yang ingin kami paparkan dalam setiap kad. Berikut ialah contoh fail Card.vue yang ringkas:

<template>
  <div class="card">
    <img src="/static/imghwm/default1.png"  data-src="https://placeimg.com/640/480/any"  class="lazy" alt="" />
    <div class="card-body">
      <h5 id="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>

Dalam kod di atas, kami mentakrifkan komponen Vue bernama Kad. Komponen ini mengandungi tiga prop: tajuk, perihalan dan butang, yang masing-masing mewakili tajuk, perihalan dan butang kad. Selain itu, kami mentakrifkan gaya yang dipanggil kad yang direka bentuk untuk menggayakan setiap kad. Apabila data dihantar ke komponen, Vue.js akan memaparkan gaya dan kandungan setiap kad secara automatik.

Seterusnya, kita perlu merujuk komponen Kad dalam fail App.vue dan menghantar tajuk, penerangan dan teks butang kepada komponen tersebut. Untuk mencapai ini, kita perlu menggunakan arahan v-bind pada komponen Kad untuk menghantar tajuk, perihalan dan butang kepada komponen Kod tersebut adalah seperti berikut:

<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>

Sekarang, kami mempunyai yang mudah. Reka letak sedia kad Vue.js. Jalankan aplikasi dalam pelayar dan lihat hasil aplikasi. Setiap komponen Kad dipaparkan dengan gaya yang sama, termasuk tajuk, penerangan dan butang "Baca lagi".

Ringkasan

Artikel ini memperkenalkan secara ringkas cara menggunakan Vue.js untuk melaksanakan reka letak kad yang ringkas. Berbilang susun atur kad tersuai boleh dibuat dengan mudah dengan menentukan komponen Kad. Reka letak ini boleh disesuaikan untuk memenuhi pelbagai keperluan menggunakan fungsi prop Vue.js. Vue.js ialah rangka kerja berkuasa yang menggalakkan pembangun membina aplikasi web dengan cepat dan cekap. Mempelajari dan menggunakan Vue.js ialah salah satu alat yang berkuasa untuk pembangun bahagian hadapan, membantu mereka membangunkan aplikasi web yang cekap dan mudah digunakan dengan lebih pantas.

Atas ialah kandungan terperinci Bagaimana untuk menarik kad dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!