冰雪为融-CSDN博客

转载 TypeScript中的泛型工具

原文链接：https://juejin.cn/post/6844904147167215624#heading-1本期涉及的操作符如下：Partial Required Readonly Pick<T,K extends keyof T> Record<K extends keyof any, T> Exclude<T,U> Extract<T,U> Omit<T, K extends keyof any>首先还是先讲述一.

2021-07-23 16:24:23 537

转载 typescript 中的keyof、 in

keyof定义keyof与Object.keys略有相似，只是 keyof 是取 interface 的键，而且 keyof 取到键后会保存为联合类型。interface iUserInfo { name: string; age: number;}type keys = keyof iUserInfo;keyof 的简单栗子我们有这样一个需求，实现一个函数 getValue 取得对象的 value。在未接触 keyof 时，我们一般会这样写：fu.

2021-07-23 16:18:03 9009 6

转载前端路由原理

前言前端三大框架 Angular、React、Vue，它们的路由解决方案 angular/router、react-router、vue-router 都是基于前端路由原理进行封装实现的，因此将前端路由原理进行了解和掌握是很有必要的，因为我们再使用的过程中也难免会遇到一些坑，一旦我们掌握了它的实现原理，那么就能在开发中对路由的使用更加游刃有余。一、什么是路由？路由的概念起源于服务端，在以前前后端不分离的时候，由后端来控制路由，当接收到客户端发来的 HTTP 请求，就会根据所请求的相应 UR.

2021-07-14 11:22:08 377

转载 vue3重点！一文了解Composition API新特性：ref、toRef、toRefs

在上一篇文章中，我们初步了解了vue3的新特性，今天，我们将延续Composition API的话题，来了解Composition API带来的新特性：ref、toRef和toRefs。下面开始进入本文的讲解✨一、????如何理解ref、toRef和toRefs1、ref、toRef和toRefs是什么（1）ref1）ref是什么ref可以生成值类型（即基本数据类型）的响应式数据； ref可以用于模板和reactive； ref通过.value来修改值（一...

2021-07-07 10:53:35 943

转载用Vue.extend()来做一个全局提示组件

相信很多人用vuejs构建单页应用时都会用到一些全局方法，比如发ajax请求时喜欢用axios挂载到vue原型上，如下：// 1 引入vue和axiosimport Vue from 'vue'import axios from 'axios'// 2 对axios的一些封装// code ...// 3 然后挂载到原型上Vue.prototype.$axios = axios用的时候就直接上this.$axios// 用axios.get()方法可以这样用this.$ax

2021-06-29 16:11:04 304

原创 vue 中动态添加html元素并绑定点击事件onclick

方法中动态添加html元素getWindContent(){ return `</div> <span style="cursor: pointer;" onclick="closeMaker()"> <img class="img" src="/assets/svg/close-white.svg" /> </span> </div>`}mounted中window.closeMak

2021-06-28 09:48:27 14352 5

转载 Vue + Scss 动态切换主题颜色实现换肤

