详解使用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换成接口地址。 

文件目录结构见下

详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

来源: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
  • asp之家 网络编程 m.aspxhome.com