VueにおけるAxios非同期通信の詳細な説明

1. まず、インタラクティブに使用するための .json ファイルを作成します。json データ形式をリストし、それをフロントエンドに渡すことをシミュレートして、友人が理解できるようにします。

{
  "name": "塩漬け魚_ひっくり返す",
  "URL": "https://blog.csdn.net/aaa123_456aaa",
  「ページ」: 1,
  "住所"： {
    "street": "湘橋区",
    "city": "潮州市",
    「国」：「中国」
  },
  「リンク」: [
    {
      "name": "塩漬け魚_ひっくり返し 1",
      「URL」: 「https://blog.csdn.net/aaa123_456aaa」
    },
    {
      "name": "塩漬け魚_ひっくり返し 2",
      「URL」: 「https://blog.csdn.net/aaa123_456aaa」
    },
    {
      "name": "塩漬け魚_ひっくり返し 3",
      「URL」: 「https://blog.csdn.net/aaa123_456aaa」
    }
  ]
}

環境を必ず確認してください。ここでは ES6 をサポートすることを選択する必要があります。

ここに画像の説明を挿入

2. 次に、.html ファイルを作成し、Axios 非同期通信を使用してデータ通信を実現します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<本文>
<div id="vue">
    <div>
        {{info.name}}
        {{info.address}}
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = 新しい Vue({
        el: "#vue",
        // 注意: * データはグローバルであり、大規模なプロジェクトではデータが汚染されやすい* データを関数にカプセル化します。コンポーネントをインスタンス化するときは、データ汚染を避けるために、この関数によって生成されたデータのコピーを呼び出すだけです。説明としてここでは書きません。
        データ（）{
            戻る {
                // リクエストの戻りパラメータの形式は、より標準的な json 文字列と同じである必要があります。もちろん、直接空にすることもできます。
                情報：
                    名前: null、
                    住所：{
                        住所: null,
                        都市: null、
                        国: なし
                    },
                }
            }
        },
        mount(){//フック関数、つまりプログラムの実行時に、プログラムの途中に挿入して実行することができます //チェーンプログラミングでは、ES6サポートバージョンを使用することを忘れないでください axios.get('../data.json').then(response=>(this.info=response.data))
        }
    });
</スクリプト>
</本文>
</html>

実行結果:

ここに画像の説明を挿入

3. もちろん、上記は比較的標準的な書き方なので、省略してみましょう。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<本文>
<div id="vue">
    <div>
        {{info.name}}
        {{info.address}}
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = 新しい Vue({
        el: "#vue",
        // 注意: ここには data:{} がありますが、その中に元のパラメータ info が含まれている必要があり、axios によって取得されたデータは info にバインドされます // data は属性であり、属性値はオブジェクトまたは関数にすることができます。関数は基本的にオブジェクトです。Vue はデータ属性のタイプを判断し、異なる処理方法を採用します data: {
            情報：{}
            },
        マウントされた(){
            axios.get('../data.json').then(レスポンス=>(this.info=response.data))
        }
    });
</スクリプト>
</本文>
</html>

実行結果:

ここに画像の説明を挿入

4. 値をバインドするために v-bind が使用されるため、URL とのやり取りに注意する必要があります。

<div id="vue" v-clock>
    <div>
        {{info.name}}
        {{info.address}}
        <a v-bind:href="info.url">クリックして私のブログにアクセスしてください</a>
    </div>
</div>

クリックしてジャンプしてください。興味のある友達はフォローできます！

ここに画像の説明を挿入

5. ヒント

友人の中にはネットワークの調子が悪い人もいるかもしれません。その場合、ページの読み込みプロセス中にテンプレートが最初に読み込まれることがわかります。これは Vue のライフサイクルに関連しています。

ここに画像の説明を挿入

見た目が醜いと感じる方もいるかもしれませんので、最初にテンプレートを表示するのではなく、その瞬間に白くする解決策を以下に示します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル>
        /*<!--v-clock: ちらつきの問題を解決する-->*/
        [v-クロック]
            表示: なし;
        }
    </スタイル>
</head>
<本文>
<!--v-clock をカスタマイズする-->
<div id="vue" v-clock>
    <div>
        {{info.name}}
        {{info.address}}
    </div>
</div>