首页 > 其他分享 >vue项目中使用axios(自用)

vue项目中使用axios(自用)

时间:2024-07-15 23:07:36浏览次数:17  
标签:axios 获取数据 vue 自用 mounted data tableData

————流程参考

 

在vscode的集成终端中输入

npm install axios

回车安装

重启项目(重新运行)

 

在script中导入axios

import axios from 'axios';

 在default中的data同级mounted()中按如下获取数据

mounted(){
        // 发送异步请求,获取数据
        // 输入thenc可用自动生成回调
        axios.get('数据地址').then((result) => {
            //成功回调,获取数据,并赋值给tableData
            this.tableData = result.data.data;
        });
    }

其中,tabledata是自定义的data内容

data() {
        return {
            tableData:[]
        }
    }

 

标签:axios,获取数据,vue,自用,mounted,data,tableData
From: https://www.cnblogs.com/yansans/p/18304211

相关文章

  • SpringBoot+Vue母婴用品商城(前后端分离)
    技术栈JavaSpringBootMavenMySQLVueElement-UIShiroMybatis-Plus系统角色功能用户管理员系统功能截图......
  • vue3 ----- Pinia
    什么是PiniaPinia基础使用getters实现action异步实现编写方式:异步action函数的写法和组件中获取异步数据的写法完全一致storeToRefs工具函数Pinia的调试Pinia持久化插件官方文档:Home|pinia-plugin-persistedstate安装插件pinia-plugin-persistedstatenpmi......
  • vue3~
    Vue3的优势Vue3组合式APIvsVue2选项式APIvue3的脚手架---create-vuenpminitvue@latest项目目录和关键文件组合式API 1.setup选项setup选项的执行时机beforeCreate钩子之前自动执行setup选项的写法2.reactive和ref函数reactive()作用:接受对象类型......
  • vue2和vue3的生命周期对比?
    Vue2和Vue3在生命周期钩子函数方面存在明显的区别,这些区别主要体现在命名、新增钩子函数、触发时机以及API的使用方式等方面。以下是对两者生命周期的详细对比:一、命名变化Vue2:生命周期钩子函数的名称通常以"before"、"created"、"mounted"等前缀命名,如beforeCreate、crea......
  • 基于SpringBoot+Vue+uniapp的邮件过滤系统的详细设计和实现(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • 基于SpringBoot+Vue+uniapp的美食推荐小程序的详细设计和实现(源码+lw+部署文档+讲解
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • 基于SpringBoot+Vue+uniapp的生鲜食品订购的详细设计和实现(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • 【vue组件库搭建07】Vitest单元测试
    vitest官网vue-test-utils我们的测试框架选择的是Vitest和vue-test-utils。两者的关系为:Vitest提供测试方法:断言、Mock、SpyOn等方法。vue-test-utils:挂载和渲染组件:VueTestUtils允许您在隔离中挂载组件,这意味着您可以测试单个组件而不必担心其子组件或需要......
  • Vue 3 中 defineExpose() 函数的使用
    什么是defineExpose()?defineExpose()是Vue3提供的一个CompositionAPI函数,用于明确指定哪些内部响应式状态或函数可以被外部访问。如何使用defineExpose()?在子组件中定义:import{ref,defineExpose}from'vue'exportdefault{setup(){constcount=......
  • vue3快速上手指南
    1.Vue3简介2020年9月18日,Vue.js发布版3.0版本,代号:OnePiece(n经历了:4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址:Releasev3.0.0OnePiece·vuejs/core截止2023年10月,最新的公开版本为:3.3.41.1.【性能的提升】打包大小减少41%。初次渲染快......