WordPress simple load more posts using Vue and WP Rest API

Laden Sie weitere Beiträge mit Vue.js und der WP Rest API

Was ist neu?

• Verwendet jetzt Vue 3@latest (CDN)
• Kein Server oder Build-Schritt erforderlich, führen Sie einfach index.html in Ihrem Browser aus!

Wir werden ein minimalistisches, auf Vue-Komponenten basierendes Beispiel durchgehen, das Beiträge mithilfe der WordPress Rest API abruft.

Wäre es nicht cool, so etwas in Ihrem Markup zu verwenden?

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

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

Mit der Möglichkeit, beim Kompilieren jedes gewünschte Markup in HTML auszugeben, um Ihren Styling-Anforderungen gerecht zu werden. Wenn Sie also das nächste Mal die Auslastung Ihrer Websites erhöhen müssen, bleibt Ihr HTML-Markup gleich.

Oder probieren Sie vielleicht etwas wie den folgenden Code für einen anderen Beitragstyp aus.

  <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>