详解使用Vue .射流研究…结合Jquery Ajax加载数据的两种方式

整理文档，搜刮出一个使用Vue .射流研究…结合Jquery Ajax加载数据的两种方式的代码，稍微整理精简一下做下分享。

废话不多说，直接上代码

超文本标记语言代码

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title demo/title script src=' http : js/jquery。js '/script script src=' http : js/vue。js '/script/head body div id=' app ' { message } } br按钮v-: click=' showData '测试jquery加载数据/按钮表边框=' 1 ' tr v-for=' data in data ' TD { { data } } .名称} }/TD TD { {数据} .网址} }/TD TD { {数据} .国家}}/td /tr /table /div脚本src=' http : js/app。js '/脚本/正文/html js代码

/** *由钱于2016/10/31创建。*///定义某视频剪辑软件组件var vum=new Vue({ el: '#app '，data: { message: ' '，data: ' '，}，methods : { show data : function(){ jquery。Ajax({ type : ' Get '，url: '/vue1/json/data.json '，success : function(data){ vum。数据=数据。站点；} }) } }})//使用jQuery jQuery(function(){//jQuery(' BTN _ 1 ')).bind('click ')，function(){//alert(jQuery(' name ')).val())；//});load DATa()；})//jquery加载数据函数LoadDATa(){ jquery。Ajax({ type : ' Get '，url: '/vue1/json/data.json '，success : function(data){ vum。消息=数据。网站[0].名称；} })}json文件

{ '网站' : [ { '名称' : '百度、网址：国家：美国：脸书、网址：国家：美国、姓名3:微博，' Url': 'www.weibo.com '，' Country': 'CN' } ]}为了模拟请求使用本地的json文件，正式开发可将Jquery ajax的全球资源定位器(统一资源定位符)换成接口地址。

文件目录结构见下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。