vue-axios的使用以及axios請求賦值為空的問題
更新時間：2025年04月18日 11:19:50 作者：大廠夢
這篇文章主要介紹了vue-axios的使用以及axios請求賦值為空的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue-axios的使用及axios請求賦值為空問題
注意：
如果沒有使用腳手架
需要命令導入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 鉤子函數，可在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 如果使用箭頭函數
我們可以通過this.users 把獲取到的值 賦予進去，否則只能如下：
let vm = new vue({})
vm.users = res.data
只能這樣哈~
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
如何在Vue中使localStorage具有響應式(思想實驗)
這篇文章主要介紹了如何在Vue中使localStorage具有響應式,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了淺談vue.watch的觸發(fā)條件是什么？具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue-JSON-Viewer 是一個用于在Vue項目中展示JSON數據的組件,它解決了在項目開發(fā)中面臨的展示JSON數據的需求,下面就跟隨小編一起來了解下它的具體使用吧2025-03-03
本篇文章主要介紹了Vue 單文件中的數據傳遞示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了Vue.js slot插槽的作用域插槽用法詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
在網上搜索了Vuejs2.0 動態(tài)級聯select許久未果，決定自己總結一下自己的經驗，有關select在Vue.js 2.0版本中的應用，需要的朋友可以參考下2017-03-03
Vue數據與事件綁定以及Class和Style的綁定詳細講解
這篇文章主要介紹了Vue數據與事件綁定以及Class和Style的綁定，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-01-01
這篇文章主要介紹了vue如何使用element組件自定義v-loading問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了關于Vue中img動態(tài)拼接src圖片地址的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
在本文中，將向你展示5個特性，你可以通過 Vuex 插件輕松地添加到下一個項目中。一起來學習下。2017-11-11