时间:2021-05-25
整理文档,搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码,稍微整理精简一下做下分享。
废话不多说,直接上代码
html代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"></script> <script src="js/vue.js"></script></head><body> <div id="app"> {{message }}<br> <button v-on:click="showData">测试jquery加载数据</button> <table border="1"> <tr v-for="data in datas"> <td>{{data.Name}}</td> <td>{{data.Url}}</td> <td>{{data.Country}}</td> </tr> </table> </div> <script src="js/app.js"></script></body></html>js代码
/** * Created by sen on 2016/10/31. *///定义Vue组件var vum=new Vue({ el: "#app", data: { message: "", datas: "", }, methods:{ showData:function () { jQuery.ajax({ type: 'Get', url: "/vue1/json/data.json", success: function (data) { vum.datas = data.sites; } }) } }})//使用jqueryjQuery(function () { // jQuery("#btn_1").bind("click", function () { // alert(jQuery("#name").val()); // }); loadData();})//jquery加载数据function loadData() { jQuery.ajax({ type: 'Get', url: "/vue1/json/data.json", success: function (data) { vum.message = data.sites[0].Name; } })}json文件
{ "sites": [ { "Name": "百度", "Url": "", "Country": "CN" } ]}为了模拟请求使用本地的json文件,正式开发可将Jquery ajax的url换成接口地址。
文件目录结构见下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
如果您闲的没事干去两个Vue.js开发人员:“在Vue应用中使用AJAX的正确姿势是咋样的?”,您将会得到三种或更多的不同回答。Vue.js官方没有提供实现AJ
vue是一种轻巧便捷的框架,那么如何进行对于数据加载的刷新呢?以下就是我对于vue.js数据加载的一点想法源码:
刚接触vue.js框架的时候,很伤脑筋。今天整理一下post/get两种方式,简单的调取数据库数据,并进行渲染,希望帮助大家!首先,在HTML页面引入://引入
最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐。 当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数
1.通过axios实现数据请求vue.js默认没有提供ajax功能的。所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互。注