神影天初-CSDN博客

原创 nvm-win安装与使用

如果已经安装了node，安装软件会提醒，确认后将已安装的node移动到nvm安装路径内。网上应该都可以找到，或者去github搜nvm。，这是一个链接目录，实际是指向上面路径中的实际node版本的目录。的值，这是因为以前安装的node会被移动到nvm路径下，安装基本都是下一步，nvm的安装路径可以修改为。这个链接目录成为当前node版本的新目录了。是node安装的，其它两个是nvm安装的。就是安装时候设置的路径值，应该都在。下安装，否则安装可能会失败。这个链接目录里的内容实际都是。设置node链接路径为。

2023-03-24 16:18:09 588 1

原创 node复制文件夹及文件

或复制文件调用总共三种模式，可以使用按位或的方式同时指定：，。复制文件夹直接复制文件夹使用。将目录的内容复制到目录。复制特定文件或文件夹需要使用函数：函数返回会递归遍历文件夹下的所有文件或文件夹

2022-12-05 18:13:34 1090

原创 html标签分类

html标签分类，元素不根据display分类

2022-10-28 17:11:18 452

原创正则表达式基础

断言的组成之一是边界。对于文本、词或模式，边界可以用来表明它们的起始和终止部分(如先行断言，后行断言及条件表达式)。适合匹配表情，标点符号及特定语言或文字的字母。这些量词匹配默认会尽可能多的匹配。等都可以表示成字符集的形式，代表匹配和记住的范围。正则表达式模式是简单字符和特殊字符构成的。这些代表文本字符串的开始结束及单词的边界。字符类可以区分各种字符。匹配字符集及捕获组和非捕获组以及具名捕获组。可以清楚的查看你的正则表达式是否符合需要。量词表示匹配的字符或表达式的数量。等各自代表特定类型的字符。

2022-09-26 16:12:29 440

原创 CSS伪类介绍

表示设置了 checked 属性的 checkbox 和 radio 元素，设置了 selected 属性的 option 元素，表单的默认提交按钮(type=submit)。link 是链接的初始状态，visited 是链接访问过(点击)之后的状态，hover 是鼠标悬停的状态，active 是激活状态(鼠标主键按下及松开之间的状态)。因为索引是从 1 开始，所以同级兄弟元素的第一个元素就是奇数 1。css伪类就是元素的一种特殊状态，下面的伪类是相关的，可以尝试其中的示例代码看看实际效果。

2022-09-20 17:54:41 1098

原创前端从零搭建简单的工作流

文章目录windows 从零搭建工作流项目创建项目项目初始化gitpackage.jsontsconfig.jsonprettiereslintlint-staged 配合 huskywindows 从零搭建工作流项目以下命令建议在 git-bash 中执行。创建项目# mkdir [projectName]mkdir pro-test && cd pro-test项目初始化git# 初始化Git仓库git init# 创建 .gitignore，编辑该文件例如node

2022-04-01 22:15:16 639

原创防抖与节流

文章目录防抖与节流防抖节流防抖与节流防抖与节流都是高阶函数。防抖是让函数延迟执行，多次点击触发事件以最后一次点击为准。节流是以第一次点击为准，短时间内的多次点击都会被忽略。节流函数是以防抖函数为基础调用的，所以先实现防抖函数。防抖// 防抖函数function debounce(fn, wait, immediate) { // immediate参数是在节流函数中调用传递的，防抖函数中不用 let timeout; // lastTimeInterval 记录两次点击之间的时间

2022-03-28 16:04:13 219

原创伪类与伪元素

文章目录伪类与伪元素比较常见伪类常见伪元素伪类与伪元素比较伪类伪元素使用:使用::，为了兼容也可以使用:代表元素的某个状态信息表示元素的某个部分，通常是实际存在的常见伪类通用:hover:root锚点相关:link:active:visited元素相关:empty:only-child:only-of-type:not():first-child:first-of-type:last-child:last-of-type:n

