Vue1.0学习总结(2)———交互(vue-resoucre的使用)

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>