Vue and Axios achieve seamless connection between pages and data

Vue and Axios realize the seamless connection of pages and data

With the continuous development of Internet technology, the development model of separation of front and back ends has become mainstream. In front-end development, the Vue framework is widely used to build dynamic and interactive single-page applications. Axios is a Promise-based HTTP library commonly used in front-end development for network requests.

In actual development, we often need to obtain data from the backend and display it on the frontend. At this time, the combination of Vue and Axios can achieve seamless connection between pages and data.

Below I will use a simple example to demonstrate how to use Vue and Axios to achieve seamless connection between pages and data.

First, we need to use Vue CLI to initialize a Vue project. Enter the following command in the command line:

vue create vue-axios-demo

Then follow the command line prompts to select the project name and configuration, and wait for the project initialization to complete.

Next, find the src directory in the root directory of the project and create a folder named components in that directory. In the components folder, create a file named UserList.vue. This file will be used to display the user list.

In UserList.vue, we can use Vue's template syntax to define how the user list is displayed. The following is a simple example:

<template>
  <div>
    <h1 id="User-List">User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    // 在页面加载完成后，调用获取用户列表的函数
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      // 使用Axios发送HTTP请求获取用户列表数据
      axios
        .get("/api/users")
        .then((response) => {
          this.users = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

In the above code, we first define a title of the user list and a ul tag to display the user list. By using the v-for directive, we loop through the user array in the li tag and display the name of each user.

In the mounted life cycle hook function, we call the fetchUsers function, which uses Axios to send an HTTP request to obtain the user list data. When the request is successful, we assign the obtained data to the users array and then render it in the template.

Next, in App.vue in the root directory, we need to import and register the UserList component as a global component. Modify the App.vue file as follows:

<template>
  <div id="app">
    <UserList />
  </div>
</template>

<script>
import UserList from "./components/UserList.vue";

export default {
  components: {
    UserList,
  },
};
</script>

In the above code, we first imported the UserList.vue component, and then placed it in Register in components option.

Now, we have completed the seamless connection between the page and the data. When we run the project, we will see the title of a user list on the page, and the user's name will be dynamically displayed based on the data returned by the backend.

It should be noted that since we use axios to send HTTP requests in the example, we need to install the axios library on the command line first. Run the following command in the root directory of the project:

npm install axios

The above is a simple example of using Vue and Axios to achieve seamless connection between pages and data. Through the above code examples and related introductions, I hope it can help you better understand the combination and use of Vue and Axios, so that you can perform front-end development more efficiently.

The above is the detailed content of Vue and Axios achieve seamless connection between pages and data. For more information, please follow other related articles on the PHP Chinese website!