vue前端获取django后端数据实现方式
更新时间：2026年02月05日 08:46:19 作者：Wanncye
这篇文章主要介绍了如何在Vue组件中使用axios获取和处理数据,并在模板中展示这些数据,文章还详细讲解了Vue的生命周期、v-for指令的使用以及axios与ajax的区别
script
首先我们在想要获得数据的vue组件里的script部分编写获取数据、处理数据的方法，然后将数据返回。返回的数据可以在template部分获取、展示。
<script>
export default {
name: "Banner",
data(){
return{
banner_list : []
}
},
created(){
this.get_banner_list();
},
methods: {
get_banner_list(){
//获取轮播广告
this.$axios.get(`${this.$settings.HOST}/banner`, {}).then(response=>{
console.log(response.data)
this.banner_list = response.data
}).catch(error=>{
console.log(error.response)
})
}
}
}
</script>
因为前面我们已经在main.js中将axios、setting作为vue的property，所以我们能够直接通过this来调用。
这里有几个点需要注意：
${}语法：{}中，javascript会将其认为是变量，在渲染的时候会填充相应的值- axios使用方法得记住
- created(){}是vue的生命周期，有必要了解，起码得熟悉
template
<template>
<el-carousel height="720px" :interval="3000" arrow="always">
<el-carousel-item :key="key" v-for="banner,key in banner_list">
<a :href="banner.link" rel="external nofollow" >
<img :src="banner.image_url">
</a>
</el-carousel-item>
</el-carousel>
</template>
在标签中循环script返回的列表，将得到的image_url作为img标签的源链接，得到的link作为a标签的跳转链接。
有这么几个点要注意：
- v-for的使用，有点像python里面的for循环
- vue的属性前的冒号
加冒号的，说明后面的是一个变量或者表达式；
没加冒号的后面就是对应的字符串字面量。
ajax和axios有什么区别呢？
- axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封 装一样。（ajax技术实现了局部数据的刷新，axios实现了对ajax的封装。）；
- axios是ajax，ajax不止axios；axios有的ajax都有，ajax有的axios不一 定有。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue项目npm run dev启动失败的6个常见原因(附解决方案)
Vue 项目启动是前端开发的基础操作,但很多新手（甚至有经验的开发者）都会遇到npm run dev（或 npm run serve）启动失败的问题,下面就来介绍一下失败的原因及解决方案,感兴趣的可以了解一下2026-01-01
将bmob js-sdk放在static目录，然后在index.html页面中已 script 标签的形式引入，就可以在vue中全局使用bmob js-sdk。下面通过本文给大家分享bmob js-sdk 在vue中的使用教程，需要的朋友参考下吧2018-01-01
这篇文章主要介绍了vue全局混入之状态判断是否执行点击方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue事件符.capture的含义及用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue二选一tab栏切换新做法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
在Vue.js 3.0中，推出了新的组合式API，使得开发者能够更加方便灵活地编写Vue组件，这也是组合式 API 成为了 Vue 新的开发范式，与传统的选项 API 相比，组合式 API 更加灵活、易于维护的原因，在本文中，我们将详细介绍 Vue 组合式API的风格及使用2023-06-06
本文主要是带领大家分析$mount的相关知识，需要的朋友一起学习吧2017-12-12
这篇文章主要介绍了vue如何给自定义的组件绑定点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要给大家介绍了关于vite打包拆分js和css的配置指南,Vite是一个非常快速的工具,它可以帮助你打包JavaScript文件,需要的朋友可以参考下2023-09-09
vue3 el-form-item如何自定义label标签内容
这篇文章主要介绍了vue3 el-form-item如何自定义label标签内容问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论