當(dāng)我們使用Vue時(shí)，經(jīng)常需要從后端獲取數(shù)據(jù)，并以列表的形式展示在前端頁面中。在這個(gè)過程中，Vue提供了一個(gè)非常方便的方法來實(shí)現(xiàn)這個(gè)功能。下面我們將利用Vue來加載并展示一個(gè)Node.js服務(wù)器中的數(shù)據(jù)。

首先，我們需要在Node.js服務(wù)器上建立一個(gè)API，以便在前端從服務(wù)器獲取數(shù)據(jù)。在我們的例子中，我們將使用Express框架來實(shí)現(xiàn)這個(gè)API。在服務(wù)器端的代碼如下：

const express = require('express');
const app = express();
const data = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' },
{ id: 3, name: 'Bob Smith' }
];
app.get('/api', (req, res) =>{
res.json(data);
});
app.listen(3000, () =>console.log('Server started'));

在上面的代碼中，我們創(chuàng)建了一個(gè)名為'/api'的路由，當(dāng)瀏覽器請求該路由時(shí)，服務(wù)器會把我們在代碼中定義的數(shù)據(jù)以JSON格式返回給前端。接下來，我們需要在Vue中編寫代碼來獲取這個(gè)數(shù)據(jù)。

<template>
<div>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
users: []
};
},
created() {
fetch('/api')
.then(response =>response.json())
.then(data =>(this.users = data));
}
};
</script>

在上述代碼中，我們使用了Vue的data屬性來定義了一個(gè)名為'users'的空數(shù)組。然后在'created'生命周期方法中，我們使用fetch方法來向'/api'路由發(fā)送請求，并在返回?cái)?shù)據(jù)后使用ES6語法將數(shù)據(jù)賦值給我們定義的'users'屬性。最后，我們使用'v-for'指令在模板中迭代每一個(gè)用戶并展現(xiàn)其姓名。

最后，我們需要在Vue的入口文件中將我們編寫的組件掛載到HTML文件中：

import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
render: h =>h(App)
}).$mount('#app');

使用Vue來展示從Node.js服務(wù)器中獲取的數(shù)據(jù)非常簡單。在我們的例子中，我們使用了Express框架來實(shí)現(xiàn)在服務(wù)端創(chuàng)建一個(gè)API。客戶端使用Vue的'fetch'方法來向API發(fā)送請求并獲取數(shù)據(jù)，最后將數(shù)據(jù)通過模板展現(xiàn)在前端頁面中。通過Vue這種方法，我們可以非常方便地實(shí)現(xiàn)前后端數(shù)據(jù)的交互！