WordPress simple load more posts using Vue and WP Rest API

Vue.js 및 WP Rest API를 사용하여 더 많은 게시물 로드

새로운 소식은 무엇인가요?

• 이제 Vue 3@latest(CDN)를 사용합니다.
• 서버나 빌드 단계가 필요하지 않습니다. 브라우저에서 index.html을 실행하기만 하면 됩니다!

WordPress Rest API를 사용하여 게시물을 가져오는 최소한의 Vue 구성 요소 기반 예제를 살펴보겠습니다.

마크업에 이와 같은 것을 사용하면 멋지지 않을까요?

  <posts>
    <post
      class="post"
      :id="post.id"
      :title="post.title.rendered"
      :permalink="post.link">
    </post>
  </posts>

  <button @click="getPosts(page)">Load Posts</button>

스타일 요구 사항에 맞게 컴파일 시 HTML로 원하는 마크업을 출력할 수 있는 기능이 있습니다. 따라서 다음에 웹 사이트에 대한 로드를 더 많이 만들어야 할 때 HTML 마크업은 동일하게 유지됩니다.

아니면 다른 게시물 유형에 대해 아래 코드와 같은 것을 시도해 보세요.

  <movies>
    <movie
      class="movie"
      :id="movie.id"
      :title="movie.title.rendered"
      :permalink="movie.link"
      :genre="movie.genre"
      :duration="movie.duration
      :rating="movie.rating">
    </movie>
  </movies>