- 博客(158)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 html+css+js实现星空特效
html+css+js实现星空特效废话不多说直接上代码，效果是一个星空旋转和文字逐渐出现的效果，文字是逐渐出现的，星空中的小球是旋转的效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
2020-09-04 22:02:39
50962
26
原创 HTML5 CSS3做的一个静态的苹果官网首页
HTML5 CSS3做的一个静态的苹果官网首页简介以及使用的工具**介绍：**这次的一个项目是我年后学习HTML和CSS一个月后做的一个阶段性的项目，花了一整天，这里只讲解写代码时候的具体思维，分析布局的。具体的代码我已经上传到我的资源中。需要的可以去下载，或者加下作者的qq：1349869599，可以私发给你，不收取米，纯属相互交流，共同学习前端。交个朋友。使用的工具使用的具体工具是vscode浏览器用的是谷歌浏览器。大家也可以使用自己喜欢的软件，反正能运行就行。头部导航栏讲解PC端（电脑）：
2020-06-21 22:42:32
9039
4
原创 git cherry-pick的注意事项
git cherry-pick的注意事项对于多分支的代码库，将代码从一个分支转移到另一个分支是常见需求。这时分两种情况。一种情况是，你需要另一个分支的所有代码变动，那么就采用合并（git merge）。另一种情况是，你只需要部分代码变动（某几个提交），这时可以采用 Cherry pick。git cherry-pick命令的作用，就是将指定的提交（commit）应用于其他分支。 git cherry-pick <commitHash>commitHash为你在另外一个分支提交的分支
2022-04-22 14:41:10
489
原创 git 合并两个分支
这里讲解具体的思想，具体的提交命令百度上有。目前的场景是将两个非master上的分支进行合并，并且不造成冲突。比如现在有两个分支a，b。现在将b合并到a首先及将b分支上的代码clone下来，并且提交到新创建的分支c（这是为了不冲突）提交到c后，本地新建一个a分支并将其与远程a分支进行关联。切换到a分支。进行git merge c。成功后再将merge的代码push到远程a分支。这样就不用担心冲突了。...
2022-04-19 11:26:52
4875
转载 react 17最新生命周期
在17版本中废除的生命周期有：componentWillMount，componentwillReceiveProps，componentWillUpdate新增的生命周期有：getDerivedStateFromProps(nextProps, prevState)生命周期顺序Mounting 挂载顺序(初始化)constructor(props)：初始化 state 和 props 数据新增 static getDerivedStateFromProps(nextProps, prevSt.
2022-03-19 23:12:45
1406
原创 js如何将任意类型转换为布尔类型
如何把一个任意类型的值转换为布尔类型？用！！ 一个！是取非 再一个！又取非 相当于把这个数据转换为boolen类型了export function isLogin() { return !!cookie.load('token')}下面列举一下相关常用套路：// 强制转换为Boolean 用 !!var bool = !!"c";console.log(typeof bool); // boolean// 强制转换为Number 用 +var num = +"1234";cons
2021-07-07 10:25:48
468
转载 Vue过渡mode属性踩坑
近期学习Vue的过渡效果的时候，mode属性的"in-out"、"out-in"设置了不起作用，官网上的例子让我看了有点迷，问题解决后以此文记录之。首先我们看一下vue中文文档的说法根据这样的描述我写出了如下代码demo<style type="text/css"> .on-enter-active,.off-enter-active{ transition: 2s ease; } .on-leave-active,.off-leave-active{
2021-07-06 09:38:35
1773
原创 aciveated钩子函数
当我们运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，而写在created或mounted中其只会在首次加载该组件的时候起作用。
2021-07-05 10:18:27
102
转载 Node.js的process模块
process模块用来与当前进程互动，可以通过全局变量process访问，不必使用require命令加载。它是一个EventEmitter对象的实例。属性process对象提供一系列属性，用于返回系统信息。process.pid：当前进程的进程号。process.version：Node的版本，比如v0.10.18。process.platform：当前系统平台，比如Linux。process.title：默认值为“node”，可以自定义该值。process.argv：当前进程的命令行参数数组
2021-06-16 15:59:59
814
转载 JavaScript----Object.entries()
Object.entries()Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。通俗点就是 Object.entries() 可以把一个对象的键值以数组的形式遍历出来，结果和 for…in 一致，但不会遍历原型属性。示例1 – 传入对象const obj = { foo: 'bar', baz: 'abc' }; console.log(Object.e
2021-06-06 14:39:26
383
原创 Vue3的vue-router4的用法
再vue-cil4的脚手架里面先下载vue-router4的路由插件npm i vue-router@next在main.js中全局使用如下：import { createApp } from 'vue'import App from './App.vue'import './index.css'import {createRouter, createWebHashHistory} from 'vue-router'import Dos from './components/Dos.vue'
2021-05-23 20:43:02
2033
转载 Vue中v-model结合checkbox类型
Vue中v-model结合checkbox类型1.单选框<body> <div id="app"> <label for="agree"> <input type="checkbox" id="agree" v-model="isAgree">同意协议 </label> <h2>您选择的是：{{isAgree}}</h2> &
2021-05-23 15:39:56
278
原创 vue3的transition类名变更
过渡类名的改变：v-enter → v-enter-fromv-leave → v-leave-fromVue2中过度流程图：图中两个起始类名发生变化变化后的过渡类：v-enter-from v-enter-active v-enter-to v-leave-from v-leave-activev-leave-to 自定义过渡类名的属性也相应改变了：leave-class被重命名为leave-from-class enter-class被重命名为enter-from-
2021-05-13 15:15:59
600
3
原创 vue3的自定义指令API
vue3中指令api和组件保持一致，具体表现在：bind → beforeMountinserted → mountedbeforeUpdate: new! 元素自身更新前调用, 和组件生命周期钩子很像update → removed! 和updated基本相同，因此被移除之，使用updated代替。componentUpdated → updatedbeforeUnmount new! 和组件生命周期钩子相似, 元素将要被移除之前调用。unbind → unm
2021-05-13 14:43:58
518
2
原创 vue3函数式组件定义的新方法以及异步组件使用的变化
函数式组件仅能通过简单函数方式创建，functional选项废弃。函数式组件变化较大，主要有以下几点：性能提升在vue3中可忽略不计，所以vue3中推荐使用状态组件函数时组件仅能通过纯函数形式声明，接收props和context两个参数SFC中不能添加functional特性声明函数是组件{ functional: true }组件选项移除。声明一个函数式组件，Functional.vue<script>import { h } from 'vue'const Heading
2021-05-12 15:44:38
1762
1
转载 Vue3.x 中 v-model 变更
1、变更内容非兼容：01、用于自定义组件时，v-model prop 和事件默认名称已更改：prop：value -> modelValue；event：input -> update:modelValue；02、v-bind 的 .sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替；新增01、现在可以在同一个组件上使用多个 v-model 进行双向绑定；02、现在可以自定义 v-model 修饰符。二、详细介绍在 Vue 2.0 发布后，开发者
2021-05-11 19:54:47
1446
原创 vue3的Global API 改为应用程序实例调用以及可做摇树优化
Global APIvue2中有很多全局api可以改变vue的行为，比如Vue.component等。这导致一些问题：vue2没有app概念，new Vue()得到的根实例被作为app，这样的话所有创建的根实例是共享相同的全局配置，这在测试时会污染其他测试用例，导致测试变得困难。全局配置也导致没有办法在单页面创建不同全局配置的多个app实例。vue3中使用createApp返回app实例，由它暴露一系列全局api。//默认初始化的情况是这样的import { createApp } from '
2021-05-11 16:32:57
1292
2
原创 Vue3的Emits Component Option和自定义渲染器
文章目录Emits Component Option自定义事件Emits Component Option自定义事件vue3中组件发送的自定义事件需要定义在emits选项中：原若自定义的事件和原生事件重名则会触发两次，比如click更好的指示组件工作方式对象形式事件校验比如：//子组件<template> <div @click="$emit('my-click')">//将定义的事件发送给父组件 <h3>自定义事件</h3>
2021-05-10 20:51:22
1365
1
原创 vue3中的Teleport传送门
传送门组件提供一种简洁的方式可以指定它里面内容的父元素。使用方法：<teleport to='body'>// to：要移动到的元素下面， </teleport>看个案例：//子组件：<template> <div> <button @click="modelOpen=true">弹出一个窗口</button> <teleport to='body'>
2021-05-10 16:55:34
401
原创 Vue3.0的Composition API
Composition API 的灵感来自于 React Hooks ，是比 mixin 更强大的存在。它可以提高代码逻辑的可复用性，从而实现与模板的无关性；同时函数式的编程使代码的可压缩性更强。另外，把 Reactivity 模块独立开来，意味着 Vue3.0 的响应式模块可以与其他框架相组合。第一步首先先定义setup函数在Vue3中，定义 methods、watch、computed、data数据 等都放在了 setup() 函数中。setup()函数会在created()生命周期之前执行。
2021-05-08 20:07:54
413
3
原创 Vue3.0使用vite创建项目
Vue3.0使用vite创建项目第一步：首先安装vite npm install -g create-vite-app第二步：创建项目create-vite-app kevin-01第三步：切换到项目cd kevin-01第四步：下载依赖npm install启动：npm run dev
2021-05-08 13:42:25
1337
转载 Vue cil3使用postcss-plugin-px2rem达到适配的效果
安装 npm i postcss-plugin-px2rem --save -devpackage.json中添加配置（组件中px转rem才生效）在package.json、package.json、package.json中设置很重要"postcss-plugin-px2rem": { "rootValue": 37.5, "unitPrecision": 5, "propBlackList": [ "font-size"
2021-04-25 11:01:39
318
原创 记录Array的fill方法
今天在刷算法的时候，看解析，发现了Array(n).fill(‘a’)这样的用法。这属于ES6的一种用法。Array(n)很明显就是定义一个数组，里面有n个元素。fill()方法将一个数组的所有元素从开始索引填充到具有静态值的结束索引，语法为：arr.fill(value)arr.fill(value, start)arr.fill(value, start, end)Array(n).fill(‘a’)就是声明一个值全为a 的数组。...
2021-04-14 20:23:45
375
原创 js node的nodetype属性
使用nodeType属性返回值可以判断一个节点的类型：最重要的节点类型是：元素类型—————>节点类型元素element ———>1属性attr———>2文本text ———>3注释comments———>8文档document ———> 9...
2021-03-25 09:38:10
478
原创 display:table和display:table-cell实现单行，多行文本垂直居中
一个栏目的信息标题有长有短，短的一行，长的两行，但都要求垂直居中，像这样：一般的思路就是高度等于行高，但是这个仅适用于单行文本，flex布局也只是对元素可以设置垂直居中，不作用于文本。都不适用于像这个例子的，同一位置的不同场景。经过百度的指点，终于找到了比较完美的解决方法，那就是：结合使用display:table和display:table-cell，遂速记之<div> <p> hello world <br /> hello world <br
2021-03-12 09:57:54
392
原创 Vue项目中axios请求的时候使用localStorage去拼接报的401错误
在我上一篇博客所说的项目中的userinfo组件中，当在请求的时候会发生401错误，我们只要添加上请求头即可。 Headers : { 'Authorization': 'Bearer ' + localStorage.getItem("token"), },
2021-03-09 17:06:28
1012
原创 Vue项目中登陆和注册页面的数据判断
Vue项目中登陆和注册页面的数据判断本次讲解一下在Vue项目中注册页面和登陆页面中关于输入数据的判断。以我自己做的一个仿某站项目为例。这是每个输入框的组件<template> <div> <van-cell-group> <van-field v-model="content" :label="label" :rule="rule" :placeholder="placeholder" :type="type"/> &l
2021-03-09 16:36:26
1193
转载 js test方法
test方法返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式。rgexp.test(str)参数rgexp必选项。包含正则表达式模式或可用标志的正则表达式对象。str必选项。要在其上测试查找的字符串。说明test 方法检查在字符串中是否存在一个模式，如果存在则返回 true，否则就返回 false。全局 RegExp 对象的属性不由 test 方法来修改。示例function TestDemo(re, s){ var s1; // 声明变量。
2021-03-09 15:22:21
944
原创 剑指offer——跳台阶扩展问题
题目描述一只青蛙一次可以跳上1级台阶，也可以跳上2级……它也可以跳上n级。求该青蛙跳上一个n级的台阶总共有多少种跳法。示例1输入3返回值4假设跳 n 级台阶的跳法数量是 f(n)个。那么根据题意，青蛙可能从 n-1 级直接跳上来，也可能从 n-2 级直接跳上来，依次类推：f(n) = f(n - 1) + f(n - 2) + … + f(1)同理：f(n - 1) = f(n - 2) + f(n - 3) + … + f(1)所以，将公式 1 中的f(n - 2) + f(n - 3
2021-03-09 13:09:17
130
原创 剑指offer——青蛙跳台阶(斐波拉数列解法)
题目描述一只青蛙一次可以跳上1级台阶，也可以跳上2级。求该青蛙跳上一个n级的台阶总共有多少种跳法（先后次序不同算不同的结果）。示例1输入1返回值1示例2输入4返回值5这题其实就是在求斐波那契数列。理解起来也很简单。假设跳到 n 级台阶有 f(n)种方法。根据题目，青蛙在跳上 n 级时有 2 种方法：从 n - 1 级跳 1 级上来从 n - 2 级跳 2 级上来青蛙跳到 n- 1 级有 f(n-1)种方法，跳到 n- 2 级有 f(n-2)种方法。所以 f(n) = f(n -
2021-03-09 11:43:04
116
原创 剑指offer——斐波拉数列(备忘录算法)
题目描述大家都知道斐波那契数列，现在要求输入一个整数n，请你输出斐波那契数列的第n项（从0开始，第0项为0，第1项是1）。n\leq 39n≤39输入4输出3看到斐波拉数列即可得出：根据数学定义：f(n) = f(n - 1) + f(n - 2)，代码可以实现为递归形式。但是若我们采用传统的递归，则会使得时间复杂度为O(2^n)，运算的时间会非常大，在牛客中就会超时。传统算法：//超时 <script> function Fibonacci(n){
2021-03-09 11:17:57
540
转载 通过几个实例理解 JS回调函数 callback
基本理解一个概念回调函数回头再调用函数，等主干事情干完了，再回头干分支上的事情。官方定义A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.实例1//定义主函数，回调函数作为参数function A(callback) { callback(); console.lo
2021-03-06 14:58:50
304
原创 前端中的广播通信——BroadcastChannel
我们经常会用postMessage来实现页面间的通信，但这种方式更像是点对点的通信。但是当我们使用广播通信时我们只要在一个页面发送信息，其他所有的页面都能接收到这条信息，但是前提是同源页面。下面的方式就可以创建一个标识为kevin的频道：const bc = new BroadcastChannel('kevin');各个页面可以通过onmessage来监听被广播的消息：bc.onmessage = function (e) { const data = e.data; const
2021-03-06 10:20:50
2448
原创 剑指offer——用两个栈实现队列（js）
题目描述：用两个栈来实现一个队列，完成队列的Push和Pop操作。 队列中的元素为int类型。原题链接：用两个栈实现队列该题要求我们使用两个栈来实现一个队列，我们都知道栈的特性是后进先出，而队列的特性是先进先出。所以我用一个栈来表示进栈另外一个栈表示出栈。入上图所示现有元素1，2，3进instack栈，在出栈的时候，instack出栈的顺序为3，2，1。然后将instack出战的元素，依次放入outstack中，则当outstack栈出栈的时候元素的出栈顺序为1，2，3。所以整个元素进栈的时候是1
2021-03-05 11:27:01
188
1
原创 剑指offer——重建二叉树
题目描述：输入某二叉树的前序遍历和中序遍历的结果，请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2,1,5,3,8,6}，则重建二叉树并返回。输入：[1,2,3,4,5,6,7],[3,2,4,1,6,5,7]输出：{1,2,5,3,4,6,7}我们先看一个比较简单的二叉树：该二叉树的前序遍历是：12453，中序遍历是42513。我们知道前序遍历的第一个元素就是根节点。而在中序遍历中位于根
2021-03-05 10:53:24
127
1
原创 剑指offer——从头到尾打印链表
题目描述输入一个链表，按链表从尾到头的顺序返回一个ArrayList。输入：{67,0,24,58}输出：[58,24,0,67]本题的解题思想是将链表转换为数组，然后使用数组中的reverse方法或者使用pop方法将末尾的元素依次放入另外一个数组中，然后返回数组即可。/*function ListNode(x){ this.val = x; this.next = null;}*/function printListFromTailToHead(head){ /
2021-03-04 14:36:07
110
1
原创 js实现链表
<!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>Doc
2021-03-04 10:04:29
88
2
原创 剑指offer——替换空格（js）
题目描述请实现一个函数，将一个字符串中的每个空格替换成“%20”。例如，当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。本题有很多种解法，在js代码中很简单，直接使用字符串中的替换replace方法即可，但是要注意，replace() 是替换与正则表达式匹配的子串所以我们在替换的时候，要写出匹配字符串中空格的正则表达式。/** * 代码中的类名、方法名、参数名已经指定，请勿修改，直接返回方法规定的值即可 * * * @param s strin
2021-03-02 11:19:41
182
原创 剑指offer题库——二维数组的查找（JS代码）
题目描述在一个二维数组中（每个一维数组的长度相同），每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。示例1输入7,[[1,2,8,9],[2,4,9,12],[4,7,10,13],[6,8,11,15]]输出true方法一：直接法：遍历数组中的所有元素，找到是否存在。function Find(target, array){ // write code here co
2021-03-01 16:31:16
127
JS结课项目实战之—推箱子游戏.zip
2020-09-13
Apple官网html+css实现.zip
2020-05-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人