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がデータを取得したら、取得したデータをコンポーネントにバインドしますオブジェクト データ上では、データ取得が完了できます。

このようにして、ページはサーバーから取得したデータを正しく使用してレンダリングできます。

以上がVue.js が $.ajax に基づいてデータを取得し、それをコンポーネントのデータにバインドする方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。