Vue1.0学习总结———交互(vue-resoucre的使用)
Posted 夏至未至
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue1.0学习总结———交互(vue-resoucre的使用)相关的知识，希望对你有一定的参考价值。
vue1.0的交互：
angular：$http (ajax对象)
vue想做交互：必须引入另一个库vue-resoucre(vue本身不支持交互)
方法：在没有使用vue-cli的时候要放在服务区环境下，如放入php的环境中
格式：
this.$http.get(‘/someUrl‘, [data], [options]).then(successCallback, errorCallback);
this.$http.post(‘/someUrl‘, [data], [options]).then(successCallback, errorCallback);
this.$http.get方式:
1）获取一个普通的文本数据：
methods:{
get:function(){
this.$http.get(‘shuju.txt‘).then(function(res){
console.log(res.data);
},function(res){
console.log(res.data);
});
}
}
2）给服务器发送数据(平时用的是最多的)
get.php中的代码:
<?php
$a=$_GET[‘a‘];
$b=$_GET[‘b‘];
echo $a+$b;
?>
Vue实例中的代码：
get:function(){
this.$http.get(‘data/get.php‘,{
a:1,
b:20
}).then(function(res){
console.log(res.data);
},function(res){
console.log(res.data);
});
}
this.$http.post方式:(推荐使用post方法)
post.php中的代码:
<?php
$a=$_POST[‘a‘];
$b=$_POST[‘b‘];
echo $a+$b;
?>
Vue实例中的代码：
methods:{
get:function(){
this.$http.post(‘data/post.php‘,{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
console.log(res.data);
},function(res){
console.log(res.data);
});
}
}
3) jsonp的方式:
获取接口1：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
get:function(){
this.$http.jsonp(‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su‘,{
wd:‘a‘
},{
jsonp:‘cb‘ //callback的名字,默认名字为callback
}).then(function(res){
console.log(res.data.s);
},function(res){
console.log(res.data);
});
}
获取接口2：https://sug.so.360.cn/suggest?callback=suggest_so&word=a
get:function(){
this.$http.jsonp(‘https://sug.so.360.cn/suggest‘,{
wd:‘a‘
}).then(function(res){
alert(res.data.s)
console.log(res.data.s);
},function(res){
console.log(res.data);
});
}
回车接口：https://www.baidu.com/s?wd=
回车打开：window.open(‘https://www.baidu.com/s?wd=‘+this.t1);
jsonp接口应用示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/bootstrap.min.css"> 7 </head> 8 <body> 9 <div class="container" style="margin-top: 80px;"> 10 <div class="form-group searchdown"> 11 <label for="downlists">下拉框：</label> 12 <input type="text" id="" class="form-control" v-model="t1" @keyup="get($event)" @keydown.down="changedown()" @keydown.up.prevent="changeup()"> 13 <ul class="list-group"> 14 <li v-for="value in myData" :class="{grey:$index==now}" class="list-group-item"> 15 {{value}} 16 </li> 17 </ul> 18 <p v-show="myData.length==0">暂无数据........</p> 19 </div> 20 </div> 21 22 <script type="text/javascript" src="js/jquery.min.js"></script> 23 <script type="text/javascript" src="js/bootstrap.min.js"></script> 24 <script type="text/javascript" src="js/vue-resource.js"></script> 25 <script type="text/javascript"> 26 window.onload=function(){ 27 new Vue({ 28 el:‘body‘, 29 data:{ 30 myData:[], 31 t1:‘‘, 32 now:-1, 33 success:[], 34 lost:[], 35 }, 36 methods:{ 37 get:function(ev){ 38 if (ev.keyCode==38 || ev.keyCode==40) { 39 return;//return不继续执行下面的函数 40 } 41 if (ev.keyCode==13) { 42 window.open(‘https://www.baidu.com/s?wd=‘+this.t1); 43 this.t1=‘‘; 44 } 45 this.$http.jsonp(‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su‘,{ 46 wd:this.t1 47 },{ 48 jsonp:‘cb‘ 49 }).then(function(res){ 50 this.myData=res.data.s; 51 },function(){ 52 console.log(res.data); 53 }); 54 }, 55 changedown:function(){ 56 this.now++; 57 if (this.now==this.myData.length) { 58 this.now=-1; 59 } 60 this.t1=this.myData[this.now]; 61 }, 62 changeup:function(){ 63 this.now--; 64 if (this.now==-2) { 65 this.now=this.myData.length-1; 66 } 67 this.t1=this.myData[this.now]; 68 } 69 } 70 }); 71 }; 72 </script> 73 </body> 74 </html>
以上是关于Vue1.0学习总结———交互(vue-resoucre的使用)的主要内容，如果未能解决你的问题，请参考以下文章