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


Posted in Javascript onJanuary 10, 2017

整理文档,搜刮出一个使用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加载数据的两种方式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
js模拟实现烟花特效
Mar 10 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
微信小程序中使用vant框架的具体步骤
Feb 18 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 #Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 #Javascript
jQuery验证表单格式的使用方法
Jan 10 #Javascript
Html5 js实现手风琴效果
Apr 17 #Javascript
jquery做个日期选择适用于手机端示例
Jan 10 #Javascript
javascript删除html标签函数cIsHTML
Jan 09 #Javascript
jQuery.parseHTML() 函数详解
Jan 09 #Javascript
You might like
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
小程序实现投票进度条
2019/11/20 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
详解Python中的__new__()方法的使用
2015/04/09 Python
python读取各种文件数据方法解析
2018/12/29 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
工程招投标邀请书
2014/01/26 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
SQL之各种join小结详细讲解
2021/08/04 MySQL
基于angular实现树形二级表格
2021/10/16 Javascript