vue前端使用django后端数据，给个例子

在Vue前端和Django后端协作时，你可以使用Ajax或者Fetch API来获取和处理后端的数据。以下是一个简单的例子：

首先，假设你有一个Django视图（views.py），它接收HTTP GET请求并返回一些JSON数据：

from django.http import JsonResponse
from .models import YourModel

def your_view(request):
    data = YourModel.objects.all()
    serialized_data = [item.to_dict() for item in data]
    return JsonResponse(serialized_data, safe=False)

在这个例子中，我们查询数据库，序列化数据，然后以JSON格式返回。

然后，在Vue的组件（通常是`methods`或`created`生命周期钩子）里发送GET请求：

import axios from 'axios';

export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('/your-django-url/your-view/')
        .then(response => {
          this.items = response.data; // 将后端返回的数据赋值给items
          // 更新视图
        })
        .catch(error => console.error('Error fetching data:', error));
    }
  }
}

在这个Vue组件中，`fetchData`方法向指定的Django URL发起GET请求，并将接收到的JSON数据解析并保存到`items`属性上，以便在模板中显示。

在模板中，你可以使用`v-for`遍历`items`数组来显示数据：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>