Comment utiliser la ressource Vue pour terminer l'interaction dans VUE

Cet article présente principalement l'utilisation de Vue-resource pour compléter l'interaction dans VUE. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Cet article présente l'utilisation de Vue-resource pour compléter l'interaction dans VUE et le partage avec tout le monde. Les détails sont les suivants

Utilisation de vue-resource.

Présentation de vue-resource

vue-resource est comme $.ajax dans jQuery, qui est utilisé pour interagir avec le backend est une vue-resource. plug-in pour vue, donc avant de commencer à utiliser vue, nous devons introduire le fichier vue-resource.js

<script src=&#39;js/vue.js&#39;></script>
<script src=&#39;js/vue-resource.js&#39;></script>

Syntaxe de base

// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);


// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

Après avoir envoyé la requête, utilisez la méthode then pour traiter le résultat de la réponse. La méthode then a deux paramètres. Le premier paramètre est la fonction de rappel lors de la réponse. est réussi, et le deuxième paramètre est le moment où la réponse échoue.

Objet options

Instance :

Requête GET

Dans l'exemple ci-dessous, on fait une fonction somme, l'effet est le suivant :

méthode get :

this.$http.get('/someUrl', [options]).then(function(response){
  // 响应成功回调
}, function(response){
  // 响应错误回调
});

Dans cet exemple, nous avons préparé un fichier php, qui reçoit principalement les paramètres transmis par la réception via get, et calcule la somme des deux paramètres. Le code est le suivant :

<🎜. >

<?php
  $a=$_GET[&#39;a&#39;];
  $b=$_GET[&#39;b&#39;];
  echo $a+$b;
?>

Code HTML :

<p class="container" id="box" style="margin-top:100px">
  <input type="text" name="" id="" v-model="a" />+
  <input type="text" name="" id="" v-model="b" />
  =
  <input type="button" value="求和" class="btn btn-info" @click="add()"/>
</p>

<script type="text/javascript">
  new Vue({
    el:"#box",
    data:{
      a:"",
      b:""
    },
    methods:{
      add:function(){
        this.$http.get("get.php",{
          "a":this.a,
          "b":this.b
        }).then(function(response){
          alert(response.data)
        },function(response){
          alert(response.status)
        }
        )
      }
    }
  })
</script>

Description : réponse est le paramètre renvoyé par l'arrière-plan, qui comprend les attributs suivants :

Requête POST

<?php
  $a=$_POST[&#39;a&#39;];
  $b=$_POST[&#39;b&#39;];
  echo $a+$b;
?>

new Vue({
  el:"#box",
  data:{
    a:"",
    b:""
  },
  methods:{
    add:function(){
      this.$http.post("post.php",{
        "a":this.a,
        "b":this.b
      },{
        emulateJSON:true //POST请求需要将emulateJSON设置为true
      }).then(function(response){
        alert(response.data)
      },function(response){
        alert(response.status)
      }
      )
    }
  }
})

JSONP

La syntaxe de jsonp est similaire à get et post, mais les données transmises sont différentes. Ensuite, nous utilisons jsonp pour compléter une fonction de recherche Baidu.

1. Préparez d’abord une interface d’instance, qui est l’interface de recherche de Baidu (nous pouvons trouver nous-mêmes certaines interfaces pour les tests), comme suit :

https://sp0.baidu.com /5a1Fazu8AA54nxGko9WTAnF6hhy /su?wd=a&cb=show

2. Préparer la mise en page

<p class="container" id="box" style="margin-top:100px">
  <input type="text" placeholder="请输入搜索内容" />
  <ul>
    <li >22222</li>
  </ul>
  <p >暂无数据...</p>
</p>

3. Description de la fonction

Lorsque nous saisissons le contenu de la recherche dans le champ de recherche, la liste ci-dessous affichera les mots associés au contenu que nous avons saisi. Appuyez sur les touches haut et bas du clavier pour sélectionner des mots dans la liste de haut en bas. Lorsque vous appuyez sur la touche Entrée, une recherche sera effectuée

4. Implémentation du code

Nous préparons d'abord un. Tableau myData pour stocker les mots associés. t1 est la valeur saisie dans la zone de saisie, comme suit

<input type="text" placeholder="请输入搜索内容" v-model="t1" />

data:{
  myData:[],
  t1:""
}

dans le champ de recherche Lors de la saisie du contenu, exécutez une méthode Cette méthode est principalement utilisée pour envoyer une requête pour obtenir les mots associés au contenu saisi.

<input type="text" placeholder="请输入搜索内容" v-model="t1" @keyup="search()"/>

methods:{
   search:function(ev){this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
       "wd":this.t1
     },{
       jsonp:"cb" //callback名字，默认是callback
     }).then(function(response){
       this.myData=response.data.s
     },function(response){
       alert(response.status)
     }
     )
　　　　　}
   }

À ce stade, la liste que nous avons recherchée a été affichée. mots, comme indiqué ci-dessous :

Nous pouvons obtenir ce qui suit : en appuyant sur les touches haut et bas, sélectionnez le mot

.

<p class="container" id="box" style="margin-top:100px">
  <input type="text" v-model="t1" @keyup="search($event)" @keydown.down.prevent="changeDown($event)" @keydown.up.prevent="changeup()"/>
  <ul>
    <li v-for="(value, index) in myData" :class="{gray:index==now}">{{value}}</li>
  </ul>
  <p v-show="myData.length==0">暂无数据...</p>
</p>

/*data数据*/
      data:{
        myData:[],
        t1:"",
        now:-1
      }
/*上下键的方法*/
        changeDown:function(){
            this.now++;
            if(this.now==this.myData.length){
              this.now=-1;
            }
            this.t1=this.myData[this.now];
        },
        changeup:function(){
            this.now--;
            if(this.now==-2){
              this.now=this.myData.length-1;
            }
            this.t1=this.myData[this.now];
        }

Code complet :

  <meta charset="UTF-8">
  <title>初识vue</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <style type="text/css">
    .gray{
      background-color: gray;
    }
  </style>


  <p class="container" id="box" style="margin-top:100px">
    <input type="text" v-model="t1" @keyup="search($event)" @keydown.down.prevent="changeDown($event)" @keydown.up.prevent="changeup()"/>
    <ul>
      <li v-for="(value, index) in myData" :class="{gray:index==now}">{{value}}</li>
    </ul>
    <p v-show="myData.length==0">暂无数据...</p>
  </p>

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  //
  new Vue({
    el:"#box",
    data:{
      myData:[],
      t1:"",
      now:-1
    },
    methods:{
      search:function(ev){
      if(ev.keyCode==38 || ev.keyCode==40)return;
      if(ev.keyCode==13){
        window.open('https://www.baidu.com/s?wd='+this.t1);
        this.t1='';
      }
        this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
          "wd":this.t1
        },{
          jsonp:"cb" //callback名字，默认是callback
        }).then(function(response){
          this.myData=response.data.s
        },function(response){
          alert(response.status)
        }
        )
      },
      changeDown:function(){
          this.now++;
          if(this.now==this.myData.length){
            this.now=-1;
          }
          this.t1=this.myData[this.now];
      },
      changeup:function(){
          this.now--;
          if(this.now==-2){
            this.now=this.myData.length-1;
          }
          this.t1=this.myData[this.now];
      }
    }
  })
</script>

Ce qui précède est le contenu de cet article. Tout le contenu, j'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction à la fonction de recadrage des images et de leur téléchargement sur le serveur avec vue

Méthode de Vue de mettre en œuvre une liaison bidirectionnelle

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!