2022-03-27 18:39:03 606

原创原生js处理多行文本溢出

文章目录介绍示例介绍目前文本溢出的处理可以使用css实现单行及多行溢出显示省略号，但是兼容性可能不太好。最近我发现一个兼容性比较广的方法，那就是getClientRects，大家可以点击链接查看完整的介绍。这里简单介绍一下，对于块元素没什么好说的，主要是对于行内元素(比如a，span)会将每一行文本的位置信息作为ClientRect对象返回，主要包含left，top，right，bottom，width，height等属性。示例<div class="box"> <

2022-01-20 12:31:48 1506

原创 JavaScript事件传播简单介绍

文章目录事件传播事件传播顺序事件传播类型事件捕获事件冒泡示例终止事件传播事件传播事件传播顺序事件传播的顺序是先执行事件捕获，然后执行事件冒泡。事件传播类型事件捕获事件冒泡addEventListener(type, listener, options)用于注册事件监听。type是事件监听的类型，listener是事件监听函数，options是一个可选项，默认值是false，表示在事件冒泡阶段监听事件。options如果是boolean类型，true就是在事件捕获阶段监听事件，fal

2022-01-17 12:40:29 495

原创 javascript浮点数介绍

文章目录介绍图示浮点数形式特殊数值规格化非规格化总结介绍单精度浮点数32位，双精度浮点数64位。其中单精度由1位符号位，8位指数位，23位尾数位组成。双精度由1位符号位，11位指数位，52位尾数位组成。图示以64位浮点数为例，sign表示符号位用S表示，exponent表示指数位用E表示，mantissa表示尾数用M表示。浮点数形式规格化：当指数位E不全为0也不全为1时就是规格化形式浮点数非规格化：当指数位E全为0时就是非规格化形式浮点数特殊数值：当指数位E全是1时就是特殊数值，当尾数M

2022-01-12 23:03:17 2831

原创 jest使用es6语法

jest使用es6安装依赖设置package.json添加jest配置文件添加babel配置文件最后安装依赖// npmnpm i --save-dev jest babel-jest @types/jest @babel/core @babel/preset-env// yarnyarn add -D jest babel-jest @types/jest @babel/core @babel/preset-env// pnpmpnpm add -D jest babel-jest @typ

2021-12-28 10:29:27 673

原创 call, apply, bind的分析与实现

