当前位置: 首页 > news >正文

【前端】vscode快捷键和实用Api整理

vscode的快捷键

创建a.html 生成模板
!+回车

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

创建div加类名
div.lucky+回车
生成

  <div class="lucky"></div>

图片随机生成

网站
开发静态页面没有数据的时候可以用它来占位

只需在我们的 URL 后添加您想要的图像尺寸(宽度和高度),您就会获得随机图像。
https://picsum.photos/200/300
要获得正方形图像,只需添加尺寸即可。
https://picsum.photos/200
生成5张图片,200*300的,再300后面加个]回车即可

<div class="lucky">img*5[src=https://picsum.photos/200/300</div>

由于浏览器缓存,则会5张图片会长一样,只需要300后面加个
?$]
回车即可
切记,最好一个]要手输才有提示,代码右键使用插件Live Server打开浏览器查看效果

宝可梦图片接口

<template><div><button @click="getData">获取数据</button><div v-if="responseData"><h2>{{ responseData.name }}</h2><div>height: {{ responseData.height }}</div><div>weight: {{ responseData.weight }}</div><img :src="responseData.sprites['other']['official-artwork']['front_default']" alt="pokemon pic" /><img :src="responseData.sprites['other']['official-artwork']['front_shiny']" alt="pokemon pic" /><img :src="responseData.sprites['other']['dream_world']['front_default']" alt="pokemon pic" /><img :src="responseData.sprites['other']['home']['front_default']" alt="pokemon pic" /></div></div>
</template><script>
import axios from 'axios'export default {data() {return {responseData: null,}},methods: {async getData() {try {// 发送GET请求  1可以改https://www.pokemon.cn/play/pokedex/查看宝可梦在图鉴里的编号const response = await axios.get('https://pokeapi.co/api/v2/pokemon/150/')// 处理响应数据this.responseData = response.dataconsole.log('🚀 ~ getData ~ this.responseData:', this.responseData)} catch (error) {console.error('请求失败', error)}},},
}
</script><style lang="scss" scoped></style>

效果
在这里插入图片描述

相关文章:

【前端】vscode快捷键和实用Api整理

vscode的快捷键 创建a.html 生成模板 !回车 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" …...

抖音商家活动信息未在商详展示会有哪些处罚?

一、什么是「违规玩法-活动信息未在商详展示」? 什么是「违规玩法-活动信息未在商详展示」?由于当前平台未提供官方营销工具(例如免单、返现等)&#xff0c;但是创作者在进行商品推广(不仅限口播、画面、标题文案等)宣传该类营销玩法&#xff0c;未在商品商详页展示说明&…...

智慧公厕方案_智慧公厕解决方案_智慧公厕整体解决方案

一、什么是智慧公厕&#xff1f; 在现代城市化进程中&#xff0c;公共厕所是不可或缺的基础设施之一。然而&#xff0c;传统的公厕管理模式已经无法满足市民对高效、便捷厕所服务的需求。为了实现公共厕所的信息化管理&#xff0c;智慧公厕整体解决方案应运而生。智慧公厕具体…...

【Python】成功解决IndexError: list index out of range

【Python】成功解决IndexError: list index out of range &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望得到您的订…...

对于两个独立随机变量X,Y, E(XY)=E(X)E(Y)

两个独立随机变量X&#xff0c;Y的期望分别是E(X), E(Y), 其乘积XY的期望是多少&#xff1f; 我们可以利用期望的性质来求得XY的期望。由于X、Y是独立随机变量&#xff0c;因此它们的协方差为0&#xff0c;即&#xff1a; cov(X, Y) E(XY) - E(X)E(Y) 0 因此&#xff0c; …...

以题为例 浅谈前缀和算法

前缀求和算法是什么 前缀和算法就是以空间去换取时间&#xff0c;可用于快速求数组的区间和&#xff0c;它可以用于一维数组和二维数组&#xff0c;但我现在只接触了一维数组并没有接触二维数组&#xff0c;所以在这里先介绍一维数组前缀和相关的知识 前缀和典型代码 for(int…...

【Python】进阶学习:OpenCV--一文详解cv2.namedWindow()

【Python】进阶学习&#xff1a;OpenCV–一文详解cv2.namedWindow() &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望…...

【嵌入式】字体极限瘦身术:Fontmin在嵌入式UI中的魔法应用(附3500常用汉字)

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟。提供嵌入式方向的学习指导、简历面…...

蓝桥杯递推与递归法|斐波那契数列|数字三角形|42点问题|数的计算|数的划分(C++)

递归是用来做dfs&#xff0c;是搜索算法的基础 递推是用来做dp部分&#xff0c;及部分其他算法&#xff0c;复杂度较低&#xff0c;不会出现爆栈问题递推法&#xff1a; 递推法是一种在数学和其他领域广泛应用的重要方法&#xff0c;它在计算机科学中被用作一种关键的数值求解…...

遗留系统现代化:理解、策略与案例

文章目录 一、什么是遗留系统二、遗留系统的特点三、改造遗留系统的方法四、案例4.1 重构4.2 替换4.3 封装4.4 服务化 五、总结 一、什么是遗留系统 遗留系统&#xff08;Legacy System&#xff09;是指在组织中已经存在一段时间&#xff0c;通常是几年或更长时间的信息系统。…...

2024.3.9 C++启航 梦开始的地方

一.基本格式: #include<iostream>using namespace std;int main() {return 0; } 二.注释 1.当行注释: 同C语言//描述信息 2.多行注释: /*描述信息*/ 三.输入输出 既可以使用scanf和printf 也可以使用标准输入流对象cin和标准输出流对象cout,且cin cout更安全和方…...

Ubuntu平铺左、右、上、下、1/2、1/4窗口(脚本)

前言 之前因为一直在用Ubuntu 18或者Ubuntu 20然后发现装了GNOME插件后&#xff0c;电脑在使用过程中&#xff0c;会时不时的卡死&#xff08;鼠标没问题&#xff0c;键盘输入会有10-20秒的延迟&#xff09;频率基本是一小时一次&#xff0c;因为这种卡顿会很容易打断思路&…...

深度学习+感知机

深度学习感知机 1感知机总结 2多层感知机1XOR2激活函数3多类分类总结 3代码实现 1感知机 是个很简单的模型,是个二分类的问题。 感知机&#xff08;perceptron&#xff09;是Frank Rosenblatt在1957年提出的一种人工神经网络&#xff0c;被视为一种最简单形式的前馈神经网络&…...

爬虫练习:获取某招聘网站Python岗位信息

一、相关网站 二、相关代码 import requests from lxml import etree import csv with open(拉钩Python岗位数据.csv, w, newline, encodingutf-8) as csvfile:fieldnames [公司, 规模,岗位,地区,薪资,经验要求]writer csv.DictWriter(csvfile, fieldnamesfieldnames)writer…...

Java对接腾讯云直播示例

首先是官网的文档地址 云直播 新手指南 可以发现它这个主要是按流量和功能收费的 价格总览 流量这里还只收下行的费用&#xff0c;就是只收观看消耗的流量费 其它的收费就是一些增值业务费 &#xff08;包括直播转码、直播录制、直播截图、直播审核、智能鉴黄、实时监播、移动直…...

free pascal 调用 C#程序读 Freeplane.mm文件,生成测试用例.csv文件

C# 请参阅&#xff1a;C# 用 System.Xml 读 Freeplane.mm文件&#xff0c;生成测试用例.csv文件 Freeplane 是一款基于 Java 的开源软件&#xff0c;继承 Freemind 的思维导图工具软件&#xff0c;它扩展了知识管理功能&#xff0c;在 Freemind 上增加了一些额外的功能&#x…...

在Blender中清理由Instant-NGP等几何学习技术生成的网格

使用布尔运算: 创建一个大的立方体或其他简单几何体包裹住全部网格。使用布尔修改器对两个网格进行“差集”运算。这将移除超出包裹体之外的多余网格部分。 手动选择并删除: 进入编辑模式&#xff08;按Tab键&#xff09;。按A键取消选择所有顶点。按B键并拖动以选择您想要删除…...

【重要公告】BSV区块链上线TypeScript SDK,未来将支持更多开发语言

​​发表时间&#xff1a;2024年2月21日 BSV区块链协会宣布上线JavaScript和TypeScript SDK&#xff08;即“标准开发工具包”&#xff09;。TypeScript SDK旨在为开发者提供新版统一核心代码库&#xff0c;以便利开发者在BSV区块链上开发能够任意扩容的应用程序。新上线的SDK替…...

【工具使用-VScode】VScode如何设置空格和tab键显示

一&#xff0c;简介 在提交代码的时候&#xff0c;行末尾的tab和空格不符合规范&#xff0c;但是如果在vscode中不显示tab和空格的话&#xff0c;不能及时的查看到并改正&#xff0c;导致提交代码之后还需要再次进行修改&#xff0c;效率比较低。 代码编辑界面如图所示&#…...

【原理图PCB专题】Cadence 17.4版本原理图及PCB Mudule复用

在我们设计复杂板卡的时候,往往会遇到一部分电路被反复使用的情况。虽然使用复制黏贴我们很快的做出相同的设计,但由于不同工程师能力水平不同,有时可能存在部分电路被漏掉导致重大异常。尤其对于大规模复杂设计,如果设计者浪费时间制作相同模块上,这无疑是对于工程师精力…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...