vue使用ajax获取后台数据进行显示的示例

实例如下所示： &lt;!DOCTYPE html> &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; [removed][removed] [removed][removed] &lt;style&gt; #th th{ background-color: #50a9fa; color: aliceblue; font-size: large; } &lt;/style&gt; &lt;/head&gt; &lt;body &gt; &lt; Vue.js 是一款流行的前端JavaScript框架，用于构建用户界面。在这个示例中，Vue.js 被用来通过Ajax技术从后台获取数据并将其显示在页面上。Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。 我们需要导入Vue.js 和 vue-resource库。vue-resource是一个插件，提供了与服务器交互的能力，包括GET、POST等HTTP请求方法。在示例中，我们看到`<script>`标签引入了这两个库： ```html <script src="/vue.min.js"></script> <script src="/vue-resource.min.js"></script> ``` 接着，HTML结构定义了一个简单的表格，用于展示从后台获取的数据。`v-for`指令用于遍历数据列表，并将每个条目渲染到表格中。`v-model`则绑定了输入框的值，使它们能与Vue实例的数据进行双向绑定。 ```html <input type="text" v-model="id"> <input type="text" v-model="pname"> <button @click="addData">添加数据</button> <table id="th" border="1" solid width="400px"> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> <tr v-for="item in list"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime}}</td> <td><a href="javascript:void(0)">删除</a></td> </tr> </table> ``` 在`<script>`标签内，我们创建了一个Vue实例，它的`el`属性指定了Vue作用域的DOM元素（#app）。`data`属性定义了一个对象，其中包含初始数据，如空的`list`数组，用于存放从后台获取的数据。 ```javascript new Vue({ el: '#app', data: { list: [] }, created: function() { this.getlist(); }, methods: { getlist: function() { this.$http.get('http://vueapi.ittun.com/api/getprodlist') .then(function(response) { if (response.body.status != 0) { alert(response.body.message); return; } this.list = response.body.message; }); } } }); ``` 在Vue的生命周期钩子`created`中，`getlist`方法被调用，该方法使用`vue-resource`的`$http.get`发送GET请求到指定的API URL获取数据。当请求成功时，响应体中的数据会被赋值给`list`，从而更新视图。 在实际应用中，你可能还需要处理更多的业务逻辑，例如错误处理、数据验证、添加新数据、删除操作等功能。这些都可以通过扩展Vue实例的`methods`来实现。例如，`addData`方法可以用于向服务器发送POST请求，将新的数据添加到数据库中。 总结来说，这个示例展示了如何在Vue.js项目中使用Ajax获取后台数据并实时更新前端视图。Vue的响应式系统使得数据变化时能够自动更新DOM，而vue-resource则简化了与服务器的交互。这样的组合使得开发者能够轻松地构建功能丰富的单页应用程序（SPA）。