vue3获取ref实例结合ts的InstanceType
前言 有时候我们模板引用,但是在使用的时候,ts提示却不行,没有提示组件通过defineExpose暴露的方法名称,虽然这不是很影响,但是可以解决还是可以解决下~ 1234567891011<!-- MyModal.vue --><script setup lang="ts">import { ref } from 'vue'const sayHello = () => (console.log('我会说hello'))defineExpose({ sayHello})</script> 然后我们在父级使用,输入完成MyModalRef.value会发现没有sayHello这个函数提示,所以这个时候我们就需要使用InstanceType 工具类型来获取其实例类型 12345678910<!-- App.vue --><script setup lang="ts">import MyModal ...
React的学习笔记-(Bilibili李立超)
写法的变更之前 12const divNode = <div>你好,React</div>ReactDOM.render(divNode,document.getElementById('root')) 会警告 现在 12345<script type="text/babel"> const divNode = <div>你好,React</div> const root = ReactDOM.createRoot(document.getElementById('root')) root.render(divNode)</script> 同时,不支持渲染对象 12345678const array = ['动感超人','西瓜超人'];//支持 const listObj = [ {name:'李白',sex:'男'} ...
grid布局的学习
前置 只是个人学习,内容只会记录自己想知道,有问题的知识点 具体可以看看bilibili的@耕耕技术宅-grid布局地址 视频对应的@耕耕技术宅-grid布局ppt地址 学有余力的可以通关下这个小游戏@通过给萝卜浇水，学习 CSS 网格布局 @CSS Grid 网格布局教程- 阮一峰 明确基本概念 下图的基本概念先看看,这个必须要先了解 容器和项目 在grid布局和flex布局身上,都有针对容器和项目的属性,在使用的时候需要注意这些属性是设置在哪里的 容器身上的属性 grid-template-columns grid-template-rows grid ow-gap grid-column-gap grid-gap (3和4的简写) grid-template-areas grid-auto-flow justify-items align-items place-items(8和9的简写) justify-content align-content place-content(11和12的简写) grid-auto-columns grid-auto-rows grid ...
flex1和auto区别-好记性不如烂笔头
好记性不如烂笔头 区别 完全等分布局使用flex:1 根据内容宽度动态分配宽度使用flex:auto 示例 当flex:1时候的样子 当flex:auto时候的样子 12345678910111213141516171819202122232425262728293031<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>flex:1和flex:auto</title> <style> .content{ font-size: ...
React的学习笔记-(Bilibili天禹老师)
React的特点 采用组件化模式,声明式编码,提高开发效率和组件复用率 在React Native中可以使用React语法进行移动端开发(IOS和Android) 使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互 babel用处 es6 => es5 jsx => js 1.你好,react 注意引入顺序 123456789101112131415161718192021222324252627<!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 ...
git merge origin master和git merge master的区别(个人理解)
先说结论git merge origin master 意思是当前的分支,进行合并,合并二个分支分别是远程分支master在本地的副本和本地分支的master git merge master 当前分支于本地所处的master分支进行合并 还有就是 git merge origin master是把origin merge 到 master 上的说法是错误的!!!!!!!!!!!!! git merge实践出真理(放弃,待填坑)准备工作 建立二个分支 stream分支 stream-qiuye分支 三个分支分别在文件添加内容,并提交到远程(图片下面这行字忽略) 分支切换到main分支 前置需要了解origin 并不是指得是远程的仓库，而是指得是远程仓库在本地的一个指针（这个指针有可能过时的）。当我们使用使用merge 的时候，我们进行合并的时候只是上一次fetch 从远程拿到的版本。不是远程仓库的最新版本 在另外一个人向main分支推送了新内容,本地没有更新,并且本地所处main分支情况下进行下面二个操作(为保证效果,) get merge ori ...
使用vite的社区模板来创建对应的项目(比如React17,vue+electron)
安装基础12yarn add npx -gyarn add degit -g @npx可以了解了解 找到对应的模板进行下载 @模板地址大全 我选择这个React17来进行创建模板 复制此模板所在的github作者名称和项目地址 命令行输入 1npx degit 作者名/项目地址 完成
使用backdrop-filter实现elementui官网的模糊滤镜效果的和毛玻璃效果
前置 element-ui官网有一个属性很好看,可以看到,当滚动的时候,文字会被显示白色带阴影背景 你可能有点印象,因为公交车的时候也是类似于这种效果 他们是怎么做的呢?我看到源码使用到了 backdrop-filter background-size background-image 就实现了,很少的属性,达到了不错的效果,值得学习 element-ui开始了解backdrop-filter和filter属性 backdrop-filter属性 可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。 说通俗点就是通过设置A上面的B元素来达到对A模糊或颜色偏移的效果 filter属性 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。 二者区别 backdrop-filter作用于元素的背景(不直接作用于元素,而是通过另外一层元素来达到效果) 作用于元素背后的所有元素 filter直接设置在元素身上 作用于当前元素，并且它的后代元素也会继承 ...
ts泛型,映射,条件类型和类型提取infer和一些常用工具库的说明
Typescript当中的T,K,V到底是个啥 有时候,我们看到下面的代码,当然,这里是简单例子来说 123function identity <T> (value:T) : T { return value;} 其实泛型就是使用字母来代替将要接收的类型,这里的”T”是代表类型的缩写,表示对将要接收类型的一个占位符,占位符可以是任意字母,下面是一些常用的占位符 T(Type) 表示类型 K(Key) 表示对象中键的类型 V(value) 表示对象中值的类型 E(Element) 表示元素类型 如果在函数中使用了泛型,那么我们可以在使用的时候指明类型,也可以不显式指明类型 123456789function identity <T , U>(value: T ,message: U) : T { console.log(message) return value;}//不指定泛型变量的实际类型console.log(identity(20,'动感超人'));//手动指定泛型变量 ...
js的promise的究竟是同步还是异步的问题和promise.all可以同时请求多个接口是错误的回答的原因
个人理解 前景-代码输出结果是什么我们都知道,循环队列的时候,同步任务大于异步任务(异步任务里面的微任务又大于宏任务),那么你猜猜这个代码输出结果是 什么呢 12345678910111213141516<script> setTimeout(() => { console.log(1);}, 0);new Promise(function(resolve,reject){ console.log(2); resolve(); console.log(3);}).then(function(){ console.log(4);}).finally(function(){ console.log(5);});console.log(6);</script> 做出来了吗?我公布下答 答案 12 3 6 4 5 1 前景解析 首先,你知道同步>异步,可是可能不太会区分同步和异步,其实记住下面的异步任务就好,其他就都是同步任 ...
