详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017-01-10 09:23
1406 查看
整理文档,搜刮出一个使用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 中使用 AJAX获取数据的方法
- 详解vue与后端数据交互(ajax):vue-resource
- vue2 前后端分离项目ajax跨域session问题解决方法
- Vue-resource实现ajax请求和跨域请求示例
- Vue form 表单提交+ajax异步请求+分页效果
- vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
- vue使用Axios做ajax请求详解
- Vue.js Ajax动态参数与列表显示实现方法
- 使用vue框架 Ajax获取数据列表并用BootStrap显示出来
- Vue.js展示AJAX数据简单示例讲解
- 详解Vue.js基于$.ajax获取数据并与组件的data绑定
- vue.js 表格分页ajax 异步加载数据
- Javascript vue.js表格分页,ajax异步加载数据
- 浅谈Vue.js应用的四种AJAX请求数据模式
- VUE 更好的 ajax 上传处理 axios.js实现代码
- Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
- Vue Ajax跨域请求实例详解
- vue发送ajax请求详解
相关文章推荐
- 使用Vue.Js结合Jquery Ajax加载数据的两种方式
- 详解Vue中使用Echarts的两种方式
- Vue.js学习之使用Webpack加速应用的方式详解
- 基于vue中css预加载使用sass的配置方式详解
- eval解析JSON中的注意点 在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数。 2. 使用Function对象来进行返回解析。 使用eval
- vue在使用ECharts时的异步更新和数据加载详解
- 详解通过JSON数据使用VUE.JS
- jquery ajax提交表单数据的两种方式
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 网站分析数据收集方式详解:Web日志JS标记和包嗅探器
- jquery ajax提交表单数据的两种方式
- 异步请求数据和Js分页控件结合使用心得
- three.js使用三:加载有纹理的模型,结合blender和convert_obj_three.py
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- jsData 使用教程(-) 加载数据
- 使用web.xml方式加载 Spring时,获取Spring context的两种方式:
- 使用Hibernate生成数据表的两种方式
- Extjs formpanel加载数据的两种方式
- JS 动态加载js文件和css 文件 同步/异步 两种方式