详解使用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 相关文章推荐
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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
php empty函数 使用说明
2009/08/10 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php中opendir函数用法实例
2014/11/15 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
Python中无限循环需要什么条件
2020/05/27 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
电子专业推荐信范文
2013/11/18 职场文书
房地产财务管理制度
2014/02/02 职场文书
致800米运动员广播稿
2014/02/16 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
党校个人总结
2015/03/04 职场文书
会计简历自我评价
2015/03/10 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers