vue快速入门(四十三)axios模块的安装与引入

步骤很详细,直接上教程

上一篇

  1. 在项目目录打开终端

在这里插入图片描述

  1. 输入以下命令安装axios
npm i axios
  1. 重新打开项目即可完成按照

  2. 测试

源码

main.js

import Vue from 'vue'
import App from './App.vue'//全局引入axios
// 引入axios
import axios from 'axios';
// 挂载到vue原型链上
Vue.prototype.axios = axios;Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

App.vue

<template><div id="app"><TestComponent/></div>
</template>
<script>
import TestComponent from "./components/TestComponent.vue";
export default {name: "App",components: {TestComponent},data() {return {};},methods: {}
};
</script>
<style></style>

TestComponent.vue

<template><div><button @click="onClick">点击输出</button></div>
</template><script>
//局部导入axxios
//import axios from 'axios'
export default {data() {return {list: [],};},methods: {onClick() {console.log(this.list);},},async created() {//全局导入了axios需要加this,局部的不用thisconst res = await this.axios.get("http://hmajax.itheima.net/api/news");setTimeout(() => {this.list = res.data.data;}, 2000);},
};
</script><style lang="less" scoped>
</style>

效果演示

在这里插入图片描述

🎁附加:

如何在终端关闭当前已经打开的项目

Ctrl+c,再输入y,最后回车

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/3492.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BGP配置和应用案例

策略路由的配置步骤 l 策略路由的配置步骤如下&#xff1a; 创建route-map 通过ACL匹配感兴趣的数据&#xff0c;定义策略动作 在指定接口下通过ip policy 命令应用route-map l 最终实现对通过该接口进入设备的数据进行检查&#xff0c;对匹配的数据执行规定的策略…

八、Python+FFmpeg,实战直播推流

1,环境变量 将 python.exe 的路径添加到环境变量中。 2,创建 py 文件,调用 ffmpeg import subprocess import time #ffmpeg 录屏:5 秒 ffmpeger=subprocess.Popen(ffmpeg -thread_queue_size 16 -f gdigrab -i desktop -s 1280x720 -vcodec libx264 -y test2.mp4, she…

【A-034】基于SSH的电影订票系统(含论文)

【A-034】基于SSH的电影订票系统&#xff08;含论文&#xff09; 开发环境&#xff1a; Jdk7(8)Tomcat7(8)MySQLIntelliJ IDEA(Eclipse) 数据库&#xff1a; MySQL 技术&#xff1a; SpringStruts2HiberanteJSPJquery 适用于&#xff1a; 课程设计&#xff0c;毕业设计&…

7.MyBatis 操作数据库(初阶)

文章目录 1.什么是MyBatis2.为什么要学习 MyBatis&#xff1f;3.通过spring框架创建MyBatis项目3.1使用MyBatis查询数据库3.2 mysql连接不上报错解决方法 4.MyBatis的基础操作4.1企业建表规范&#xff1a;4.2MyBatis基本实现4.3单元测试4.4使用MyBatis可能遇到的问题4.5配置MyB…

Jsoncpp搭建交叉编译环境(移植到arm)

1. 官网下载源码 github地址&#xff1a;GitHub - open-source-parsers/jsoncpp at update 2. 交叉编译环境 当前平台/开发平台-编译环境&#xff1a; [rootlocalroot ~]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) [rootlocalroot ~]# uname -a Lin…

4.7 海思SS928开发 - uboot开发 - 自定义分区以及启动方案

4.7 uboot开发 - 自定义分区以及启动方案 ss928 出厂默认的启动方式以及 emmc 默认的分区&#xff0c;不符合需求&#xff0c;考虑自己做一个分区方案以及启动方案。 分区方案 分区表如下&#xff1a; 分区文件系统分区说明fastboot-存放 bootloaderubootenv-存储 uboot 环境…

【预测】小米汽车电子电气架构的猜想

文章目录 前言 整车EEA 硬件平台 软件平台 总结 参考资料 前言 见《【Review】小米汽车发布会》 整车EEA 小米汽车整车电子电气架构方面的信息&#xff0c;小米官方并没有对外介绍&#xff0c;但是从近日流出的整车BOM和供应商列表中看到&#xff0c;车上各种控制器一个都…

Kotlin语法入门-密封类和密封接口(11)

Kotlin语法入门-密封类和密封接口(11) 文章目录 Kotlin语法入门-密封类和密封接口(11)十一、密封类和密封接口1、密封类2、密封接口 十一、密封类和密封接口 1、密封类 在Kotlin中&#xff0c;密封类&#xff08;Sealed Class&#xff09;是一种特殊的类&#xff0c;用于表示受…

蓝牙低能耗安全连接 – 数值比较

除了 LE Legacy 配对之外&#xff0c;LE Secure Connections 是另一种配对选项。 LE 安全连接是蓝牙 v4.2 中引入的增强安全功能。它使用符合联邦信息处理标准 (FIPS) 的算法&#xff08;称为椭圆曲线 Diffie Hellman (ECDH)&#xff09;来生成密钥。对于 LE 安全连接&#xff…

永恒之蓝ms17-010的利用

永恒之蓝ms17-010的利用 实验环境&#xff1a; Kali虚拟机&#xff1a;攻击机 Win7虚拟机&#xff1a;目标机 主要工具&#xff1a;metasploit ##获取meterpreter 使用关键字17-010在metasploit中查找 msf5 > search 17-010Matching Modules # Name …

android Java工程配置kotlin环境

在Android项目中配置Kotlin&#xff0c;你需要执行几个步骤来确保你的Java工程可以混合使用Kotlin代码。以下是一个基本的指南&#xff1a; 添加Kotlin插件 首先&#xff0c;你需要在你的Android项目中添加Kotlin插件。这通常在你的build.gradle&#xff08;项目级别&#xff…

图像处理技术与应用(二)

图像处理技术与应用入门 椒盐噪声 椒盐噪声&#xff0c;也称为脉冲噪声&#xff0c;是一种常见的数字图像噪声。它通常表现为图像中随机出现的白色&#xff08;椒&#xff09;或黑色&#xff08;盐&#xff09;像素点&#xff0c;这些像素点在图像上呈现为黑白杂点。椒盐噪声…

算法项目(9)—— 大模型实现PDF检索加QA

本文包含什么? 使用大语言模型进行多个PDF问答检索加QA.gradio实现的网页界面操作,全套代码以及代码介绍运行有问题? csdn上后台随时售后.项目说明 本项目实现使用大语言模型为核心,gradio框架,调用vicuna实现多个pdf QA 代码运行 python3 main.pyimport gradio as gr fr…

云计算革新:以太网 Scale-UP 网络为 GPU 加速赋能

谈谈基于以太网的GPU Scale-UP网络 Intel Gaudi-3 采用 RoCE 互联技术&#xff0c;促进了 Scale-UP 解决方案。业界专家 Jim Keller 倡导以太网替代 NVLink。Tenstorrent 成功应用以太网实现片上网络互联。RoCE 和以太网已成为互联解决方案的新兴趋势&#xff0c;为高性能计算提…

视频中为什么需要这么多的颜色空间?

在视频处理中&#xff0c;经常会用到不同色彩空间&#xff1a;非线性RGB&#xff0c;线性 RGB&#xff0c;YUV&#xff0c;XYZ……为什么需要这么多的色彩空间呢&#xff1f; 1、视频采集时的线性RGB颜色空间 由数码相机中的 CMOS 传感器产生并写入原始文件&#xff08;Raw Fil…

艾瑞泽5汽车电子控制单元CAN通信数据读写车辆网络系统交互接口

艾瑞泽5的网关接口数据交换通常涉及车辆内部电子设备之间的信息传输&#xff0c;包括车身系统、娱乐系统、远程控制、车辆状态监控、CAN数据采集分析、整车DBC控制策略等信息。 艾瑞泽5作为一款采用CAN协议的汽车&#xff0c;其CAN通信的开发可以提高车辆的安全性、可靠性和实…

怎么设置 idea terminal 窗口的编码格式

1 修改Terminal 窗口为 Git bash 窗口 打开 settings 设置界面&#xff0c;选择 Tools 中的 Terminal (File -> settings -> Tools -> Terminal) 修改 Shell path 为你的 Git bash 安装路径&#xff0c;我的在 C:\my_software\java\Git\bin\bash.exe 2 解决中文显示…

uniapp 阿里云点播 视频播放

以下是uniapp 阿里云点播&#xff08;不加密&#xff09; 注意&#xff1a; 对于UNI APP端的开发而言&#xff0c;由于上并没有document 不能进行相关的DOM操作&#xff0c;同时有关DOM渲染的第三方库(echart、openlayer等)也无法有效的使用&#xff0c; 因此官方推出了renderj…

1003 - 编程求1+3+5+...+n

题目描述 编程求 135 \dots n135⋯n 。 输入 输入一行&#xff0c;只有一个整数 n (1 \le n \lt 10000)n(1≤n<10000) 这里 nn 为奇数。 输出 输出只有一行。 样例 输入 99 输出 2500 #include<bits/stdc.h> using namespace std; int main(){int m,s0;cin…

抢单业务介绍

存在的问题 会出现多个人同时访问的问题 解决办法&#xff1a;在判断前加锁&#xff0c;使用户在抢单前先访问锁然后在执行之后的操作 常见的锁 1.基于数据库 2.基础缓存(Redis等) 3.基于Zookeeper