WordPress simple load more posts using Vue and WP Rest API

قم بتحميل المزيد من المنشورات باستخدام Vue.js وWP Rest API

ما الجديد؟

• يستخدم الآن Vue 3@latest (CDN)
• لا حاجة إلى خادم أو خطوة بناء، ما عليك سوى تشغيل ملف Index.html في متصفحك!

سنستعرض مثالًا مبسطًا يعتمد على مكون Vue والذي سيجلب المنشورات باستخدام WordPress Rest API.

ألن يكون من الرائع استخدام شيء كهذا في ترميزك؟

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