vue中的交互（ajax，jsonp）

vue中也存在像ajax和jsonp的数据交互，实现向服务器获取数据，但是他本身框架当中没有这样的方法，需要一个新的小东西叫vue-resouce.js 地址：https://github.com/pagekit/vue-resource/blob/master/README.md

meta charset=UTF-8 titleDocument/title script type=text/javascript src=http://www.3lian.com/edu/2017/06-16/vue.js/script script type=text/javascript src=http://www.3lian.com/edu/2017/06-16/vue-resource.js/script style type=text/css /style/headbodydiv id=app button @click=get()按钮/button/div script type=text/javascript var vm=new Vue({el:'#app',data:{},methods:{get:function(){this.$http.get('a.txt').then(function(res){alert(res.data);},function(res){alert(res.data);});}} }); /script/body

$http 就类似于ajax 他可以this.$http.get this.$http.post还有一种就是jsonp完成跨域取数据

div id=app button @click=get()按钮/button/div script type=text/javascript var vm=new Vue({el:'#app',data:{},methods:{get:function(){this.$http.jsonp('https://sug.so.360.cn/suggest'{word:'b'}).then(function(res){alert(res.data.s);},function(res){alert(res.status);});}} }); /script/body

跨域取数据百度下拉例子:

meta charset=UTF-8 titleDocument/title script type=text/javascript src=http://www.3lian.com/edu/2017/06-16/vue.js/script script type=text/javascript src=http://www.3lian.com/edu/2017/06-16/vue-resource.js/script style type=text/css *{ margin:0; padding: 0;} .bg{width: 200px; line-height:30px;} /style/headbodydiv id=app input type=text v-model=t @keyup=get($event) @keydown.down=changeDown() @keyup.up.prevent=changeUp()/ ulli v-for=val in arr class=bg{{val}}/li /ul p v-show=arr.length==0暂无数据/p/div script type=text/javascript var vm=new Vue({el:'#app',data:{arr:[],t:'',iNow:-1},methods:{get:function(ev){if(ev.keyCode==38||ev.keyCode==40){return;}if(ev.keyCode==13){window.open('https://www.baidu.com/s?wd=' this.t);this.t=''}this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{wd:this.t},{jsonp:'cb'}).then(function(res){this.arr=res.data.s},function(res){alert('失败');});},changeDown:function(){this.iNow ;if(this.iNow==this.arr.length)iNow=-1;this.t=this.arr[this.iNow];},changeUp:function(){this.iNow--;if(this.iNow==-2)this.iNow=this.arr.length-1this.t=this.arr[this.iNow];}} }); /script/body

本文原标题：vue 实例,vue2

版权声明：本文由 言慕思 整理编辑,如果侵权请联系我们！

转载注明出处：http://www.nintaus.net/zhishi/4164.html