html+vue想实现打开钩子函数自动从后台获取数据

在Vue中，我们可以使用生命周期钩子函数来在组件被创建、挂载或更新时执行一些操作，如从后台获取数据。常用的钩子函数有created、mounted、updated等。下面是一个简单的示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      // 发送请求获取数据
      axios.get('/api/items')
        .then(response => {
          this.items = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}
</script>

在这个例子中，我们定义了一个名为items的数据属性，用于存储从后台获取的数据。然后，在组件被挂载时，我们使用mounted钩子函数来调用getData方法，该方法会发送一个GET请求到后台获取数据，并将数据存储到items中。最后，我们在模板中使用v-for指令将items中的数据渲染到页面上。

需要注意的是，这里使用了axios库来发送请求。在使用前需要先安装，并在代码中引入。此外，为了避免跨域问题，我们需要在后台设置CORS（跨域资源共享）规则，以允许前台访问后台数据。