Vue2.X 通过AJAX动态更新数据

当使用 Vue2.X 开发Web应用时，会经常需要通过AJAX动态获取数据并更新页面。以下是一个完整攻略，演示如何在 Vue2.X 中通过AJAX动态更新数据。

1. 安装 axios

在 Vue2.X 中，可以使用 axios 库来进行 AJAX 请求。在使用之前需要先进行安装。可以通过以下命令来进行安装：

$ npm install axios --save

2. 创建 Vue 组件

接下来，在 Vue 组件中引用 axios 库，并创建一个函数，用来发起 AJAX 请求。这个函数可以定义在 methods 属性中。

示例一：使用 axios 发起 GET 请求

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      title: '',
      items: []
    }
  },
  created() {
    // 发起 GET 请求
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('http://example.com/api/items')
        .then(response => {
          this.title = response.data.title;
          this.items = response.data.items;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}
</script>

示例二：使用 axios 发起 POST 请求

<template>
  <div>
    <h1>{{ title }}</h1>
    <form @submit.prevent="submitForm">
      <div>
        <label for="name">Name:</label>
        <input type="text" id="name" v-model="newItem.name" />
      </div>
      <div>
        <label for="description">Description:</label>
        <textarea id="description" v-model="newItem.description"></textarea>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      title: '',
      newItem: {
        name: '',
        description: ''
      }
    }
  },
  created() {
    // 发起 GET 请求
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('http://example.com/api/items')
        .then(response => {
          this.title = response.data.title;
        })
        .catch(error => {
          console.log(error);
        });
    },
    submitForm() {
      axios.post('http://example.com/api/items', this.newItem)
        .then(response => {
          this.newItem = {
            name: '',
            description: ''
          };
          this.fetchData();
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}
</script>

3. 使用组件

在 Vue 应用中使用所创建的组件，如下所示：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    'my-component': MyComponent
  }
}
</script>

以上就是在 Vue2.X 中通过 AJAX 动态更新数据的完整攻略，希望可以对您有所帮助。