改变函数this指向如何改变函数的this指向自定义实现`call`，`apply`，`bind`如何改变函数的this指向如果是函数声明，那么函数内部的this指向全局对象或者调用该函数的对象。箭头函数的this绑定的是父级作用域内的this使用call，apply，bind可以绑定this指向。其中bind是永久改变this指向并且不会立即执行。apply，call临时改变this指向并且立即执行。apply，call不同之处在于调用的参数形式：call(thisArg, arg1?,

2021-12-25 16:07:06 495

原创 prettier简单介绍

prettierprettier的目标prettier的配置方式prettier的规则prettier的目标prettier不针对代码质量，目的就是格式化代码的样式而不影响功能，并且可格式的文件类型众多。prettier的配置方式prettier配置的方式有很多，同样也支持.prettierignore的过滤package.json中的prettier字段用JSON或YAML写的.prettierrc文件.prettierrc.json, .prettierrc.json5, .pretti

2021-12-21 15:36:27 773

原创 eslint内置规则介绍

内置规则eslint 内置规则介绍eslint 推荐配置eslint 内置规则介绍modules.exports = { // 所有规则页面(https://eslint.org/docs/rules)标记为 ✔ 的规则将会默认开启 extends: ['eslint:recommended'], parserOptions: { ecmaVersion: 'latest', sourceType: 'module', }, /* Rules *代表recommended

2021-12-18 23:25:07 958

原创 vue监听路由

vue监听路由两种方式监听路由vue2监听路由vue3组合式api监听路由两种方式监听路由一种是使用vue2的写法，还有一种是组合式api的写法。vue2监听路由export default defineComponent({ watch: { $route: { handler: (val, oldVal) => { console.log(val); }, immediate: true, }, },});这

2021-12-06 15:55:14 3468

原创 vue3简单处理全屏

处理全屏1. 尝试fullscreenchange事件2. 使用keydown事件3. 最后的收尾处理1. 尝试fullscreenchange事件// script setup tsimport { onBeforeUnmount, ref } from "vue";const isSupport = document.fullscreenEnabled;const isFullscreen = ref(false);const handleFullscreenchange = () =&g

2021-12-02 11:10:07 2028

原创 vscode报错：找不到.d.ts中定义的名称

假如你在写ts的类型时报错：找不到名称 xxx，并且你已经在types或者typings目录中定义好了。那你应该检查你的tsconfig.json的include字段。include数组应该包含所有的你写了ts的文件。比如你的include如下：{ "include": [ "src/**/*.ts", "src/**/*.d.ts", "types/**/*.d.ts" ]}这时你在<project>/build/test.ts文件中使用了ty

2021-11-19 13:56:24 8126

原创 element-ui 点击dialog右上角关闭图标不关闭的问题

网上一些人说不起效是因为 visible 属性没有添加 .sync 修饰符。一般情况下是因为一个 before-close 属性，这个是关闭前的回调，会暂停dialog的关闭。该回调接收一个 done 函数作为参数，必须在回调里执行 done() 才能关闭dialog。如下所示，具体示例可以参考element官网，查看具体怎么使用。参数说明类型before-close关闭前的回调，会暂停 Dialog 的关闭function(done)，done 用于关闭 Dialog

2021-07-29 15:40:58 3767 3

原创 Vue初始渲染的过渡

初始渲染就是在页面刚出现或者刷新的时候实现一些过渡效果，而且默认状态肯定不能是隐藏的，否则无法使用初始渲染。若要使用初始渲染，必须给transition添加 appear attribute或者v-on:appear 钩子<transition appear>...</transition><transition v-on:appear="customAppearHook">...</transition>初始渲染默认和进入过渡一样。

2021-07-09 19:45:47 560

原创 js驼峰命名与短横线命名互转

在js中，驼峰命名一般首字母小写，其它首字母大写的形式。短横线命名所有字母小写，单词与单词之间用短横线连接。搞清楚区别之后就很简单了，使用正则全局匹配大写字母并替换成短横线+小写字母，或者匹配短横线+小写字母替换成大写字母。replace的具体用法参考MDNString.prototype.replace// 驼峰转短横线let str = "testStrName";let newStr = str.replace(/([A-Z])/g, (match, p1, offset, stri

2021-07-09 17:15:30 1560 1

原创安装node，配置npm，yarn，pnpm

输入网址：https://nodejs.org/zh-cn/

2021-06-07 14:17:28 3143 3

原创 js正则表达式验证IP地址

/^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])$/支持0.0.0.0到255.255.255.255(没有前导0)菜鸟工具提供的正则表达式:/^((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))$/支持000.000.000.000到255.255.255.255(可以含有前导0)..

2020-09-27 09:42:47 1152

原创计算元素的位置

