Vue怎么和AJAX和其他的方法结合在一起

Posted 2023-02-21

Vue.js简介 vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。 一、动态参数显示 ajax异步请求后，接收到返回的data参数并显示在前端 1.1 引入js，也加入了jQuery <script type="text/javascript" src="/js/vue.min.js"></script> <script type="text/javascript" src="/js/jquery-2.1.3.js"></script> 1.2 html <div id="app"> <p> message </p> <button v-on:click="showData">显示数据</button> </div> 1.3 JS 注意：这里JS一定要放在$(function() )里面，或者是写到body里面 new Vue( el: '#app', data: message: '' , methods: showData: function () var _self = this; $.ajax( type: 'GET', url: '...', success:function(data) _self.message = JSON.stringify(data); ); ) 二、动态列表显示 开始展示一个空白列表，ajax异步请求后，接收到返回的data列表信息并显示 2.1 引入js，也加入了jquery <script type="text/javascript" src="/js/vue.min.js"></script> <script type="text/javascript" src="/js/jquery-2.1.3.js"></script> 2.2 html <div id="app"> <table> <thead> <tr> <th style='width:3%; text-align: left'>ID</th> <th style='width:5%; text-align: left'>名称</th> <th style='width:10%; text-align: left'>条形码</th> <th style='width:10%; text-align: left'>简称</th> </tr> </thead> <tbody> <tr v-for="goods in goodsList"> <td>goods.id</td> <td>goods.name</td> <td>goods.barcode</td> <td>goods.shortName</td> </tr> </tbody> </table> <button v-on:click="nameSearch()">查询</button><br><br> </div> 2.3 JS var goodsVue = new Vue( el: '#app', data: goodsList : '' , methods: nameSearch: function () var _self = this; $.ajax( type: 'GET', url: '...', success:function(data) _self.goodsList = data; ); ) 以上所述是小编给大家介绍的Vue.js Ajax动态参数与列表显示实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 参考技术A vue中与后台交互可以使用
vue-resource 官网已停止维护
axios 使用Promise API
xe-ajax 使用Promise API，支持 Mock