根据预设的配色方案，在前端实现动态切换系统主题颜色。大概的思路就是给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux或接口来保存用户选择的主题。一、首先需要给项目下载配置Scss1.安装依赖npm installnode-sasssass-loader --save-dev2.找到build中webpack.base.conf.js,在rules中添加scss规则{..

2021-06-25 11:06:26 5553 8

转载 Vue中:error ‘XXXXX‘ is not defined no-undef解决办法

报错内容:× Client Compiled with some errors in 7.42s√ Server Compiled successfully in 6.05s ERROR Failed to compile with 1 errors friendly-errors 17:33:15 ERROR in ./pa

2021-06-11 14:56:08 8703

转载 OpenLayers 4 ol.source 详解

source 是 Layer 的重要组成部分，表示图层的来源，也就是服务地址。除了在构造函数中指定外，还可以使用 layer.setSource(source) 稍后指定。一、包含的类型ol.source.BingMaps ，必应地图的切片数据，继承自ol.source.TileImage； ol.source.Cluster，聚簇矢量数据，继承自ol.source.Vector； ol.source.ImageCanvas，数据来源是一个 canvas 元素，其中的数据是图片，继承自 ol.

2021-06-09 11:18:21 1132

原创 vue 预览pdf

2021-06-08 11:40:29 99

转载 TS学习笔记：命名空间

在确保我们创建的变量不会泄露至全局变量中，我们以前曾采用过这种代码组织形式：(function(someObj){ someObj.age = 18;})(someObj || someObj = {});但在基于文件模块的项目中，我们无须担心这一点，此种方式，适合用于合理的函数逻辑分组中，在 TypeScript 中，提供了 namespace 关键字来描述这种分组，在 typescript 编译器进行编译过后，命名空间也就被编译成了上述示例那样的代码。命名空间的声明Typ

2021-05-13 14:20:26 398

转载 TS学习笔记（十）：命名空间

在确保我们创建的变量不会泄露至全局变量中，我们以前曾采用过这种代码组织形式： (function(someObj){ someObj.age = 18;})(someObj || someObj = {}); 复制代码但在基于文件模块的项目中，我们无须担心这一点，此种方式，适合用于合理的函数逻辑分组中，在 TypeScript 中，提供了 namespace 关键字来描述这种分组，在 typescript 编译器进行编译过后，命名空间也就被编译成了...

2021-05-13 14:15:07 498

原创 watch和watchEffect

学习笔记记录（内容来源于官网）watchvue3watch用法和vue变化也不是特别大，vue3支持侦听多个数据源用法没太大变化：wach是一个钩子函数，支持传入三个参数（个人理解）1、监听对象2、回调函数（可以拿到当前值，和上一次的值）3、对象：是否深度监控属性变化等{deep:true}// 侦听一个 getterconst state = reactive({ count: 0 })watch( () => state.count, (count, pr

2021-05-12 15:08:00 585

原创 vue3 computed和watch

学习笔记记录（内容来源于官网）computedvue3 计算属性和vue2变化不大，只需要注意，它返回的是一个响应式的ref对象,所以在使用的时候需要.value(模板中使用不需要，会自动展开)const count = ref(1)const plusOne = computed(() => count.value++)console.log(plusOne.value) // 2plusOne.value++ // error也支持通过set和get创建可写的ref对象

2021-05-12 11:32:51 223

原创 vue3 setup使用（详细）

官网vue3-setup总结：1、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）2、setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数3、执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）4、与模板一起使用：

2021-05-10 17:34:50 58592 6

原创 vue props和attrs

vue3props 要先声明才能取值，attrs不用声明直接使用（$attrs 包含 class and style attribute）props 不包含事件，attrs包含props 支持 String 以外的类型，attrs只有 String 类型props 没有声明的属性，会在 attrs 里，若在 props 内声明了该属性，那么 attrs 里就不会出现该属性vue2与vue3的不同包含所有父作用域的绑定 (class 和 style 除外)props 不包含事件，attrs

2021-05-10 16:39:09 895

转载 TS之类型断言

类型断言用于手动指定一个值的类型。一、语法值 as 类型二、用途2.1 将一个联合类型断言为其中一个类型interface Cat { name:string; run():void;}interface Fish { name:string; swim():void;}function getName(animal:Cat|Fish):string{ return animal.name;}只能访问联合属性中共有的属性和方法——

2021-05-10 14:29:46 8960

原创 [import ... from」、「 import ... = require()」和「import(path: string)」有什么区别？

1、import ... from2、import(path: string)3、import ... = require()前两个都是ES6的模块语法，第3个import ... = require() 是ts的语法使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块第1个：import命令只能在模块的顶层，不能在代码块之中（比如，在if代码块之中，或在函数之中）第2个：ES2020提案引入import()函数，支持动态加载模块.

2021-04-13 15:48:17 832

转载 Vue Function-based API RFC

2020 年一月又注：RFC 已经被完全重写，最新版本请以https://composition-api.vuejs.org/为准。以下内容会有部分与最新的 API 有出入，但依然可以帮助理解。---译注：这是 3.0 最重要的 RFC，因此特意翻译成中文。概要将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计。基本例子import { ref, computed, watch, onMounted } from 'vue'const App = { te..

2021-04-12 14:40:38 169

转载 vue3 reactive函数用法

reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新。不同的是ref用于基本数据类型，而reactive是用于复杂数据类型，比如对象和数组例如：定义一个对象类型的变量user<template><div><p>{{ user }}</p><button @click="increase">click me! one year later</button>...

2021-04-12 10:03:11 3177

原创修改webkit内核浏览器滚动条样式（修改element-ui table样式）

webkit浏览器css设置滚动条主要有下面7个属性1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的2. ::-webkit-scrollbar-button 滚动条两端的按钮3. ::-webkit-scrollbar-track 外层轨道4. ::-webkit-scrollbar-track-piece 内层滚动槽5. ::-webkit-scrollbar-thumb 滚动的滑块6. ::-webkit-scrollbar-corner 边..

2021-04-07 14:17:31 3389

转载 vue3.0 ------ createApp()

vue3.0 ------ createApp()在2.X版本中创建一个vue 实例是通过 new Vue()来实现的，到了3.X中则是通过使用createApp这个 API返回一个应用实例，并且可以通过链条的方式继续调用其他的方法参数components optionsroot props例如：我在main.js中定义了username，之后整个项目中，都可以props接收username，并使用...

2021-04-06 17:59:41 1241

转载 vue原理之-神奇的Object.defineProperty

这个方法了不起啊。。vue.js和avalon.js 都是通过它实现双向绑定的。。而且Object.observe也被草案发起人撤回了。。所以defineProperty更有必要了解一下了几行代码看他怎么用 var a= {} Object.defineProperty(a,"b",{ value:123 }) console.log(a.b);//123很简单，，它接受三个参数，而且都是必填的。。传入参数第一个参数:目标对象第二个参数...

2021-03-31 17:21:49 224

原创将element-ui table封装，和pagination封装到一起

用过antdv的table组件之后，再用element 的table实在不方便，就封装了一下，模仿antdv的使用方法，将分页组件也封入到组件中原始用法：缺点：有多少列就要写多少个el-table-column，分页组件也需要每次引入，同一段代码不断的重复写 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column

2021-03-30 18:17:51 817 1

转载 git 分支重命名

假设分支名称为oldName想要修改为 newName1. 本地分支重命名(还没有推送到远程)git branch -m oldName newName2. 远程分支重命名 (已经推送远程-假设本地分支和远程对应分支名称相同)删除远程分支gitpush--deleteoriginoldName修改本地分支名git branch -moldName newName推送本地分支gitpushoriginnewName方法二：a. 重命名远程分支对...

2021-03-23 14:32:18 226

转载 vue3 ref函数

我们知道，在vue3.0引入了composition API,setup函数是其核心函数在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI例如：使用ref函数定义一个变量countimport { ref } from 'vue';function useChangeCount() { let count = ref(0); function change_count() { count.value += 1

2021-03-11 17:48:25 2039

原创组件双向数据绑定 v-model

通过v-model控制模态框的显示隐藏示例：<template> <a-modal title="" :centered="true" :visible.sync="visible" :mask="false" :footer="null" :width="width" @ok="handleOk" @cancel="handleCancel" > <div class="modal-ti

2021-02-08 17:57:22 253

转载理解redux-thunk

理解redux-thunk前言前面我们已经用了三篇文章详细介绍了 Redux 的概念、原理及 Middleware 机制。今天我们来看一个 Redux 官方出品的 middleware 库：redux-thunk。可能大部分用了 Redux 的项目都会用到redux-thunk，但你有没有想过这个库到底是用来干嘛的？如果我不用它行不行？这篇文章我们就来详细聊一下这个库。其实很早之前我就看过它的代码，看到它的代码量的时候被震惊了，没想到一个 GitHub 上 Star 数过万的项目，总的代码行数只

2021-01-27 22:18:04 539

转载 WebStorm 警告: Promise returned from xxx is ignored 解决办法

WebStorm 提示内容:Promise returned from xxx is ignored less... (Ctrl+F1)This inspection reports function calls that return a Promise that is not later used. These are usually unintended and indicate an error.这是因为调用的函数加了async, 而async 声明的函数返回的是一个promis...

2021-01-13 14:17:01 3681 1

原创 gitlab迁移项目带提交记录

带历史提交记录的迁移命令 git clone --bare [旧仓库地址] 生成.git文件在.git文件下git push --mirror [新仓库地址]、

2021-01-06 11:52:36 570

原创 git 将本地代码添加到远程仓库的步骤

git init git add . git commit -m "描述" git remote add origin url地址 git push --set-upstream origin master git push

2021-01-04 16:15:02 636

转载 git cherry-pick的使用教程

对于多分支的代码库，将代码从一个分支转移到另一个分支是常见需求。这时分两种情况。一种情况是，你需要另一个分支的所有代码变动，那么就采用合并（git merge）。另一种情况是，你只需要部分代码变动（某几个提交），这时可以采用 Cherry pick。一、基本用法git cherry-pick命令的作用，就是将指定的提交（commit）应用于其他分支。 $ git cherry-pick <commitHash> 上面命令就会将指定的提交commitHash，应用于

2020-12-25 13:12:14 502

转载 git merge的三种操作merge, squash merge, 和rebase merge

原链接：https://www.jianshu.com/p/ff1877c5864egit merge的三种操作merge, squash merge, 和rebase merge举例来说：假设在master分支的B点拉出一个新的分支dev，经过一段时间开发后：master分支上有两个新的提交M1和M2 dev分支上有三个提交D1，D2，和D3如下图所示：image.png现在我们完成了dev分支的开发测试工作，需要把dev分支合并回master分支。merg..

2020-12-23 17:10:44 5375

原创手动实现Promise.all

想要实现Promise.all()功能，关键点/** 1、接受一个数组作为参数，或者具有 Iterator 接口的参数* 2、参数支持Promise对象和普通的对象,如果不是Promise对象就会调用Promise.resolve，将参数转为Promise实例* 3、返回一个Promise对象,且返回的每个成员都是Promise实例* 4、只有全部成功才算成功** */Promise.all1 = function (promises) { return new Promis.

2020-12-23 14:19:51 307

转载 Content Security Policy

跨域脚本攻击XSS是最常见、危害最大的网页安全漏洞。为了防止它们，要采取很多编程措施，非常麻烦。很多人提出，能不能根本上解决问题，浏览器自动禁止外部注入恶意脚本？这就是"网页安全政策"（Content Security Policy，缩写 CSP）的来历。本文详细介绍如何使用 CSP 防止 XSS 攻击。一、简介CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。CSP 大大增强..

2020-12-23 11:27:14 220

转载 editorconfig文件是什么？

一、.editorconfig文件是什么？在项目里，大多时候都能看到.editorconfig文件，刚开始总是忽视掉它，认为它不太重要。但是，它的存在，必定有它的理由，于是，抽空来研究一下，它是什么，能做什么。官网是这么介绍EditorConfig的，“EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。EditorConfig项目由用于定义编码样式的文件格式和一组文本编辑器插件组成，这些插件使编辑器能够读取文件格式并遵循定义的样式。EditorConfig文件.

2020-12-09 14:44:34 8161

CSS3轮播图

空空如也