元素位置的计算主要是一个相对的概念, 相对于父级元素, 相对于父级定位元素, 相对于body等.所以元素分为了定位元素(position: 不是static)和普通元素(postion: static)滚动元素是普通元素的一种, 由于父级元素框架限制, 而内容溢出导致的首先说一下屏幕, window.screen返回的对象就是你的屏幕信息参数{ availHeight: 834, availLeft: 0, availTop: 0, availWidth:

2020-09-06 09:36:55 738

原创 Vue基础(三)模板语法

插值 1. 文本vue 使用 "{{" 和 "}}" 作为数据绑定的文本插值, 这个也可以修改成你习惯的形式, 比如:<div id="app"> ${message + ' ' + vueStr}</div><script>new Vue({ data: { message: 'Hello', vueStr: 'Vue' }, delimiters: ['${', '}']...

2020-08-28 16:02:34 122

原创 Vue基础(二)实例

Vue实例化是通过 new Vue()实现的, Vue3.0就不是这么干了, 当然这是以后的事.Vue实例化就会将数据遍历通过 Object.defineProperty() 来让属性获取getter和setter, 从而可以监听数据的改变.这个也和 Vue3.0有很大的不同, 因为 Object.defineProperty() 的限制 Vue 不能检测数组和对象的变化. 所以 Vue 做了一些额外的工作.有关 Vue 响应式的一些原理可以在以后参考:https://cn.vuejs.org/..

2020-08-27 09:43:28 119

原创 Vue基础(一)安装

这里主要涉及Vue核心的一些功能, 对 vue 的其他生态插件不作为重点.Vue的学习路线更加简单, 需要html, css及 javascript 作为基础就可以了.对于新手及小型项目来说, 直接引入vue脚本就够了<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>在用 Vue 构建大型应用时推荐使用 NPM 安装, 这里就需要涉及到 Node 的相关知识了# 最新稳定版

2020-08-26 17:11:00 145

原创 js去除字符串中的空白字符

上下文中的空白字符是所有的空白字符(space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR等）String.prototype.trim = function () { return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');};上面就是官方源码用于兼容旧环境实现的 trim() 方法, 用于去除字符串左右两端的字符串详情见:https://developer.mozi...

2020-07-31 17:26:25 1135

原创 JavaScript原生实现事件监听及手动触发

我们有时候会需要通过js修改表单元素的状态, 因为不是通过页面交互而是js操作的, 所以不会触发我们写的监听事件.这时就需要通过js手动触发监听事件.jquery实现方法就是trigger('eventType')原生实现:<input type="checkbox" id="chk">document.querySelector('#chk').addEventListener('change', function() { console.log(this.chec

2020-07-30 09:17:43 11655 1

原创 javascript原生获取多选下拉框选中的值

下拉框一般都是单选的, 所以直接通过document.querySelector('select').value就可以知道选中的值了.如果只是想判断是否有选中的话还可以通过document.querySelector('select').selectedIndex, 这个属性是一个数字,表明第一个被选中的值的索引, 所以如果返回为-1说明没有option被选中.如果select添加了multiple属性, 那么可以通过Shift或Ctrl像操作文件一样操作select的选项来多选.获取多选下拉框

2020-07-29 16:01:56 3229

原创 Win10系统打开CMD一片漆黑

不知道怎么回事，我的cmd和vscode产生了一点冲突。在vscode中通过项目打开终端会直接打开cmd，而不是在vscode的终端区域。后来百度一波，发现可以设置cmd，取消勾选使用旧版控制台。这样VScode的终端可以正常打开了。后来，我直接打开cmd，发现页面一片漆黑，啥也没有，但是我用鼠标选中左上角区域的时候可以看到光标，说明是有内容的，只不过无法看到而已。再次百度一波，网上有的人说是因为背景和文字颜色一致导致的。我一看就很有道理，于是设置了上图的颜色页面，分别设置了屏幕文字的颜色和屏幕背景

2020-07-24 16:16:01 769 1

原创使用bootstrap-datetimepicker遇到的问题

遇到的那些样式的问题: 刚开始我明明用的是bootstrap3.X的,而且是按照官方demo写的,但是还是出现一些奇葩的样式问题,可能和我引入的其它文件产生了冲突,查看源码后96行我找到bootcssVer这个属性,所以如果在初始化时将bootcssVer:3传入,就会按照bootstrap3.X. 传入bootcssVer: 2就会按照bootstrap2.X的样式处理.pickerPosition可以指定四个方向,先上下后左右即(top,bottom和left,right)的组合,不支持默认判断最.

2020-06-19 10:23:12 2283

一个简易的不断旋转的地球仪

一个简易的不断旋转运动的立方体

Vue中的父组件在不使用render函数的情况下怎么渲染子组件的插槽内容