php - vue がリスト ページをレンダリングする、最初のデータ読み込みの問題

Question

リスト ページがあり、ページのレンダリングに vue の v-for が使用されているとします。
つまり、ページがロードされると、v-for のデータがページのロード時に ajax 経由でリクエストされます。
または、データはバックエンド プログラムによってループアウトされますか?
次のようなもの:

<p id="data">
    <テーブルクラス="テーブルテーブル-ストライプテーブル-ホバー">
        <tr v-for="データ内の Todo">
            <td>{{todo.title}}</td>
            <td>{{todo.learn_name}}</td>
            <td>{{todo.is_exist}}</td>
            <td>{{todo.is_download}}</td>
        </tr>
    </テーブル>
</p>

 var data = new Vue({
        el:'#データ',
        データ：{
            データ:[
                <?php foreach ($data as $value):?>
                {
                    タイトル: '<?php echo $value["title"]?>'
                    learn_name: '<?php echo $value["learn_name"]?>',
                    is_exist: '<?php echo $value["is_exist"]?>',
                    is_download: '<?php echo $value["is_download"]?>'
                }、
                <?php endforeach;?>
            】
        }
    });

Answer 1

ajax経由でデータをリクエストする方が良いです

フロントエンドとバックエンド間の結合が低いほど良い

Answer 2

上記で行ったことには何も問題はありません。

しかし、最初のロードの問題について言及したので、もう少しお話します。

ページはすべて PHP によって直接レンダリングされているようです。そのため、最初のページのデータをキャッシュに直接出力すると、最初の Ajax リクエストが保存され、データが直接レンダリングされ、読み込み速度が向上します。最初の画面

SEO を考慮する必要がある場合は、ページが最初に読み込まれるときに php を使用して HTML 構造を直接出力し、その後のページめくりリクエストには vuejs の v-if 与 v-else ロジックと組み合わせた ajax を使用することも検討できます。

Answer 3

データに初期値を与えて、ajaxがデータを取得した後に置き換えるだけでOKです。

Answer 4

vueがマウントされたら、メソッドを呼び出して非同期にデータを取得します

Answer 5

Vue を使用しているので、バックエンド ループはもう使用しないでください。Vue はデータ駆動型であるため、これらのデータ処理と表示の問題は Vue に任せてください。

Answer 6

バックエンド機能をAPI化し、Vueを使ってフロントエンドを呼び出すことができます。混ぜる必要はありません。

vue するにはいじめが多すぎるため、データを取得できません。

Answer 7

初めてロードするときにデータを取得し、作成したメソッドでアンロードするためにvue-resourceを使用します。
html:

リーリー

js:

リーリー