在vue文件中对数据库进行增删改查，使用$http请求数据

在Vue.js中，对数据库进行增删改查通常会通过HTTP请求库如axios来进行操作，而不是直接使用浏览器内置的`$http`。因为Vue官方已经停止了对`$http`的维护，推荐使用axios。

首先，你需要安装axios插件：

npm install axios

然后，在Vue组件中，可以创建一个新的方法来处理HTTP请求，例如：

import axios from 'axios';

export default {
  data() {
    return {
      // 数据模型
      item: {},
      // 查询结果数组
      items: [],
    };
  },
  methods: {
    fetchData() {
      axios.get('/api/items') // 后端API地址
        .then(response => (this.items = response.data))
        .catch(error => console.error('Error fetching data', error));
    },
    addItem(item) {
      axios.post('/api/items', item)
        .then(response => this.fetchData()) // 更新数据后再次获取
        .catch(error => console.error('Error adding item', error));
    },
    updateItem(id, updatedItem) {
      axios.put(`/api/items/${id}`, updatedItem)
        .then(() => this.fetchData())
        .catch(error => console.error('Error updating item', error));
    },
    deleteItem(id) {
      axios.delete(`/api/items/${id}`)
        .then(() => this.fetchData())
        .catch(error => console.error('Error deleting item', error));
    },
  }
}

在这个例子中，`fetchData`用于获取初始数据，`addItem`、`updateItem`和`deleteItem`分别对应增删改操作。每次操作之后，都调用了`fetchData`以保持视图与数据库状态同步。