【前端】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>Documenttitle>
head>
<body>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12

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

  <div class="lucky">div>
1

图片随机生成

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

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

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

由于浏览器缓存，则会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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

效果
在这里插入图片描述

相关阅读:
【学习笔记之Linux】云服务器搭建
【知识拓展】HTTP、WebSocket 和 RPC：区别与使用场景详解
VSCode(Visual Studio Code)扩展及缓存占用C盘空间问题的解决
人工智能AI知多少？
一、初识Docker
Vue2 Element DatePicker组件设置默认日期、控制日期范围
MySQL-通过存储过程来添加和删除分区（List分区）
elementui 实现树形控件单选
Python教程：快速入门-函数、函数参数及三元运算符
[前端基础] CSS3 篇

原文地址：https://blog.csdn.net/weixin_44055864/article/details/136599364