vue は axios を使用してデータ対話を完了します

この記事では、axios を使用してデータ対話を完了するための Vue を主に紹介します。この記事では、サンプル コードを通じてデータ対話方法とインストール方法を説明します。同時にブラウザーとnode.jsでも使用されます

現在、Vue用に公式に推奨されているネットワーク通信ライブラリはvue-resourceではなくなり、axiosを使用することが推奨されます。そこで調べて以下のようにまとめてみました。

1. 機能

1. ブラウザーで XMLHttpRequests リクエストを送信する3. Promise API をサポートする4. リクエストと応答データを変換する

6. JSON データを自動的に変換します

7. クライアントは XSRF 攻撃からの保護をサポートします



2. Axios のインストール方法 (公式には 3 つの方法があります)

$ npm install axios<span style="color: #ff0000"><strong>2. Bower のインストール</strong></span><code>$ bower install axios

3. cdn を直接使用します

$ npm install axios

2、bower安装

$ bower install axios

3、直接使用cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

三、安装步骤

这里我使用npm的方法步骤：

①首先在npm中输入npm install axios

import axios from ‘axios' 
Vue.prototype.$http = axios

以下に手順を示します。 use npm:

①まずnpmにnpm install axiosと入力します

②main.js

<template>
 <p class="tabbar">
  <p>首页</p>
  <button v-on:click = &#39;goback&#39;>获取数据</button>
  <p class="new_wrap" v-for="items in item">
   <p class="newcard">
    <p>
      <p>{{items.issuer_nickname}}.</p>
    </p>
    <p>
      {{items.title}}
    </p>
    <p class="pic">
      <img :src="items.cover">
    </p> 
   </p>
   <br>
   </p>
 </p>
</template>
<script>
export default {
 name: &#39;tabbar&#39;,
 data () {
  return {
   msg: &#39;Welcome to Your Vue.js App&#39;,
   item: []
  }
 },
 methods:{
  goback:function(){
   console.log(&#39;hah&#39;);
   this.$http.get(&#39;url&#39;) //把url地址换成你的接口地址即可
    .then(res => {
     //this.request.response = res.data
     this.item = res.data.data.item; //把取item的数据赋给 item: []中
     console.log(res.data.data.item);
     if (res.data.code == &#39;0&#39;) {
      console.log(&#39;haha&#39;);
     }else{
      alert(&#39;数据不存在&#39;);
     }
    })
    .catch(err => {
     alert(&#39;请求失败&#39;);
    })
  }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
*{margin: 0;padding: 0;}
@function torem($px){//$px为需要转换的字号
  @return $px / 100px * 1rem; //100px为根字体大小
}
ul{
 width: 100%;
 position: absolute;
 bottom: 0;
 li{
  width: torem(187.5px);
  float:left;
  height: torem(98px);
  text-align:center;
  background: #ccc;
  }
}
img{
   width: torem(200px);
   height: torem(200px);
  }
</style>

に設定を追加します

リクエストの例

クリックデータを取得して必要なデータを取得します

rrreee

レンダリング:

上記は私があなたのためにまとめたものです。将来役立つことを願っています。関連する記事：intinginite階層および樹木構造データの追加、削除、修正

以上がvue は axios を使用してデータ対話を完了しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。