vue数据绑定,vue mixins

  • 编辑: 言慕思
  • 2019-11-13 22:25:03
  • 人阅读
vue axios,VUE(Ajax,Jsonp)VUE之间的交互也有数据交互,如Ajax和Jsonp,以从服务器获取数据,但是在它自己的框架中没有这样的方法,并且需要一种新的叫做VUE-RESOU的小事情。vue typescript.

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

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

转载注明出处:https://www.nintaus.net/houtai@123/makehtml_archives_action.php?endid=0&startid=0&typeid=0&totalnum=11732&startdd=2240&pagesize=20&seltime=0&sstime=1589370344&stime=&etime=&uptype=mkall&mkvalue=0&isremote=0&serviterm=

文章评论

共有 条评论来说两句吧...

用户名:

验证码:

Top