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-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率，这篇文章主要介绍了vue devtools的安装与使用教程,需要的朋友可以参考下2018-08-08
在 Vue 3 中设置 `@` 指向根目录的几种常见方法汇总
在 Vue 3 项目开发中,为了方便管理和引用文件路径,设置 @ 指向根目录是一项常见的需求,下面给大家分享在Vue3中设置 `@` 指向根目录的方法汇总,感兴趣的朋友一起看看吧2024-06-06
本文通过实例代码给大家介绍了vue中的ElementUI的使用，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
vue在前端技术中使用越来越多，也成为了主流框架，今天咱花点时间学习下Vue与element-ui整合方式，本文结合示例代码给大家介绍的非常详细，需要的朋友参考下吧2022-04-04
在Vue3项目中,使用i18n动态获取keyzh文件时,直接用中括号无效,需改用数组形式如$[key, 'zh'],明确指定语言代码以正确加载翻译2025-09-09
在现代前端开发的世界中,Vue 3 已然成为了一个备受喜爱的框架,而 Vite 作为一个新兴的构建工具,以其极高的效率和简捷的配置方式席卷了开发者圈,本文我们将一步一步展示如何使用 Vite 构建一个 Vue 3 项目,从创建项目到最后的构建阶段,需要的朋友可以参考下2024-07-07
Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,这篇文章主要介绍了vue自定义tap指令及tap事件的实现 ,需要的朋友可以参考下2018-09-09
Monaco-editor,一个vs code 编辑器,这篇文章主要为大家详细介绍了如何在Vue2中使用Monaco Editor,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
vue使用element-plus依赖实现表格增加的示例代码
这篇文章主要为大家详细介绍了vue使用element-plus依赖实现表格增加,文中示例代码讲解的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2023-12-12
这篇文章主要为大家详细介绍了vue组件间传值的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
最新评论