JSFiddle - React, Tailwind, and code Playground

by cyberowl

HTML

<div id="app">
  URL:
  <input type="text" v-model.trim="url" v-on:keyup.enter="xhr">
  <button v-on:click="xhr">XHR</button>
  <br>

  <div v-for="post in data" :key="post.id">
    <h3>{{ post.title }}:{{ post.id }}</h3>
    <li>{{ post.body }}</li>
  </div>

</div>

JavaScript

var app = new Vue({
   // Привязываем область работы приложения к элементу
   el: '#app',
   // Глобальный список переменных, при их изменении обязательно что-то происходит.
   data: {
     url: "https://jsonplaceholder.typicode.com/posts",
     data: []
   },
   methods: {
     xhr: function() {
       this.data = "Loading...";
       // Используем современный стандарт для отправки HTTP запроса
       fetch(this.url)
         // После того, как клиент (браузер) получит ответ от сервера, выполнится следующая конструкция
         .then(response => response.json())
         // Получаем JSON объект с запроса и записываем его в глобальную переменную
         .then(json => this.data = json)

       // Далее отрисовка происходит в соответсвтии с шаблоном в HTML коде

       /* Структура единичной сущности выглядит так: 
       
       {
           "userId": 1,
           "id": 1,
           "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
           "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
       }
       
       */

       // К данным обращаются по ключам, т.е. ты записал ответ в переменную data, 
       // что бы получить тайтл первого поста в списке, тебе достаточно написать data[0].title
       // т.е. HTML шаблон выше -- просто перебирает объект при каждом изменении массива data
     }
   },
   mounted: function() {
     // При загрузке страницы вызываем функцию xhr из объекта methods
     this.xhr();
   }
 })