vue与ajax实现动态页面

Vue 是一款流行的 JavaScript 框架，可以用于构建动态页面。而 Ajax 是一种使用 XMLHttpRequest 对象与服务器进行异步通信的技术，可以实现无需刷新页面即可更新部分内容的效果。下面是一个使用 Vue 和 Ajax 实现动态页面的简单示例：

1. 在 HTML 页面中引入 Vue 和 jQuery：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 创建一个 Vue 实例：

<div id="app">
  <h1>{{ message }}</h1>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    items: []
  },
  mounted: function () {
    var self = this;
    $.ajax({
      url: '/api/items',
      success: function (data) {
        self.items = data;
      }
    });
  }
});
</script>

在 Vue 实例的 `data` 属性中定义了一个 `message` 和一个空数组 `items`。在 `mounted` 钩子函数中使用 jQuery 发送一个 GET 请求到 `/api/items` 接口，获取数据并将其赋值给 `items`。

3. 在服务器端创建 `/api/items` 接口：

app.get('/api/items', function (req, res) {
  var items = ['Item 1', 'Item 2', 'Item 3'];
  res.json(items);
});

在 Express 应用中创建一个 GET 请求处理程序，返回一个包含三个字符串的数组。

4. 运行应用并访问页面：

$ node app.js

在浏览器中访问 `http://localhost:3000`，就可以看到一个包含三个项目的无序列表。这个列表是通过 Ajax 从服务器获取的，并使用 Vue 渲染到页面中。

以上就是一个使用 Vue 和 Ajax 实现动态页面的简单示例。实际应用中，可能需要更加复杂的数据交互和页面渲染逻辑。