zoukankan      html  css  js  c++  java
  • 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>

     

  • 相关阅读:
    Java安全之JNDI注入
    Visual Studio 2019 升级16.8之后(升级.Net 5),RazorTagHelper任务意外失败
    .Net Core 3.1升级 .Net 5后出现代码错误 rzc generate exited with code 1.
    重走py 之路 ——普通操作与函数(三)
    重走py 之路 ——字典和集合(二)
    设计模式结(完结篇)
    重走py 之路 ——列表(一)
    RestfulApi 学习笔记——分页和排序(五)
    RestfulApi 学习笔记——查询与过滤还有搜索(五)
    Android开发 Error:The number of method references in a .dex file cannot exceed 64K.Android开发 Error:The number of method references in a .dex file cannot exceed 64K
  • 原文地址:https://www.cnblogs.com/yufann/p/Vue-Node2.html
Copyright © 2011-2022 走看看