vue前端获取django后端数据实现方式
作者：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不一 定有。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。