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 で出力する機能を備えています。そのため、次回 Web サイトの負荷を増やす必要がある場合でも、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>