【前端】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>
<!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>
    <div class="lucky">img*125[src=https://picsum.photos/600/360?$
    </div>
  </body>
</html>

由于浏览器缓存,则会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.data
        console.log('🚀 ~ getData ~ this.responseData:', this.responseData)
      } catch (error) {
        console.error('请求失败', error)
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>

效果
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQl基础入门⑦

上一章知识内容 分析数据且区分数据类型 看下表分析数据的特征&#xff0c;根据其特征确定相应的数据类型。 分析以上表格特征&#xff0c;确定数据类型&#xff0c;并对数据进行分类。分析数据后按固定长度字符串、可变长度字符串、整数、固定精度小数和日期时间数据类型对数…

稀碎从零算法笔记Day14-LeetCode:同构字符串

题型&#xff1a;字符串、哈希表 链接&#xff1a;205. 同构字符串 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 给定两个字符串 s 和 t &#xff0c;判断它们是否是同构的。 如果 s 中的字符可以按某种映射关系替换得到 t &#xff0c;那…

【算法面试题】-04

执行时长 def min_execution_time(n, size, tasks):a 0ans sizei 0while i < size:tmp tasks[i]a tmpif a < n:a 0else:a - ni 1ans a // nif a % n ! 0:ans 1return ans# 读取输入 n int(input()) size int(input()) tasks list(map(int, input().split()))…

Unity使用Addressable热更新

先看热更新的gif: Addressable是Unity推出的打ab包方案。不需要手动写AB打包脚手架了&#xff0c;不需要关心依赖&#xff0c;这也简化了ab热更新的流程。Addressable打包需要先将资源放入group中&#xff0c;按group来打包&#xff0c;每个group对应一个ScriptableObject的配置…

线程-创建线程的方法、线程池

1.创建线程一共有哪几种方法&#xff1f; 继承Thread类创建线程 继承Thread类&#xff0c;重写run()方法&#xff0c;在main()函数中调用子类的strat()方法 实现Runnable接口创建线程 先创建实现Runnable接口的类&#xff0c;重写run()方法&#xff0c;创建类的实例对象&#…

(南京观海微电子)——I3C协议介绍

特点 两线制总线&#xff1a;I2C仅使用两条线——串行数据线&#xff08;SDA&#xff09;和串行时钟线&#xff08;SCL&#xff09;进行通信&#xff0c;有效降低了连接复杂性。多主多从设备支持&#xff1a;I2C支持多个主设备和多个从设备连接到同一总线上。每个设备都有唯一…

靶场:sql-less-18(HTTP头注入)

本文操作环境&#xff1a;Kali-Linux 靶场链接&#xff1a;Less-18 Header Injection- Error Based- string 输入用户名和密码以后&#xff0c;我们发现屏幕上回显了我们的IP地址和我们的User Agent 用hackbar抓取POST包&#xff0c;在用户名和密码的位置判断注入点&#xff0…

【设计模式】(四)设计模式之工厂模式

1. 工厂模式介绍 工厂模式&#xff08;Factory Pattern&#xff09;是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 工厂模式有三种实现方式&#xff1a; 简单工厂模式工厂方法模式抽象工厂模式 2. 工厂方…

自动创建word文档的exe文件,自定义文件名、保存路径

目录 一、exe 二、使用方法 三、代码 四、Python打包exe 一、exe 百度网盘: 链接&#xff1a;https://pan.baidu.com/s/1dyCo_iVv7fb369BHbwGjHg 提取码&#xff1a;2333 夸克网盘: 链接&#xff1a;https://pan.quark.cn/s/36b14a53cccd 二、使用方法 1. 下载完成后双…

排序(7)——非递归快排

前面我们已经写了快排用递归的方法实现&#xff0c;在数据量大的时候&#xff0c;有可能会栈溢出。这里我们尝试一下改为非递归。 区分&#xff1a; 数据结构的栈——利用的是内存中的堆空间内存的栈——利用就是内存中的栈空间——函数创建函数栈帧堆的空间是远远大于栈的空…

突破编程_前端_JS编程实例(目录导航)

1 开发目标 目录导航组件旨在提供一个滚动目录导航功能&#xff0c;使得用户可以方便地通过点击目录条目快速定位到对应的内容标题位置&#xff0c;同时也能够随着滚动条的移动动态显示当前位置在目录中的位置&#xff1a; 2 详细需求 2.1 标题提取与目录生成 组件需要能够自…

Transformer之多角度解读

Transformer 文章目录 Transformer  &#x1f449;引言&#x1f48e; 一、 自注意力机制 &#xff1a; 主要用于 长距离依赖捕捉和转换序列二、 Encoder&#xff1a;2.1 多头注意力机制&#xff1a;2.2 残差连接&#xff1a; 三、 Decoder&#xff1a;3.1 Decoder 多头注意力…

SMART PLC自适应低通滤波器(收放卷线速度滤波)

一阶低通滤波器更多内容请参考信号处理专栏相关文章,常用链接如下: 1、SMART PLC 低通滤波器和模拟量采集应用 https://rxxw-control.blog.csdn.net/article/details/136595982https://rxxw-control.blog.csdn.net/article/details/1365959822、SMART PLC双线性变换和后向差…

腾讯云服务器99元一年购买链接来了,续费也是99元

良心腾讯云推出99元一年服务器&#xff0c;新用户和老用户均可以购买&#xff0c;续费不涨价&#xff0c;续费也是99元&#xff0c;配置为轻量2核2G4M、50GB SSD盘、300GB月流量、4M带宽&#xff1a;优惠价格99元一年&#xff0c;续费99元&#xff0c;官方活动页面 txybk.com/g…

【STM32】STM32F4中USART的使用方法和Printf的重定义(基于CubeMX和Keil)

文章目录 一、前言二、STM32CubeMX生成代码2.1 选择芯片2.2 配置相关模式2.3 生成代码 三、Keil重定义Printf3.1 勾选“UseMicroLIB”3.2 添加头文件和修改fputc和fgetc 四、测试Printf的效果4.1 字符串测试4.2 格式化输出测试 五、存在问题的解决方法5.1 检查串口号是否一致5.…

由于找不到vcruntime140.dll无法继续执行的多种解决方法

最近&#xff0c;我在安装Adobe Premiere Pro&#xff08;以下简称PR&#xff09;时遇到了一个问题&#xff0c;即无法找到vcruntime140.dll文件。这可能导致某些应用程序无法正常启动或运行&#xff0c;因为vcruntime140.dll是许多基于Microsoft Visual C编译的应用程序所必需…

【中医】康复科治疗与中医养生(针灸、理疗、足浴)

程序员生活指南之 【中医】康复治疗与中医养生&#xff08;针灸、理疗、足浴&#xff09; 文章目录 1、康复科室2、中医与养生3、中医康复技术 1、康复科室 什么是康复科&#xff1f; 大部分医院都有康复科&#xff0c;但很多人都不知其具体是干什么的。其实&#xff0c;康复…

考研常识 | 专业硕士与学术硕士的11个区别

专业硕士与学术硕士的11个区别 对于考研学子而言&#xff0c;了解专业学位与学术学位的区别&#xff0c;是报考的第一步。学术学位研究生一般都是全日制的&#xff0c;而专业学位研究生的学习方式还分为即全日制与非全日制两种。这篇文章将带大家认识全日制专业学位与全日制学术…

LCR 131. 砍竹子 I

解题思路&#xff1a;&#xff08;与砍竹子II的区别是&#xff0c;这里的竹子长度数量级较小&#xff09; 数学推导或贪心 切分规则&#xff1a; 等长&#xff0c;且尽量为3 b0时&#xff0c;pow(3,a) b1时&#xff0c;pow(3,a-1)*4 少一段3&#xff0c;并入b生成一…

【数据结构】Map的常用方法

文章目录 一、搜索1.概念 二、Map的使用1.概念&#xff1a;2.Map的常用方法&#xff1a;1.V put(K Key ,V Value )2.V get(Object key)3.V getOrDefault(Object key, V defaultValue)4.V remove(Object key)5.Set<K> keySet()6.Collection<V> values()7.Set<Map…
最新文章