vue前端獲取django后端數(shù)據(jù)實現(xiàn)方式

更新時間：2026年02月05日 08:46:19 作者：Wanncye

這篇文章主要介紹了如何在Vue組件中使用axios獲取和處理數(shù)據(jù),并在模板中展示這些數(shù)據(jù),文章還詳細講解了Vue的生命周期、v-for指令的使用以及axios與ajax的區(qū)別

script

首先我們在想要獲得數(shù)據(jù)的vue組件里的script部分編寫獲取數(shù)據(jù)、處理數(shù)據(jù)的方法，然后將數(shù)據(jù)返回。返回的數(shù)據(jù)可以在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>

因為前面我們已經(jīng)在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>

在標簽中循環(huán)script返回的列表，將得到的image_url作為img標簽的源鏈接，得到的link作為a標簽的跳轉鏈接。

有這么幾個點要注意：

v-for的使用，有點像python里面的for循環(huán)
vue的屬性前的冒號

加冒號的，說明后面的是一個變量或者表達式；

沒加冒號的后面就是對應的字符串字面量。

ajax和axios有什么區(qū)別呢？

axios是通過Promise實現(xiàn)對ajax技術的一種封裝，就像jquery對ajax的封裝一樣。（ajax技術實現(xiàn)了局部數(shù)據(jù)的刷新，axios實現(xiàn)了對ajax的封裝。）；
axios是ajax，ajax不止axios；axios有的ajax都有，ajax有的axios不一定有。

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue devtools的安裝與使用教程
vue-devtools是一款基于chrome游覽器的插件，用于調試vue應用，這可以極大地提高我們的調試效率，這篇文章主要介紹了vue devtools的安裝與使用教程,需要的朋友可以參考下
2018-08-08
在 Vue 3 中設置 `@` 指向根目錄的幾種常見方法匯總
在 Vue 3 項目開發(fā)中,為了方便管理和引用文件路徑,設置 @ 指向根目錄是一項常見的需求,下面給大家分享在Vue3中設置 `@` 指向根目錄的方法匯總,感興趣的朋友一起看看吧
2024-06-06
vue中的ElementUI的使用詳解
本文通過實例代碼給大家介紹了vue中的ElementUI的使用，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-10-10
詳解Vue與element-ui整合方式
vue在前端技術中使用越來越多，也成為了主流框架，今天咱花點時間學習下Vue與element-ui整合方式，本文結合示例代碼給大家介紹的非常詳細，需要的朋友參考下吧
2022-04-04
vue3 i18n動態(tài)獲取key的實現(xiàn)方式
在Vue3項目中,使用i18n動態(tài)獲取keyzh文件時,直接用中括號無效,需改用數(shù)組形式如$[key, 'zh'],明確指定語言代碼以正確加載翻譯
2025-09-09
使用Vite構建Vue3項目的流程步驟
在現(xiàn)代前端開發(fā)的世界中,Vue 3 已然成為了一個備受喜愛的框架,而 Vite 作為一個新興的構建工具,以其極高的效率和簡捷的配置方式席卷了開發(fā)者圈,本文我們將一步一步展示如何使用 Vite 構建一個 Vue 3 項目,從創(chuàng)建項目到最后的構建階段,需要的朋友可以參考下
2024-07-07
vue自定義tap指令及tap事件的實現(xiàn)
Vue提供自定義實現(xiàn)指令的功能, 和組件類似,可以是全局指令和局部指令,這篇文章主要介紹了vue自定義tap指令及tap事件的實現(xiàn) ,需要的朋友可以參考下
2018-09-09
Vue2中使用Monaco?Editor的教程詳解
Monaco-editor,一個vs?code?編輯器,這篇文章主要為大家詳細介紹了如何在Vue2中使用Monaco?Editor,感興趣的小伙伴可以跟隨小編一起學習一下
2024-01-01
vue使用element-plus依賴實現(xiàn)表格增加的示例代碼
這篇文章主要為大家詳細介紹了vue使用element-plus依賴實現(xiàn)表格增加,文中示例代碼講解的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
2023-12-12
vue組件間傳值的方法你知道幾種
這篇文章主要為大家詳細介紹了vue組件間傳值的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02