vue3 开发一个增删改查页面

当在 Vue 3 中开发增删改查（CRUD）页面时，你可以遵循以下步骤：

1. 设置项目环境：确保你已经安装了 Vue 3，并创建了一个新的 Vue 3 项目。

2. 创建一个组件：使用 `vue create` 命令创建一个新的组件。

vue create crud-app

3. 创建一个用于显示数据的列表组件：在 `components` 文件夹中创建一个名为 `ItemList.vue` 的组件。这个组件将用于显示数据列表。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
        <button @click="deleteItem(item.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
  methods: {
    deleteItem(itemId) {
      // 在这里触发删除操作
      this.$emit('delete-item', itemId);
    },
  },
};
</script>

4. 在父组件中使用列表组件：在父组件中引入和使用 `ItemList` 组件。

<template>
  <div>
    <h1>Item List</h1>
    <item-list :items="items" @delete-item="deleteItem"></item-list>
    <form @submit.prevent="addItem">
      <input v-model="newItemName" type="text" placeholder="Enter item name" />
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
import ItemList from './components/ItemList.vue';

export default {
  components: {
    ItemList,
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
      newItemName: '',
    };
  },
  methods: {
    addItem() {
      const newItem = {
        id: this.items.length + 1,
        name: this.newItemName,
      };
      this.items.push(newItem);
      this.newItemName = '';
    },
    deleteItem(itemId) {
      // 在这里触发删除操作
      this.items = this.items.filter((item) => item.id !== itemId);
    },
  },
};
</script>

在这个例子中，我们在父组件中使用 `ItemList` 组件来显示数据列表，并通过 `props` 将数据传递给子组件。父组件处理了添加和删除项目的逻辑。

这只是一个简单的示例，你可以根据你的需求进行调整和扩展。你可以使用其他表单元素和方法来实现更新和编辑功能。同时，你还可以将数据存储在后端服务器，通过 API 请求进行 CRUD 操作。

希望这个示例可以帮助你入门 Vue 3 的增删改查页面开发！