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;对匹配的数据执行规定的策略…

【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;车上各种控制器一个都…

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

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

抢单业务介绍

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

windows 本地部署 ChatGLM2-6b 教程

介绍 ChatGLM2-6B是智谱AI及清华KEG实验室发布的中英双语对话模型&#xff0c;它是 ChatGLM-6B 的第二代版本。 主要特点&#xff1a; 性能提升&#xff1a;ChatGLM2-6B 在初代模型的基础上进行了全面升级&#xff0c;使用了 GLM 的混合目标函数&#xff0c;并经过了 1.4T 中…

小白学习SpringCloud之Eureka

前言 需要搭建springcloud项目&#xff0c;eureka是其中的一个模块&#xff0c;依赖主要继承父依赖 学习视频&#xff1a;b站狂神说 便于理解,我修改了本地域名》这里!!! 127.0.0.1 eureka7001.com 127.0.0.1 eureka7002.com 127.0.0.1 eureka7003.comEureka入门案例 eureka…

API提取IP

API代理作为IP代理的一项重要业务&#xff0c;在绕开地域网络限制&#xff0c;提高作业效率等方面提供强大的技术支持。它能够帮助用户快速实现软件与软件间的交流&#xff0c;无障碍连通不同应用程序逻辑开发的系统应用。API代理用途范围广泛&#xff0c;如使用API提取代理IP、…

02-JVM学习记录-运行时数据区

二、运行时数据区 每个JVM只有一个Runtime实例&#xff0c;只有一个运行时数据区。 虚拟机栈、堆、方法区最重要 方法区和堆与虚拟机的生命周期相同&#xff08;随虚拟机启动而创建&#xff0c;虚拟机退出而销毁&#xff09;&#xff0c;程序计数器、虚拟机栈、本地方法栈生命…

区块链技术与应用学习笔记(12-13节)——北大肖臻课程

目录 12.BTC-匿名性 一、什么是匿名&#xff1f; 1&#xff0c;有可能破坏比特币匿名性的两个方面 2&#xff0c;如何提高匿名性 一个比特币用户能采用什么样的方法尽量提高个人的匿名性? 分解&#xff1a; 1、网络层怎么提高匿名性? 2、应用层怎么提高匿名性? 零知…

2024年vue 开发环境 Node.js于win10环境下的安装

2024年vue 开发环境 Node.js于win10环境下的安装 导航 文章目录 2024年vue 开发环境 Node.js于win10环境下的安装导航一、下载node.js二、安装node.js三、测试(一)四、环境配置五、测试(二)六、安装淘宝镜像七、安装vue脚手架 一、下载node.js Node.js 官方网站下载&#xff…