详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
作者：o黑色乌鸦o 时间：2023-07-02 17:07:39
整理文档，搜刮出一个使用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换成接口地址。
文件目录结构见下
来源：https://my.oschina.net/senit/blog/778723
标签：vue,jquery,ajax
0
投稿猜你喜欢
MySQL select count(*)计数很慢优化方案
2024-01-23 21:31:24
php删除二维数组中的重复值方法
2024-06-05 09:51:20
为你的ASP程序作一个负载测试
2008-10-23 13:48:00
SQL Server数据库日志清除的两个方法
2009-01-08 13:44:00
PhpStorm配置debug环境的详细过程
2023-05-26 20:04:32
perl哈希hash的常见用法介绍
2023-08-12 18:46:59
JavaScript开发时的五个小提示
2007-11-21 19:54:00
python 监测内存和cpu的使用率实例
2022-07-03 23:49:49
Python字符串逐字符或逐词反转方法
2022-12-24 21:14:45
Python 多进程、多线程效率对比
2022-01-23 00:54:24
Python基于QQ邮箱实现SSL发送
2021-07-29 10:35:30
Sql Server安装出错,安装程序配置服务器失败的解决方法小结
2024-01-22 19:10:19
Python实现XML文件解析的示例代码
2022-02-24 11:03:43
深入讲解Python函数中参数的使用及默认参数的陷阱
2022-04-21 20:09:14
Python一行代码实现生成和读取二维码
2023-04-30 15:31:18
SQL Server可写脚本和编程扩展SSIS包
2009-01-20 16:29:00
python opencv肤色检测的实现示例
2023-06-13 20:31:58
OpenCV模板匹配matchTemplate的实现
2021-08-09 15:51:51
Python中的装饰器使用
2023-05-25 13:14:09
一篇文章带你深入了解Mysql触发器
2024-01-14 15:42:35