vue 绑定ajax 示例代码

Vue.js提供了一种简洁的方式来绑定Ajax请求，通过使用Vue的`v-model`指令和`axios`库，我们可以轻松地实现数据的双向绑定和异步请求。

我们需要在Vue实例中定义一个数据属性，用于存储从服务器获取的数据。然后，我们可以使用`v-model`指令将这个数据属性绑定到一个表单元素上，以实现双向绑定。

接下来，我们需要在Vue实例的`methods`选项中定义一个方法，用于发送Ajax请求并更新数据属性。在这个方法中，我们可以使用`axios`库来发送异步请求，并在请求成功后更新数据属性。

下面是一个示例代码，演示了如何使用Vue绑定Ajax：

<template>
  <div>
    <input v-model="searchText" type="text" placeholder="请输入搜索关键字" />
    <button @click="search">搜索</button>
    <ul>
      <li v-for="item in searchResults" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      searchText: '',
      searchResults: [],
    };
  },
  methods: {
    search() {
      axios.get('/api/search', { params: { keyword: this.searchText } })
        .then(response => {
          this.searchResults = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>

在上面的代码中，我们首先定义了一个输入框和一个按钮，用户可以在输入框中输入搜索关键字，并点击按钮进行搜索。然后，我们使用`v-model`指令将输入框的值与Vue实例中的`searchText`数据属性进行双向绑定。

当用户点击搜索按钮时，`search`方法会被调用。在这个方法中，我们使用`axios`库发送一个GET请求到`/api/search`接口，并将搜索关键字作为查询参数传递给服务器。当请求成功后，服务器会返回一个包含搜索结果的JSON对象，我们可以通过`response.data`来获取这些结果，并将其赋值给`searchResults`数据属性。我们使用`v-for`指令将搜索结果渲染到一个无序列表中。

通过这样的方式，我们可以实现一个简单的搜索功能，用户可以实时看到搜索结果，并且可以随时更新搜索关键字。由于使用了Vue的双向绑定和异步请求，我们可以保持页面的响应性和数据的同步性。