Vue.js가 $.ajax를 기반으로 데이터를 얻고 이를 구성 요소의 데이터에 바인딩하는 방법에 대한 자세한 설명

이 글은 주로 Vue에 대한 자세한 설명을 소개합니다.js$.ajax를 기반으로 데이터를 얻어 컴포넌트의 데이터에 바인딩하는 것은 매우 실용적입니다. 필요한 친구가 참조할 수 있습니다.

Vue.js는 충돌하지 않습니다. jQuery로? ? ?

실제 애플리케이션에서는 거의 90%의 데이터가 서버에서 나오며 프런트 엔드와 서버 간의 데이터 상호 작용은 일반적으로 Ajax 요청을 통해 완료됩니다.
Ajax 요청에 관해 말하면 가장 먼저 떠오르는 것은 jQuery입니다. jQuery가 프로젝트에 도입되면 많은 작업을 단순화하고 DOM 작업, 백엔드 데이터를 얻는 ajax 메서드 등을 단순화하는 데 도움이 됩니다.

그런데 Vue.js와 jQuery가 충돌하나요? ? ?

대답은 분명히 충돌이 없다는 것입니다! ! !

다음으로 Vue.js 구성 요소에 jQuery의 ajax 메서드를 구현하여 서버 측 데이터를 가져와 구성 요소의 데이터에 바인딩하겠습니다.

Vue.js 단일 파일 구성 요소 만들기

<template>
  <p>
    <p class="id">{{ret}}</p>
    <p class="id">{{data}}</p>
  </p>
</template>
<script>
  export default{
    name:&#39;Test&#39;,
    data(){
      return{
        ret:&#39;&#39;,
        data:&#39;&#39;
      }
    },
    mounted(){
      this.$nextTick(()=>{
        var that=this;
        $.ajax({
          type:"get",
          url:"//wuanlife_api/index.php/Post/get_collect_post",
          data:{user_id:1},
          success:function(data){
            that.ret=data.ret;
            that.data=data.data;
          }
        })
      })
    }
  }
</script>
<style>
  .id{
    font-size: 25px;
    position: relative;
    left:50px;
    right:50px;
  }
</style>

jsonData

코드는 다음과 같습니다.

{"ret":200,"data":{"page_count":1,"current_page":1,"posts":[]},"msg":null}

페이지 효과

ajax가 데이터를 가져온 후 data를 구성 요소객체에 바인딩합니다. 데이터에서 데이터 수집이 완료될 수 있습니다.

이러한 방식으로 페이지는 서버에서 얻은 데이터를 올바르게 사용하여 렌더링할 수 있습니다.

위 내용은 Vue.js가 $.ajax를 기반으로 데이터를 얻고 이를 구성 요소의 데이터에 바인딩하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!