So nutzen Sie die Vue-Ressource, um die Interaktion in VUE abzuschließen

Dieser Artikel stellt hauptsächlich die Verwendung von Vue-Ressourcen zur Vervollständigung der Interaktion in VUE vor. Ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden.

Dieser Artikel stellt die Verwendung von Vue-Ressource zur Vervollständigung der Interaktion in VUE vor und teilt sie mit allen. Die Details sind wie folgt

Verwendung von Vue-Ressource

Einführung in vue-resource

vue-resource ist wie $.ajax in jQuery, das für die Interaktion mit dem Backend verwendet wird Plug-In für Vue. Bevor wir also mit der Verwendung von Vue beginnen, müssen wir die Datei vue-resource.js einführen

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

Grundlegende Syntax

// 基于全局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);

Verwenden Sie nach dem Senden der Anfrage die Methode then, um das Antwortergebnis zu verarbeiten. Der erste Parameter ist die Rückruffunktion, wenn die Antwort erfolgreich ist Der zweite Parameter ist die Rückruffunktion, wenn die Antwort fehlschlägt.

Optionsobjekt

Instanz:

GET-Anfrage

Im folgenden Beispiel: Wir erstellen eine Summationsfunktion, der Effekt ist wie folgt:

get-Methode:

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

In In diesem Beispiel haben wir eine PHP-Datei vorbereitet, die hauptsächlich die von der Rezeption über get übergebenen Parameter empfängt und die Summe der beiden Parameter berechnet. Der Code lautet wie folgt:

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

HTML-Code:

<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>

Erläuterung: Antwort ist der von der zurückgegebene Parameter Hintergrund, der die folgenden Attribute enthält:

POST-Anfrage

<?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

Die Syntax von jsonp ist ähnlich wie bei get und post, aber die übergebenen Daten sind unterschiedlich. Als nächstes verwenden wir JSONP, um eine Baidu-Suchfunktion abzuschließen.

1. Bereiten Sie zunächst eine Instanzschnittstelle vor, bei der es sich um die Suchschnittstelle von Baidu handelt (einige Schnittstellen können wir selbst zum Testen finden), wie folgt:

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

2. Layout vorbereiten

3. Funktionsbeschreibung

Wenn wir den Suchinhalt in das Suchfeld eingeben, werden in der Liste unten die Wörter angezeigt, die mit dem von uns eingegebenen Inhalt verknüpft sind. Drücken Sie die Auf- und Ab-Tasten der Tastatur, um Wörter in der Liste nach oben und unten auszuwählen. Wenn Sie die Eingabetaste drücken, wird eine Suche durchgeführt

4. Code-Implementierung

Zuerst bereiten wir eine vor myData-Array zum Speichern der zugehörigen Wörter. t1 ist der im Eingabefeld eingegebene Wert wie folgt:

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

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

bei der Eingabe von Inhalten in die Suche Box: Führen Sie eine Methode aus, die hauptsächlich zum Senden einer Anfrage zum Abrufen der zugehörigen Wörter des Eingabeinhalts verwendet wird.

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

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

An dieser Stelle können die zugehörigen Wörter, nach denen wir gesucht haben, in der Liste angezeigt werden unten gezeigt:

Wir können Folgendes erreichen: Wenn Sie die Auf- und Ab-Tasten drücken, wählen Sie das Wort

     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)
          }
          )
　　　　　　　　　　}
        }

    <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>

Vollständiger Code:

/*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];
        }

Das Obige ist der gesamte Inhalt dieses Artikels, I Ich hoffe, es wird allen beim Lernen nützlich sein. Bitte achten Sie auf die chinesische PHP-Website für weitere verwandte Inhalte!

Verwandte Empfehlungen:

Einführung in die Funktion zum Zuschneiden von Bildern und Hochladen auf den Server mit Vue

Methode von Vue der Implementierung einer bidirektionalen Bindung

Das obige ist der detaillierte Inhalt vonSo nutzen Sie die Vue-Ressource, um die Interaktion in VUE abzuschließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!