Создание плагина WordPress с помощью Vue

И вы также должны увидеть скрипт var vm = new Vue({
el: document.querySelector('#mount'),
template: "<h1>My Latest Posts Widget</h1>",
mounted: function(){
console.log("Hello Vue!");
}
});


Теперь давайте изменим плагин для отображения предыдущей строки виджета «Мои последние сообщения» , но на этот раз из Vue. В вашем экземпляре Vue добавьте свойство шаблона с любым HTML-кодом, который вы хотите отобразить:

 data

Теперь давайте извлекать и отображать последние сообщения с помощью API извлечения.

В экземпляре Vue добавьте свойство var vm = new Vue({
el: document.querySelector('#mount'),
data: {
posts: []
},


  var url = '/wp-json/wp/v2/posts?filter[orderby]=date';
 fetch(url).then((response)=>{
    return response.json()
  }).then((data)=>{
    this.posts = data;
  })

Далее, давайте включим код для извлечения последних сообщений в смонтированном событии жизненного цикла, которое запускается при монтировании компонента в DOM:

 fetch()

Мы вызываем метод JavaScript posts После успешного разрешения Promise мы присваиваем данные массиву template: `<div><h1>My Latest Posts</h1>
<div>
<p v-for="post in posts">
<a v-bind:href="post.link">{{post.title.rendered}}</span></a>
</p>
</div>
</div>`,


Наконец, добавьте свойство шаблона :

 v-for

Мы используем директиву Vue title.renderedlinksetInterval()

Это скриншот результата для меня.

В вашем случае это может выглядеть по-разному в зависимости от вашей активной темы и сообщений, которые вы размещаете на своем сайте WordPress.

Если вы нажмете на заголовок сообщения, вы попадете на страницу сообщения.

Мы можем добавить больше функций в наш виджет, например, выборку данных в режиме реального времени, чтобы пользователю не нужно было перезагружать страницу для получения последних опубликованных сообщений. Мы можем добиться этого, постоянно опрашивая конечную точку WP-API с помощью метода JavaScript var vm = new Vue({
/*...*/

fetchPosts: function(){
var url = '/wp-json/wp/v2/posts?filter[orderby]=date';
fetch(url).then((response)=>{
return response.json()
}).then((data)=>{
this.posts = data;
console.log(this.posts);
});
}
},


Во-первых, переместите код, который выбирает сообщения в своем собственном методе:

 methods

Мы используем свойство this После этого вы можете получить доступ к этим методам непосредственно в экземпляре.

Затем в функции mounted()

  var vm = new Vue({
  /*...*/
 mounted: function() {
   console.log("Component is mounted");

   this.fetchPosts();
   setInterval(function () {
    this.fetchPosts();
   }.bind(this), 5000);
 }

Вы можете проверить это, открыв интерфейс администратора WordPress на вкладке другого браузера и добавив новый пост. Вы должны увидеть обновленный виджет Vue с новым сообщением, не обновляя страницу вручную.

Вывод

В этом уроке мы увидели, как создать плагин WordPress, который использует библиотеку Vue.js. Мы создали шорткод, который можно использовать для отображения компонента Vue в ваших сообщениях и страницах, который выбирает и отображает последние сообщения каждые пять секунд. Это было достигнуто с помощью опроса WordPress REST API с помощью метода setInterval()