php - vue 렌더링 목록 페이지, 첫 번째 데이터 로딩 문제

Question

목록 페이지가 있고 vue의 v-for가 페이지를 렌더링하는 데 사용된다고 가정합니다.
그렇다면 페이지가 로드될 때 v-for의 데이터는 페이지가 로드될 때 ajax를 통해 요청됩니다. 아니면 백엔드 프로그램에 의해 데이터가 루프아웃됩니까?
이런 것:

<p id="data">
    <table class="table table-striped table-hover">
        <tr v-for="todo in datas">
            <td>{{todo.title}}</td>
            <td>{{todo.learn_name}}</td>
            <td>{{todo.is_exist}}</td>
            <td>{{todo.is_download}}</td>
        </tr>
    </테이블>

 var 데이터 = 새로운 Vue({
        엘:'#데이터',
        데이터:{
            데이터:[
                <?php foreach($data를 $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를 고려해야 하는 경우 페이지가 처음 로드될 때 html 구조를 직접 출력하기 위해 php를 사용하고 후속 페이지 전환 요청에 vuejs의 v-if 与 v-else 로직과 결합된 ajax를 사용할 수도 있습니다.

Answer 3

무엇이든 괜찮습니다. 데이터에 초기 값을 제공하고 ajax가 데이터를 얻은 후 이를 바꾸십시오.

Answer 4

vue가 마운트되면 메서드를 호출하여 비동기적으로 데이터를 얻습니다

Answer 5

이제 Vue를 사용하고 있으므로 더 이상 백엔드 루프를 사용하지 마세요. Vue는 데이터 기반이므로 이러한 데이터 처리 및 표시 문제는 Vue에 맡기세요

Answer 6

백엔드 기능을 API로 만들어 Vue를 이용하여 프런트엔드를 호출할 수 있습니다. 섞을 필요가 없습니다.

당신은 너무 깡패여서 볼 수 없으며 데이터를 얻을 수 없습니다.

Answer 7

답변 감사합니다. 처음 로드할 때 데이터를 가져오고 생성된 메소드에서 언로드하는 데 vue-resource를 사용합니다.
html:

으아아아

js:

으아아아