请写出利用vue框架实现对后端数据的增删查改的代码

好的，以下是一个简单的利用Vue框架实现对后端数据的增删查改的示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="person in people" :key="person.id">
          <td>{{ person.id }}</td>
          <td><input v-model="person.name"></td>
          <td><input v-model.number="person.age"></td>
          <td>
            <button @click="updatePerson(person)">Update</button>
            <button @click="deletePerson(person)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
    <form @submit.prevent="addPerson">
      <input v-model="newPerson.name">
      <input v-model.number="newPerson.age">
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      people: [],
      newPerson: {
        name: '',
        age: ''
      }
    }
  },
  created() {
    this.fetchPeople()
  },
  methods: {
    fetchPeople() {
      axios.get('/api/people').then(response => {
        this.people = response.data
      })
    },
    addPerson() {
      axios.post('/api/people', this.newPerson).then(response => {
        this.fetchPeople()
        this.newPerson.name = ''
        this.newPerson.age = ''
      })
    },
    updatePerson(person) {
      axios.put(`/api/people/${person.id}`, person).then(response => {
        this.fetchPeople()
      })
    },
    deletePerson(person) {
      axios.delete(`/api/people/${person.id}`).then(response => {
        this.fetchPeople()
      })
    }
  }
}
</script>

上面的代码实现了一个简单的人员信息管理系统，可以通过表格展示已有的人员信息，并提供添加、修改和删除人员信息的功能。其中，人员信息保存在后端的API接口中，使用axios库向后端发送请求获取、添加、修改和删除数据。HTML页面中使用了Vue指令将数据绑定到页面上，并使用Vue事件监听器响应用户的操作。