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>

     

  • 相关阅读:
    27. Remove Element
    列表变成字典
    1. Two Sum
    CVPR2019:What and How Well You Performed? A Multitask Learning Approach to Action Quality Assessment
    959. Regions Cut By Slashes
    118. Pascal's Triangle
    loj3117 IOI2017 接线 wiring 题解
    题解 NOI2019 序列
    题解 省选联考2020 组合数问题
    题解 Educational Codeforces Round 90 (Rated for Div. 2) (CF1373)
  • 原文地址:https://www.cnblogs.com/yufann/p/Vue-Node2.html
Copyright © 2011-2022 走看看