vue-axios的使用以及axios請求賦值為空的問題
更新時間：2025年04月18日 11:19:50 作者：大廠夢
這篇文章主要介紹了vue-axios的使用以及axios請求賦值為空的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue-axios的使用及axios請求賦值為空問題
注意：
如果沒有使用腳手架
需要命令導(dǎo)入axios
npm install axios
注意：
如果沒有axios智能代碼提示
vscode 引入插件 axios Snippets
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="userList">
<ul>
<li v-for="(item, index) in users" >
編號：{{item.id}} 姓名:{{item.name}} 號碼：{{item.number}}
</li>
</ul>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
new Vue({
el:'#userList',
data: {
users:[]
},
//mounted 鉤子函數(shù)，可在vue初始化之前加載
mounted() {
this.getUserList();
},
methods: {
getUserList(){
//axios 請求
axios.get('http://127.0.0.1:8081/userList', {
// params:{
// ID:123451
// }
})
//為什么請求要在這里處理呢？翻看我前面的文章ES6新特
.then(res => {
console.log(res.data)
this.users=res.data
})
.catch(err => {
console.error(err);
})
}
},
})
</script>
</html>注意：
.then 如果使用箭頭函數(shù)
我們可以通過this.users 把獲取到的值 賦予進(jìn)去，否則只能如下：
let vm = new vue({})
vm.users = res.data
只能這樣哈~
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue唯一可以更改vuex實例中state數(shù)據(jù)狀態(tài)的屬性對象Mutation的講解
今天小編就為大家分享一篇關(guān)于Vue唯一可以更改vuex實例中state數(shù)據(jù)狀態(tài)的屬性對象，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
vite+vue3中require?is?not?defined問題及解決
這篇文章主要介紹了vite+vue3中require?is?not?defined問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
今天小編就為大家分享一篇vue router 傳參獲取不到的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了解決vue scoped scss 無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細(xì)介紹了vue微信分享出來的鏈接點開是首頁問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
本文通過實例代碼給大家介紹了vue中的無限循環(huán)，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
這篇文章主要為大家介紹了Vue qiankun微前端實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了Vue實現(xiàn)驗證碼登錄全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
vue的template模板是如何轉(zhuǎn)為render函數(shù)的過程
Vue從template到render函數(shù)的轉(zhuǎn)換經(jīng)歷模板解析、AST構(gòu)建、優(yōu)化、生成渲染函數(shù)等步驟,首先進(jìn)行詞法分析將模板拆解為tokens,再進(jìn)行語法分析構(gòu)建AST,然后對AST進(jìn)行靜態(tài)標(biāo)記和提升優(yōu)化,最后轉(zhuǎn)換成JavaScript渲染函數(shù),生成虛擬DOM,完成組件的渲染和更新,實現(xiàn)了模板的高效轉(zhuǎn)化2024-10-10
這篇文章主要介紹了最后說說Vue2 SSR 的 Cookies 問題,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05