Real-time updating and display of front-end data using Vue and Axios-Vue.js-php.cn

Real-time updating and display of front-end data using Vue and Axios

王林

Release： 2023-07-17 16:13:56

Original

2862 people have browsed it

Use Vue and Axios to realize real-time update and display of front-end data

With the rapid development of network technology, the front-end interaction method is no longer limited to traditional page jumps, but pays more attention to real-time and user experience. Vue and Axios, as very popular frameworks and libraries in front-end development today, can help us achieve real-time updating and display of data. This article will introduce how to use Vue and Axios to implement this function, and provide corresponding code examples.

1. Install Vue and Axios

Before we begin, we need to install Vue and Axios first. Open the terminal, enter the project directory, and execute the following command:

npm install vue

Copy after login

npm install axios

Copy after login

After the installation is completed, we can introduce Vue and Axios into the project for subsequent use.

2. Create a Vue instance

In the HTML file, we first need to introduce the CDN links of Vue and Axios, and add an element identifying Vue in the tag, for example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

Copy after login

Then, create a Vue instance in the JavaScript file and use Axios to send an asynchronous request to get the data. After the data is successfully obtained, the data is saved in the data attribute of the Vue instance and used for display. For example:

var app = new Vue({
    el: '#app',
    data: {
        data: null
    },
    mounted: function () {
        axios.get('/api/data')  // 发送异步请求获取数据
            .then(function (response) {
                this.data = response.data;  // 将获取到的数据保存在data属性中
            }.bind(this))
            .catch(function (error) {
                console.log(error);
            });
    }
});

Copy after login

In the above code, mounted is one of the life cycle functions of the Vue instance, which will be automatically executed after the Vue instance is mounted on the page. In the mounted function, we use Axios to send an HTTP GET request, and the request address is /api/data. After the request is successful, Axios will return a Promise object containing the response data. We use the then method to get the response data and save it in the data attribute of the Vue instance. It should be noted that due to the function scope problem of JavaScript, we need to use the bind function to bind this to the Vue instance to ensure that the data attribute can be accessed correctly.

Finally, we need to start a backend service to handle the request and return the corresponding data. Since the specific implementation of back-end services involves different technology stacks, we will not go into details here. Readers can choose the appropriate solution according to their own needs.

3. Real-time update and display of data

Using Vue and Axios to obtain data and display it on the page is only the first step. Next, we need to implement real-time update and display of data. In Vue, we can use computed properties and listeners to achieve this functionality.

Define a calculated property in the Vue instance to return real-time updated data. For example:

var app = new Vue({
    el: '#app',
    data: {
        data: null
    },
    computed: {
        realTimeData: function () {
            return this.data;  // 假设data属性的数据每秒都在实时更新
        }
    },
    mounted: function () {
        // ...
    }
});

Copy after login

In this example, we assume that the data of the data attribute is updated in real time every second, and the realTimeData calculated attribute will dynamically calculate and return the latest data.

Next, we can use this calculated attribute in the HTML template to display real-time updated data. For example:

<div id="app">
    <p>{{ realTimeData }}</p>
</div>

Copy after login

In this way, when the data of the data attribute changes, the realTimeData calculated attribute will be automatically updated and displayed on the page in real time.

In addition to calculating attributes, we can also implement real-time monitoring and updating of data through listeners. For example:

var app = new Vue({
    el: '#app',
    data: {
        data: null
    },
    watch: {
        data: function () {
            // 数据发生变化时的相关逻辑
        }
    },
    mounted: function () {
        // ...
    }
});

Copy after login

In this example, when the data in the data attribute changes, the data function in the watch object will be automatically called, thereby achieving real-time monitoring and updating of data.

4. Summary

This article introduces how to use Vue and Axios to achieve real-time update and display of front-end data. By sending asynchronous requests through the life cycle function of the Vue instance and Axios, we can obtain the back-end data and update it to the page in real time. Through computed properties and listeners, we can easily monitor and display data in real time. I hope this article can be helpful to everyone, and you are welcome to learn and explore in depth by reading relevant documents.

The above is the detailed content of Real-time updating and display of front-end data using Vue and Axios. For more information, please follow other related articles on the PHP Chinese website!