Vue.js 是一個(gè)漸進(jìn)式的 JavaScript 框架，它通過(guò)數(shù)據(jù)雙向綁定和組件化的思想，讓構(gòu)建 Web 前端應(yīng)用變得更加簡(jiǎn)單高效。Vue.js 的另一個(gè)優(yōu)勢(shì)就是它與其他后端語(yǔ)言和數(shù)據(jù)庫(kù)的兼容性極強(qiáng)，為了更好地實(shí)現(xiàn)前后端的數(shù)據(jù)交互，我們需要使用 Vue.js 提供的接口功能。

在 Vue.js 中使用接口功能的方法非常簡(jiǎn)單，先看一下代碼：

axios.get('/api/userInfo')
.then((response) =>{
console.log(response);
})
.catch((error) =>{
console.log(error);
});

上述代碼使用了 axios 庫(kù)中提供的 get 方法，向后端發(fā)送 GET 請(qǐng)求，獲取 /api/userInfo 接口的數(shù)據(jù)。接著，我們使用 Promise 的 then 和 catch 方法，分別處理請(qǐng)求成功和失敗的情況。在請(qǐng)求成功時(shí)，我們打印出后端返回的數(shù)據(jù)；在請(qǐng)求失敗時(shí)，我們打印出錯(cuò)誤信息。這部分代碼是獲取接口數(shù)據(jù)的關(guān)鍵部分。

另外，我們也可以使用 post 方法向后端發(fā)送 POST 請(qǐng)求，發(fā)送數(shù)據(jù)并獲取返回的數(shù)據(jù)，代碼如下：

axios.post('/api/userInfo', {
username: 'admin',
password: '123456'
})
.then((response) =>{
console.log(response);
})
.catch((error) =>{
console.log(error);
});

在這個(gè)例子中，我們向后端發(fā)送了一個(gè)帶有兩個(gè)屬性的對(duì)象，分別為 username 和 password。我們可以在后端處理這兩個(gè)屬性的值，并返回一些數(shù)據(jù)。我們使用的仍然是 axios 庫(kù)中的 post 方法，獲取后端返回的數(shù)據(jù)，處理請(qǐng)求成功和失敗的情況。

使用 Vue.js 提供的接口功能，我們可以更加方便地與后端交互，并獲取、發(fā)送數(shù)據(jù)，讓 Web 應(yīng)用更加強(qiáng)大和高效。