- 博客(69)
- 收藏
- 关注
RSS订阅
原创 js 箭头函数详解
1. 认识箭头函数es6 新增了使用胖箭头（=>）语法定义函数表达式的能力，很大程度上，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方，都可以使用箭头函数：// 普通函数let sum = function(a, b) { return a + b;}// 箭头函数let sum1 = (a, b) => { return a + b;}箭头函数简洁的语法对开发者来说是十分友好的，从上面的例子可以得知箭头函数的简单用法：
2022-03-08 18:22:48
32032
14
原创 React Hooks之useContext
React官方解释：useContext 是一个 React Hook，可以让你读取和订阅组件中的 context（React官方文档地址通俗的讲，useContext的作用就是：实现组件间的状态共享，主要应用场景是跨组件状态共享。
2023-09-03 22:57:22
978
原创 React Hooks之useRef详解
useRef 返回一个可变的 ref 对象，其内部只有一个 current 属性被初始化为传入的参数（initialValue）useRef 返回的 ref 对象在组件的整个生命周期内持续存在更新 current 值时并不会触发页面的重新渲染（re-render）useRef 会在每次渲染时返回同一个 ref 对象本质上，useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。
2023-02-18 10:23:20
5550
1
原创 React Hooks之useEffect详解
在类组件中，拥有很多生命周期，在不同的阶段执行不同的生命周期函数，那么函数式组件有没有类似于类组件生命周期的Hook呢？只有函数式组件第一次渲染完毕后，才会执行callback，每一次视图更新完毕后，callback就不再执行，类似于类组件的componentDidMount。第一次点击按钮执行handleClick后：不执行callback；Demo组件第一次渲染完毕后：返回的函数没有执行；第一次点击按钮执行handle后：@3 1；Demo组件第一次渲染完毕后：@1 0；第一次点击按钮后：@1 1；
2023-02-14 23:17:19
1527
原创 React Hooks之useState详解
React官方简介：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本文中讲解的useState就是React中的其中一个Hook。
2023-02-12 18:46:04
7590
1
原创 Vue中的mixin(混入)
Vue.js官方解释：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。如果多个组件有很多相同的功能，那么就可以把这些相同的功能抽离出来写成一个混入对象，如有需要直接引入使用混入即可，引入后混入中在data中定义的数据，methods中定义的方法等都会成为组件中自己的数据和方法，相当于将混入对象中的数据、方法等合并到组件身上，可以减少代码的冗余。
2022-11-13 14:16:41
1964
原创 Vue中$forceUpdate强制更新
vue强制更新：你可能还没有留意到数组或对象的变更检测注意事项，或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态，调用this.$forceUpdate()强制更新方法，会更新视图和数据，强制触发vue的update方法。上述两种情况实则更改了数据，页面并没有进行响应更改视图，除了使用this.$set外，使用this.$forceUpdate()强制更新也可以解决上述问题。
2022-11-13 10:59:14
2130
原创 Vue中的ref属性
大家在使用原生JS对DOM进行操作时肯定第一步是需要获取DOM元素的，比如通过id获取document.getElementById(“idName")，或者使用jQuery获取 jQuery对象$("#idName”)，vue对此也实现了比较方便的获取操作DOM的用法 — ref属性。在子组件中使用ref属性，通过this.$refs.refName获取的是组件的实例对象也就是子组件本身。在普通DOM元素中使用ref属性，通过this.$refs.refName获取的是DOM元素。
2022-11-02 10:17:50
4050
1
原创 Vue中的生命周期
什么是vue生命周期Vue生命周期:每一个vue实例从创建到销毁的过程就是这个vue实例的生命周期。在这个过程中，vue实例经历了从创建到挂载到更新再到销毁等一系列过程。在了解生命周期之前，我们先来看一张vue生命周期图：beforeCreate（创建前）vue被创建后进入的第一个生命周期钩子函数。此时数据代理等还没有开始， vue实例身上还没有data中的数据，methods方法等，此时还无法访问data中的数据、methods中的方法。created（创建后）在进入created中。已
2022-10-28 18:18:57
1066
原创 Vue中的自定义指令
大家在开发vue项目时都使用过vue指令，比如v-text、v-show、v-bind等，这些其实都是vue内部自己事先实现好的指令，供我们开发者使用，当然我们也可以自己定义一些指令来满足一些需求，在自定义指令内部主要对DOM元素进行操作，比如v-show指令内部实现就是给DOM元素改变其display属性。//自定义指令 }name：自定义指令名称，通过v-name使vue可以识别；target：自定义指令绑定的数据源；
2022-10-26 22:47:09
1130
原创 Vue中的内置指令
v-show：条件渲染指令，和v-if类似，区别是v-if指令是对DOM元素进行移除和插入操作，v-show是DOM元素已经存在，根据v-show的值的真假来改变其身上的display属性控制器显示和隐藏。v-html：和v-text用法一样，不过和v-text区别是v-html可以识别html标签， v-text无法识别，类似于innerHTML。v-cloak：v-cloak没有值，相当于添加一个标记，搭配css使用， Vue实例创建完毕后会将其删除，主要用于网速较慢页面显示异常问题。
2022-10-26 22:08:17
1242
原创 Vue中过滤器用法详解
Vue.js官方文档说明：可被用于一些常见的文本格式化。个人理解就是把一些不需要的东西过滤掉，只是对数据进行加工处理然后返回处理后的数据，和计算属性很相似。过滤器的应用场景：平常在开发中，过滤器的应用场景有很多，比如单位转换、文本格式化、时间格式化之类的等。ps：在vue3.0中已废弃filter。
2022-10-24 22:51:57
9226
原创 Vue中this.$set()的用法
会对data中定义的数据进行一次加工，会给每一个数据通过Object.defineProperty()添加getter和setter，即使数据层层嵌套也没问题，因为vue底层写了一个递归方法，所以不用担心data中的某个数据没有添加setter和getter；在setter中，会有对数据改变页面响应发生改变的处理；然后将加工后的数据赋给vue实例对象中的_data中；然后会将_data中的每一个数据通过Object.defineProperty()数据代理添加到vue实例对象身上；
2022-10-22 22:41:48
618
原创 Vue中动态绑定class样式
绑定的样式个数不确定（可以添加或删除任意一个class），名字也不确定。要绑定的样式个数确定，名字也确定，但是要动态决定是否使用。一个元素绑定多个class，点击添加或删除class。有两个class样式，第一个使用，第二个不使用。样式的类名不确定，需要动态指定。点击一个元素更改其绑定的类名。
2022-10-19 14:29:17
7389
原创 Vue中computed和watch的区别
computed的getter在初次读取时执行后，会将结果进行缓存，如果在其他地方再次访问时，当依赖的数据没有发生改变时，会直接拿缓存;了解计算属性和侦听器的开发者都知道，这两者其实都可以来解决很多相同的问题，今天小shy带大家来聊下它们之间的区别都有哪些。watch默认不会立即执行，当配置immediate为true时进入页面会立即执行一次；computed内有异步操作时无效，无法监听数据的变化。当需要在数据变化时执行异步或开销较大的操作时；依赖多个data中的数据做一些复杂操作时。
2022-10-18 20:08:30
1305
原创 Vue中的事件修饰符
给button和其父元素添加了相同的点击事件，vue默认存在事件冒泡，即点击button触发其绑定的方法，然后会向外逐层判断是否有绑定相同的点击事件，如果有则会触发，这里button添加stop这个修饰符就是用来阻止事件冒泡行为的。由于vue默认是冒泡，如果点击button触发了其身上的点击事件(e.target是button)，之后会向外层查找是否有相同的点击事件，这里div添加了self修饰符，触发点击的目标元素并不是div，则不会触发div上的点击事件。
2022-10-17 20:49:39
1415
原创 Vue中watch的详解
2.1 watch基础语法被监听的数据：data中定义的数据；数据改变后的值：该数据改变后的新值；数据改变之前的值：该数据改变之前的值。2.2 watch监听单个简单数据类型在输入框中输入文本后：这里text改变了三次，分别输入1、2、3，得到如上输出。2.3 监听复杂数据类型的某个属性的变化检测某个属性值的时候需要用对象.属性名的写法，用法和简单数据类型一致。2.4 immediate (立即处理 进入页面就触发)2.5 deep 深度监听3. watch简写形式代码如下：..
2022-07-08 11:27:40
33329
1
原创 Vue指令v-show和v-if的区别
在Vue项目的开发中，经常会遇到通过条件判断来显示和隐藏页面的需求，也就是"条件渲染"，我们通常会使用v-if 或 v-show来实现，今天主要讲下两者的区别和应用场景。
2022-06-30 11:34:43
832
原创 Vue中的计算属性computed
计算属性基础例子结果：Original message: “Hello”Computed reversed message: “olleH”计算属性的缓存(重点)计算属性和methods的对比那么为什么还要多一个计算属性这个东西呢？原因：计算属性会将第一次计算出来的结果进行缓存，如果多次使用,计算属性所依赖计算的数据没有改变，会直接拿缓存，不会再次调用计算属性里的方法(除非依赖的属性发生改变)，极大提高了性能。代码演示如下：输出如下：“方法被调用了”“方法被调用了”“方法被调用了”“
2022-06-26 22:08:55
489
原创 Vue中的MVVM模型
MVVM:Vue官方文档原文:M: 模型（Model），相当于Vue中data中的数据；V: 视图（View），模板代码，展示给用户的DOM页面；VM： 视图模型（ViewModel），Vue实例，充当View与Model之间通信的桥梁，如下图。DOM Listeners： DOM 监听，当DOM发生一些事件时，可以监听到，并在需要的情况下改变对应的Data。Data Bindings: 数据绑定，将Model的改变实时反映到View中。...
2022-06-23 14:23:10
608
原创 Element表格使用el-popover导致所有气泡全部弹出的问题
在element ui的表格中每一行数据都有删除当前行数据的操作，在点击删除按钮后要出现气泡弹框提示，但是当点击删除后发现每一行的气泡弹框都弹出来了。相关的问题描述和解决方法都在这里。
2022-06-14 21:26:25
2591
1
原创 jQuery详解(二)
三、jQuery 效果(动画效果)1. 显示隐藏效果:show([speed, easing, fn]) 可以省略参数hide([speed, easing, fn]) 可以省略参数toggle([speed, easing, fn]) 可以省略参数speed: "slow" | "normal" | "fast" 或表示动画时长的毫秒数如 1000easing: 指定切换效果 默认是"swing" 可用参数 "linear"fn: 回调函数 动画执行完毕执行回调函数2. 滑动效果(上拉
2022-05-20 15:06:08
331
原创 jQuery详解(一)
一、什么是jQuery?jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互，jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。如何下载使用jQuery？进入jQuery官网 https://jquery.com/；点击官网中download jquery按钮；选择生产版本的jquery(压缩过的)和
2022-05-18 11:00:29
2786
原创 grid网格布局基础(二)
上一篇小shy向大家介绍了什么是grid和grid中容器身上的属性，本篇向大家介绍下项目身上的一些属性。项目属性grid-column-startgrid-column-endgrid-row-startgrid-row-endgrid-columngrid-rowgrid-areajustify-selfalign-selfplace-self1. grid-column-* / grid-row-*grid-column-start：从哪一列网格线开始；grid-co.
2022-05-02 11:48:36
688
原创 grid网格布局基础(一)
1. grid布局简介CSS Grid(网格) 布局，与 flexbox 的一维布局系统不同，是一个二维的基于网格的布局系统，它可以同时处理列和行，Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块。Grid布局和Flex布局有很多相似之处，Grid也分容器和项目，采用grid布局的元素，被称为grid容器(grid container)，简称“容器”，其下的所有直接子元素自动成为容器成员，称为grid项目(grid item)，简称“项目”。2. 基本概念上面说到，gr
2022-04-30 16:01:50
1716
原创 Sass详解
1. 什么是Sass?Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。2. 为什么使用Sass？它能够帮我们更快更高效的编写更好维护的 css；Sass 引入合理的样式复用机制，可以节约很多时间来重复。Sass的好处当然不仅于此，当你使用之后便会发现其中的妙处。3. Sass语法3.1 变量变量可以存储样式信息，以便后面使用。比如一个样式在页面的多个地方使
2022-04-27 08:48:25
15561
7
原创 flex布局详解
1. Flex布局是什么?Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。任何一个容器都可以指定为Flex布局。注意：设为Flex布局后,子元素的float、clear和vertical-align属性将失效。2. 基本概念容器：采用Flex布局的元素，称为Flex容器（flex con
2022-04-23 18:36:07
24526
1
原创 css属性书写顺序规范
小shy刚开始写前端css样式的时候总是想到什么样式就写什么样式，完全不注重css书写顺序，后来才了解到正确的css样式顺序，其实会提升浏览器渲染dom的性能；所以小shy觉得css样式顺序正确的书写也是每一个前端开发人员不可或缺的技能。(1) 定位属性：display / position / float / left / top / right / bottom / overflow / clear / z-index(2) 自身属性：width / height / margin / p.
2022-04-21 21:23:24
369
原创 20个提升效率的JS技巧
1. 同时声明多个变量let a = 1, b = 2, c = 3;2. 三元运算符代替if elselet num1 = 10;let num2 = 20;let result = num1 > num2 ? true : false;3. 使用&&简化if语句function fn() { return true;}let flag = true;// 如果flag 为 true 则执行fnflag && fn();4. 使用模板字
2022-04-19 21:07:06
651
原创 js之节流函数
节流原理节流就是在一定时间间隔内触发一次事件，意思是可以在触发事件的时候马上执行任务，然后设定时间间隔限制，在这段时间内不管用户如何操作都忽略，在时间到了之后，如果监测到用户有触发事件行为，再次执行任务，并且设置时间间隔。其实节流跟王者荣耀的英雄技能是一个道理，当你释放技能的时候，该技能就会进行冷却倒计时，等倒计时结束之后，就可以再次释放技能了(这样是不是很好的理解了节流呢)。实际应用场景比如通过监听用户滚动屏幕来做出相应的网页反应，如果用户不断的进行滚动，则会不断的发生请求，响应也会不断增加
2022-04-12 10:12:45
1557
原创 js之防抖函数
防抖原理事件响应函数在一段时间后才执行，如果这段时间内再次调用，则重新计算执行时间。意思是如果在规定的时间内无论你怎么触发事件都不会执行，只有在最后一次触发事件后并且在规定的时间内无触发事件操作才会执行。防抖原理举例(这里以点击按钮为例)：设置防抖的时间为2秒；点击一次按钮，则开始倒计时；如果在2秒内再次点击按钮，则重新从2秒开始倒计时；如果2秒过后没有再点击按钮，则执行点击按钮对应的事件，否则就再次从2秒开始倒计时。代码实现(这里以点击按钮为例)实现过程讲解(使用定时器实现)：
2022-04-10 14:10:31
6893
原创 js中this指向问题
函数中this指向对于一些开发者来说一直是一个比较头疼的问题，this在js中比较灵活，不同的情况指向不同，小shy总结出了函数调用的this指向的一些情况，供大家参考。1. 默认绑定function fn() { console.log(this);}fn();结果：this指向window对象函数在被调用的时候，this会默认指向全局对象window对象。2. 隐式绑定const obj = { name: "小明", fn: function() { console..
2022-04-09 10:57:11
357
原创 js打乱数组内元素顺序(Fisher–Yates shuffle洗牌算法)
如何将数组内元素顺序打乱呢？这里小shy向大家介绍一种算法。Fisher–Yates shuffle：洗牌算法。通俗理解：先将数组最后一位元素作为参考点，将这个参考点和数组其他位置的元素(使用随机数获得)交换位置(当然也有不改变其位置的情况)；然后将数组倒数第二位元素作为参考点，将这个参考点和数组其他位置的元素(使用随机数获得)交换位置(当然也有不改变其位置的情况)；然后将数组倒数第三位元素作为参考点，将这个参考点和数组其他位置的元素(使用随机数获得)交换位置(当然也有不改变其位置的情况)；.
2022-04-06 18:07:57
897
原创 js两个变量值互换的多种方法
两个变量的值互换在面试中也会经常出现，如果可以说出多种方法，也会让面试官眼前一亮，今天小shy就给大家介绍几种方法，看看哪种更适合你。1. 临时变量法let a = 3, b = 5, c = b; // c: 5b = a; // b: 3a = c; // a: 52. 加减法let a = 3, b = 5;a = a + b; // a: 8b = a - b; // 8 - 5 = 3a = a - b; // 8 - 3 = 53. 数组法let a = 3, b .
2022-04-06 16:36:19
2865
1
原创 js中JSON详解
理解 JSON 最关键的一点是要把它当成一种数据格式，而不是编程语言。JSON不属于JavaScript，它们只是拥有相同的语法而已。JSON 也不是只能在 JavaScript 中使用，它是一种通用数据格式。很多语言都有解析和序列化JSON的内置能力。1. 语法JSON语法支持表示3种类型的值：简单值：字符串、数值、布尔值和null可以在JSON种出现，特殊值undefined不可以；对象：第一种复杂数据类型，对象表示有序键/值对。每个值可以是简单值，也可以是复杂类型；数组：第二种复杂数据.
2022-04-03 11:01:02
22513
3
原创 js对象hasOwnProperty和in的区别
hasOwnProperty：用于判断当前对象实例（不是原型）上是否存在给定的属性，如果有则返回true，会忽略通过原型链继承的属性。in运算符：用于判断当前对象实例上是否存在给定的属性，如果当前对象自身没有该属性，会判断原型链是否继承该属性，如果有，则返回true。下面是代码示例：// 在Object原型上定义一个num属性，此时所有的对象实例都会通过原型链继承该属性。Object.prototype.num = 1;const obj = { a: 0};console.log(.
2022-03-30 11:50:11
579
原创 js 事件详解(二)
1. 事件流事件流描述的是从页面中接收事件的顺序；事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即为DOM事件流。比如我们给一个div注册了点击事件：DOM事件流分为三个阶段：捕获阶段当前目标阶段冒泡阶段如下图：捕获阶段：在元素触发事件的时候会经历如下：首先会从页面的最顶级Document开始判断document是否也注册了该事件，如果有就触发该事件；然后判断最外层html元素是否也注册了该事件，如果有就触发；再然后判断body元素是否也注册了该事件，如果
2022-03-25 01:03:07
719
原创 js 事件详解(一)
1. 什么是事件？事件： 指用户在某事务上由于某种行为所执行的操作；拿例子通俗的来说：比如点击一个按钮，让它在点击后实现某些效果；点击之后触发实现效果，即就是给这个按钮添加了点击事件。2. 事件三要素事件源：添加事件的对象；事件类型：添加那种类型的事件；事件处理函数：触发事件执行的函数。3. 常用的事件鼠标事件：事件事件名称触发条件onclick点击事件单击鼠标左键触发ondblclick双击事件双击鼠标左键触发onmouseover移动到
2022-03-24 22:00:19
990
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人