如何在Vue.JS中加载(创建)页面时重新加载从服务器获取的数据

在Vue.js中加载页面时重新加载从服务器获取的数据，可以通过以下步骤实现：

在Vue组件的created或mounted生命周期钩子函数中，发起异步请求从服务器获取数据。可以使用Vue的内置方法如axios、fetch或Vue Resource等发送HTTP请求。
在异步请求的回调函数中，将服务器返回的数据保存到Vue组件的数据属性中，以便在模板中使用。可以使用Vue的响应式数据特性，将数据绑定到组件的data属性中。
在模板中，使用Vue的数据绑定语法将服务器返回的数据展示在页面上。可以使用v-for指令遍历数据列表，v-bind指令绑定数据到HTML元素属性，v-text指令绑定数据到文本内容等。
当需要重新加载数据时，可以通过调用方法或触发事件来重新发起异步请求。可以在Vue组件中定义一个方法，用于重新加载数据，并在需要重新加载数据的时候调用该方法。

以下是一个示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="reloadData">重新加载数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 发起异步请求获取数据
      // 假设服务器返回的数据格式为数组，每个元素包含id和name属性
      // 可以使用axios、fetch或Vue Resource等发送HTTP请求
      // 示例使用axios发送GET请求
      axios.get('/api/data')
        .then(response => {
          this.items = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    reloadData() {
      this.loadData();
    }
  }
};
</script>

在上述示例中，created生命周期钩子函数中调用loadData方法来加载数据。loadData方法使用axios发送GET请求获取数据，并将返回的数据保存到组件的items属性中。模板中使用v-for指令遍历items数组，并使用v-bind指令将item.name绑定到li元素的文本内容。点击"重新加载数据"按钮时，调用reloadData方法重新加载数据。

推荐的腾讯云相关产品和产品介绍链接地址：