Tutorial pengenalan pembangunan VUE3: menggunakan komponen Vue.js untuk merangkum komponen berfungsi yang kompleks

Vue.js ialah rangka kerja JavaScript popular yang boleh digunakan untuk membina aplikasi satu halaman, antara muka web responsif dan aplikasi bahagian hadapan yang kompleks. Versi terbaharu Vue.js, Vue3, membawakan banyak ciri baharu dan peningkatan prestasi, menjadikan Vue.js rangka kerja hadapan yang lebih baik.

Artikel ini akan memperkenalkan cara menggunakan komponen Vue.js untuk merangkum komponen berfungsi yang kompleks Mari kita gunakan contoh praktikal untuk menggambarkan.

Andaikan kita sedang membangunkan tapak web e-dagang dan kita perlu membangunkan sistem semakan produk. Sistem ulasan ini sepatutnya mempunyai fungsi berikut:

1. Tunjukkan ulasan
2. Siarkan ulasan
3. Padam ulasan

Untuk merangkum fungsi kompleks ini, kami akan mencipta komponen ulasan. Berikut ialah langkah untuk melaksanakan komponen ini:

Langkah 1: Buat komponen ulasan

Kami akan mencipta komponen dalam Vue.js dan menggunakan arahan v-for untuk memaparkan semua ulasan. Kodnya adalah seperti berikut:

<template>
  <div>
    <h2 id="评论">评论</h2>
    <ul>
      <li v-for="(comment, index) in comments" :key="index">
        {{ comment }}
        <button @click="deleteComment(index)">删除</button>
      </li>
    </ul>
    <form @submit.prevent="addComment">
      <input type="text" v-model="newComment" placeholder="请输入评论内容">
      <button type="submit">提交</button>
    </form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      comments: [
        '这是一条评论',
        '这是另一条评论'
      ],
      newComment: ''
    }
  },
  methods: {
    addComment() {
      this.comments.push(this.newComment);
      this.newComment = '';
    },
    deleteComment(index) {
      this.comments.splice(index, 1);
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan tatasusunan ulasan, yang menyimpan semua ulasan. Kami juga mentakrifkan pembolehubah Komen baharu, yang mewakili ulasan baharu yang kami tambahkan. Dalam kaedah addComment, kami menambah ulasan baharu pada tatasusunan ulasan. Dalam kaedah deleteComment, kami menggunakan fungsi splice untuk memadam komen daripada tatasusunan ulasan.

Langkah 2: Gunakan komponen semakan dalam aplikasi utama

Kami boleh menggunakan komponen ini dalam aplikasi, seperti menambahkannya pada halaman butiran produk. Seperti yang ditunjukkan di bawah:

<template>
  <div>
    <h1 id="商品名称">商品名称</h1>
    <p>商品描述</p>
    <img src="/static/imghwm/default1.png"  data-src="商品图片url"  class="lazy" alt="商品图片">
 
    <Comment></Comment>
  </div>
</template>
 
<script>
import Comment from './Comment.vue'
 
export default {
  components: {
    Comment
  }
}
</script>

Dalam kod di atas, kami telah menambahkan komponen Komen sebagai komponen anak pada aplikasi utama.

Kini kami telah menyelesaikan pembangunan komponen ulasan. Dengan merangkum fungsi kompleks ini, kami boleh mencipta dan menggunakan semula komponen Vue.js dengan cepat. Ia akan menjadi sangat mudah untuk menambah gaya tersuai pada komponen, meningkatkan interaktiviti dan menambah fungsi lain.

Dalam tutorial Vue3 hari ini, kami mempelajari cara menggunakan komponen Vue.js untuk merangkum komponen berfungsi yang kompleks. Pendekatan komponen Vue.js, bersama-sama dengan rantai alat popular seperti Vue CLI, telah menjadikan Vue.js sebagai rangka kerja bahagian hadapan yang diterima pakai secara meluas. Kami berharap artikel ini telah memberi inspirasi kepada pembangun yang sedang atau sedang bersiap untuk mempelajari Vue.js dan memberikan mereka panduan berguna untuk membangunkan aplikasi yang lebih baik.

Atas ialah kandungan terperinci Tutorial pengenalan pembangunan VUE3: menggunakan komponen Vue.js untuk merangkum komponen berfungsi yang kompleks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!