집 >웹 프론트엔드 >JS 튜토리얼 >Vue 리소스를 사용하여 VUE에서 상호 작용을 완료하는 방법

Vue 리소스를 사용하여 VUE에서 상호 작용을 완료하는 방법

不言원래의: 2018-06-29 15:01:333230검색

이 글은 주로 VUE에서 상호 작용을 완료하기 위해 Vue-resource를 사용하는 방법을 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

이 글에서는 VUE에서 상호작용을 완료하기 위해 Vue-resource를 사용하는 방법을 소개하고 이를 모든 사람과 공유합니다. Ajax는 백엔드와 데이터를 상호작용하는 데 사용되는 $와 같습니다. vue-resource는 vue용 플러그인이므로 vue를 사용하기 전에 vue-resource.js

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

파일을 소개해야 합니다. 기본 구문

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


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

요청을 보낸 후 then 메소드를 사용하여 응답 결과를 처리합니다. then 메소드에는 첫 번째 매개변수가 응답 성공 시의 콜백 함수이고 두 번째 매개변수입니다. 응답이 실패할 때의 콜백 함수입니다.

options object

Instance:

GET request

다음 예에서는 합계 함수를 만들며 그 효과는 다음과 같습니다.

get 메서드:

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

이 예제에서는 주로 프론트 데스크에서 get을 통해 전달된 매개변수를 수신하고 두 매개변수의 합을 계산하는 PHP 파일을 준비했습니다.

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

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>

설명: response는 다음 속성을 포함하는 백그라운드에서 반환되는 매개변수입니다.

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

JSONP

jsonp 구문은 get 및 post와 유사하지만 전달되는 데이터가 다릅니다. 다음으로 jsonp를 사용하여 Baidu 검색 기능을 완성합니다.

1. 먼저 다음과 같이 Baidu의 검색 인터페이스인 인스턴스 인터페이스를 준비합니다(테스트용 인터페이스를 직접 찾을 수 있음).

2. 레이아웃 준비

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

3. 기능 설명

검색창에 검색 내용을 입력하면 입력한 단어를 기준으로 다음 목록이 표시됩니다. 키보드의 위쪽 및 아래쪽 키를 눌러 목록에서 위쪽 및 아래쪽 단어를 선택합니다. Enter 키를 누르면 검색이 수행됩니다

4. 코드 구현

먼저 관련 단어를 저장할 myData 배열을 준비합니다. t1 은 입력창에 입력된 값으로 다음과 같습니다

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

검색창에 내용을 입력할 때, 연관어를 얻기 위한 요청을 보내는 메소드가 주로 사용됩니다. 입력 내용에 대해.

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

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

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

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 관련 내용은 PHP 중국어 웹사이트를 주목해주세요!

Vue 리소스를 사용하여 VUE에서 상호 작용을 완료하는 방법

관련 기사