vue1.0的交互：vue-resoucre的使用
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 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
7 <meta name="apple-mobile-web-app-capable" content="yes">
8 <meta name="apple-mobile-web-app-status-bar-style" content="black">
9 <style>
10 .gray{
11 background: #ccc;
12 }
13 </style>
14 <script src="vue.js"></script>
15 <script src="vue-resource.js"></script>
16 <script>
17 window.onload=function(){
18 new Vue({
19 el:'body',
20 data:{
21 myData:[],
22 t1:'',
23 now:-1
24 },
25 methods:{
26 get:function(ev){
27 if(ev.keyCode==38 || ev.keyCode==40)return;
28
29 if(ev.keyCode==13){
30 window.open('https://www.baidu.com/s?wd='+this.t1);
31 this.t1='';
32 }
33
34 this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
35 wd:this.t1
36 },{
37 jsonp:'cb'
38 }).then(function(res){
39 this.myData=res.data.s;
40 },function(){
41
42 });
43 },
44 changeDown:function(){
45 this.now++;
46 if(this.now==this.myData.length)this.now=-1;
47 this.t1=this.myData[this.now];
48 },
49 changeUp:function(){
50 this.now--;
51 if(this.now==-2)this.now=this.myData.length-1;
52 this.t1=this.myData[this.now];
53 }
54 }
55 });
56 };
57 </script>
58 </head>
59 <body>
60 <div id="box">
61 <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
62 <ul>
63 <li v-for="value in myData" :class="{gray:$index==now}">
64 {{value}}
65 </li>
66 </ul>
67 <p v-show="myData.length==0">暂无数据...</p>
68 </div>
69 </body>
70 </html>