Amalan komponen Vue: senaraikan pembangunan komponen

Amalan komponen Vue: pembangunan komponen senarai

Pengenalan:
Komponen senarai ialah komponen biasa dalam pembangunan bahagian hadapan. Ia digunakan secara meluas dalam senario seperti memaparkan data dan data pengendalian. Artikel ini akan memperkenalkan cara membangunkan komponen senarai Vue yang berfungsi sepenuhnya dan mudah digunakan melalui contoh kod sebenar.

1. Analisis Keperluan
Sebelum memulakan pembangunan, kita perlu menjelaskan dengan jelas fungsi dan keperluan komponen. Katakan kita perlu melaksanakan komponen senarai pengurusan tugas yang mudah dengan fungsi berikut:

1. Paparkan senarai tugas, termasuk nama tugas, perihalan, status dan medan lain.
2. Menyokong tugasan pengisihan dan penapisan.
3. Sokongan menambah, mengubah suai dan memadam tugas.
4. Menyokong penomboran senarai tugas.

2. Tetapan projek
Pertama, kita perlu mencipta projek Vue dan memasang kebergantungan yang diperlukan.

Lakukan arahan berikut dalam baris arahan:

vue create todo-list

Kemudian, pasangkan axios dan dependensi elemen-ui:

cd todo-list
npm install axios
npm install element-ui

3. 🎜🎜 #

1. Buat komponen senarai tugas TodoList.vue dan daftarkan komponen dalam main.js:

   rreee

#🎜 data tugasan :

2. <template>
     <div>
    <el-table :data="taskList" border>
      <el-table-column prop="name" label="任务名称"></el-table-column>
      <el-table-column prop="description" label="任务描述"></el-table-column>
      <el-table-column prop="status" label="任务状态"></el-table-column>
    </el-table>
     </div>
   </template>
   
   <script>
   export default {
     name: "TodoList",
     data() {
    return {
      taskList: [], // 任务列表数据
    };
     },
   };
   </script>

Ubah suai data tugas:

3. <template>
     ...
     <el-button type="primary" @click="addTask">新增任务</el-button>
   </template>
   
   <script>
   export default {
     ...
     methods: {
    addTask() {
      // 弹出对话框，输入任务信息
      // 调用接口保存数据
      // 刷新任务列表
    },
     },
   };
   </script>

Padam data tugasan semula🎜#Padamkan data semula tugasan: #🎜 🎜#

4. Fungsi halaman:

   <template>
     ...
     <el-table-column width="200px" label="操作">
    <template slot-scope="scope">
      <el-button type="text" @click="editTask(scope.row)">编辑</el-button>
    </template>
     </el-table-column>
   </template>
   
   <script>
   export default {
     ...
     methods: {
    editTask(row) {
      // 弹出对话框，显示任务信息
      // 调用接口更新数据
      // 刷新任务列表
    },
     },
   };
   </script>

5. 4 Permintaan antara muka dan pengikatan data

   Gunakan antara muka axios. data senarai Tugas komponen dan ikat data pada Senarai tugas komponen.

<template>
  ...
  <el-table-column width="200px" label="操作">
 <template slot-scope="scope">
   <el-button type="text" @click="deleteTask(scope.row)">删除</el-button>
 </template>
  </el-table-column>
</template>

<script>
export default {
  ...
  methods: {
 deleteTask(row) {
   // 弹出确认框，确认删除任务
   // 调用接口删除数据
   // 刷新任务列表
 },
  },
};
</script>

5. Ringkasan

Melalui contoh di atas, kami telah menyelesaikan pembangunan komponen senarai pengurusan tugas asas. Dalam amalan, kita boleh mengembangkan dan mengoptimumkannya lagi mengikut keperluan khusus.


Contoh yang diperkenalkan dalam artikel ini hanyalah contoh pembangunan komponen senarai Vue Butiran dan keperluan semasa proses pembangunan sebenar mungkin berbeza. Saya berharap pembaca dapat memahami idea dan kaedah pembangunan komponen Vue melalui contoh ini, supaya mereka boleh menggunakannya secara bebas dalam projek sebenar.


Di atas ialah kandungan praktikal komponen Vue: senarai pembangunan komponen. Harap ini membantu!

Atas ialah kandungan terperinci Amalan komponen Vue: senaraikan pembangunan komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!