How does Frontend work with Backend?

Question

Backend

I decided to study Frontend (in particular vue.js) and from the first days I faced one question - how does the frontend interact with the backend?
For example, I received an array of 100 users on the back end and I want to display it as a list. How to pass this array to the frontend?
You can of course do this:

<script>
var json = <?=$json?>
</script>

Or send Ajax to get this json.
But how to do it right?

Answer 1

Components are created, which, in turn, through api and request the necessary data from the server, the received data is already laid out as you please.
Those. having a todo component:

<template>
<ul>
  <li v-for="item in list">
    <h3>{{item.title}}</h3>
    <p>{{item.text}}</p>
  </li>
</ul>
</template>
<script>
export default {
  data(){
    return {
    	list: ''
    }
  },
  computed(){
  
// Запросим данные с сервера и сохраним наш json в data
    fetch('/api/users') // По этому адресу мы получим у сервера данные о пользователях
      .then((response) => {
      	this.list = response // запишем эти данные в data
      })
      .catch(error => console.error(error))
      
  }
}
</script>