梦幻西游伏魔录1.1,德阳市人事考试网,世界时区图
整理文档,搜刮出一个使用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; } }) } } }) //使用jquery jquery(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": "www.baidu.com", "country": "cn" }, { "name": "google", "url": "www.google.com", "country": "usa" }, { "name": "facebook", "url": "www.facebook.com", "country": "usa" }, { "name": "微博", "url": "www.weibo.com", "country": "cn" } ] }
为了模拟请求使用本地的json文件,正式开发可将jquery ajax的url换成接口地址。
文件目录结构见下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论