易山易酒易诗-CSDN博客

<template> <div class="circle"> <svg viewBox="0 0 100 100"> <path d="M 50 50 m -50 0 a 50 50 0 1 1 100 0 a 50 50 0 1 1 -100 0 z" id="circle" /> <text><textPath xlink:href="#circle">早知道是这样 像梦一场.

2022-05-02 19:51:51 2902

原创 CSS实现按下文字效果

<template> <text>百度一下</text></template><script>export default { mounted() {}, methods: {},};</script><style>body { background: none;}text { font-size: 8em; background: #58a; color: white;.

2022-05-01 21:09:32 390

<template> <div class="texts"> <div class="tt"> 找出字符串中满足正则表达式的条件子串，并以其为分割点分割字符串。找出字符串中满足正则表达式的条件子串，并以其为分割点分割字符串。找出字符串中满足正则表达式的条件子串，并以其为分割点分割字符串。找出字符串中满足正则表达式的条件子串，并以其为分割点分割字符串。找出字符串中满足正则表达式的条件子串，并以其为分割点分割字符串。找出字.

2022-04-30 21:37:46 304

原创 CSS毛玻璃效果

原生CSS实现毛玻璃效果

2022-04-29 23:10:18 244

原创带动画效果的饼图

基于CSS的动画属性

2022-04-29 13:45:45 147

原创 CSS的各种形状

基于原生CSS的一些关于形状的操作

2022-04-27 19:30:03 377

原创基于CSS和VUE的蚂蚁行军效果的框选框

效果图：屏幕录制2022-04-27 16.44.05 <template> <div class="texts"> <p></p> <p></p> <p></p> <p></p> <p></p>

2022-04-27 17:42:43 332

原创基于VUE的可隐藏的顶部菜单栏组件

效果图：<template> <nav class="menu"> <a><div>HOME</div></a> <ul> <li>HOME11111</li> <li>HOME22222</li> <li>HOME33333</li> </ul> <a>

2022-04-20 15:08:20 1732 1

原创 CSS 块级元素和行内元素

块级元素块级元素会填充其父元素的内容区，并且不能有其他元素，即在元素前后生成了“分隔符”。例如：p标签和 div 标签。行内元素在一个文本行内生成元素。例如：a 标签，strong 标签。区别1、块级元素可以设置 width、height ，但行内元素不会受到这两个元素的影响，可以通过改变行高（line-height）来设置。2、块级元素在不设置 width、height 时会默认充满父元素的内容区，而行内元素的默认值是其包裹的子元素的大小。...

2022-04-20 14:54:58 580

原创 React生命周期函数

1、挂载阶段1.1 constructor挂载阶段首先执行的函数，通常用于初始化state和绑定普通函数指向。注：this.props只有在super(props)执行后才可以调用。constructor(props) { super(props); this.state = {} console.log('constructor')}1.2 getDerivedStateFromProps参数props表示父组件传过来的数据，参数state表示该组件自身的stat

2021-09-28 16:01:19 53

原创 JS数组去重的方法

1、Set利用Set不会存在相同数据的特点进行去重，不需要额外空间进行存储，可直接在原数组上进行修改。但对于相同的对象无法进行去重。let arr = [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN];arr = [...new Set(arr)]; // [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a']2、手写遍历去重需要额外空间进行存储，但性能较好，可

2021-09-10 16:31:35 89

原创 JS实现对象的for-of循环

众所周知，对象可以通过for-in进行遍历，不可以使用for-of进行遍历。let a = { b: 1, c: 2}for(let key in a) { console.log(key); // b c}for(let key of a) { console.log(key); // error}但是，数组却可以使用for-of进行遍历，为什么呢？原来是数组中有个 Symbol.iterator 属性，使数组可以进行迭代，那么如果我们给对象也加上个这样的

2021-08-24 17:38:04 1755

原创 CSS三角形旋转（border）

2021-08-23 22:40:35 448

原创 JS正则表达式（全）

一、创建方式：1、字面量方式let reg = /\d/;2、构造函数方式‘\‘前需要加转义符‘\’，可以通过变量构造正则表达式。let reg = new RegExp('\\d','g');let str = '123';console.log(str.replace(reg, 'A')); // A23let s = '123';let str = '123';let reg2 = new RegExp(s,'g');console.log(str.replace(reg2,

2021-08-23 02:41:06 387

原创 JS观察者模式和发布订阅模式的区别

观察者模式: 观察者观察被观察者，当被观察者发生被观察的行为时，触发观察者里面的事件。document.querySelector('#btn').addEventListener('click', ()=>{ console.log('点击了按钮');})发布订阅模式：订阅者订阅想要观察的事件，当发布者发布事件时，会去查找对应事件的订阅事件并触发。// 事件大厅class Event { constructor() { this.list = {}

2021-08-17 19:59:17 772

原创 JS装饰器模式

装饰器作用：不改变原有的结构和功能，为对象添加新的功能或者增强原有的功能。let f1 = function() { console.log('原函数')};let f2 = function() { console.log('装饰函数1')};let f3 = function() { console.log('装饰函数2')};// 普通装饰器Function.prototype.Director = function(...fns) { this()

2021-08-17 17:14:46 223

原创单页面应用和多页面应用的区别

单页面应用（single page web application，SPA）：只有一个页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。优点：1、用户体验好，快，内容改变不需要加载整个页面，对服务器压力较小。2、前后端分离。3、页面转场体验好。缺点：1、不利于SEO，因为搜索引擎在做网页排名的时候，要根据网页内容给网页权重，来进行网页的排名。搜索引擎是可以识别HTML内容的，而多页应用的每个页面所有的内容都放在HTML中，所以SEO排名效果好，反之单页面应用效果不好。2、导航不可

2021-08-16 20:36:52 985

原创 Vue中computed和watch区别

watch: { num: { handler(newNum, oldNum) { console.log(newNum, oldNum); }, immediate: true, deep: true }}computed: { numA: function(){return this.num * 2},}1、computed有缓存，watch没有。2、computed，计算属性，依赖其他属性。watch用来监听其他属性。3、comp

2021-08-16 16:02:17 185

原创 Vue嵌套组件的生命周期函数的执行顺序

生命周期函数子组件在父组件进行DOM创建时，开始进行实例化，并且父组件需要等待子组件完成挂载后，才可以完成DOM的渲染，即完成挂载。同理，父组件销毁时，需要等待子组件销毁完毕后，才会销毁。...

2021-08-16 15:28:36 287

原创 Vue的生命周期钩子函数

1、beforeCreate()在调用beforeCreate()函数前，vue主要做了vm实例一些属性的定义和createElement()方法的封装。此时函数的this指向vm，但还获取不到data中的数据、methods中的方法、watch中的事件，想要在这个阶段获取data中的数据的话，可以通过 $options获取父组件的data，或者通过 $nextTick或者setTimeout等异步方法，等待实例vm完成data的配置后获取。beforeCreate() { console.log(

2021-08-16 15:09:35 345

原创 Vue中v-show和v-if的区别

<template> <div> <button v-show="num < 10" @click="add">+show</button> <button v-if="num < 10" @click="add">+if</button> <p>{{num}}</p> <button v-show="num > 0" @click="reduce"&g

2021-08-14 20:55:33 87

原创 Vue中组件间的通讯方式

1、$emit/props（父子组件）在父组件中，引用子组件，并将子组件需要的name属性传递过去。<Son :name="name"></Son>在子组件中通过props进行接收。父组件传过来的值是不允许修改的，想要修改必须通知父组件，让父组件来改props: ['name']在子组件中通过$emit方法，来触发一个名为‘send’的方法，并将参数传递过去。send() { this.$emit('send', '收到名字');}在父组件中将‘send’绑

2021-08-14 17:05:46 483 1

原创 JS柯里化

柯里化：把接受多个参数的函数转变成接受单一参数的函数，返回接受余下参数并返回结果的新函数。// 例如：实现add(1)(2)(3)function add(a) { return function(b) { return function(c) { return a + b + c; } }}add(1)(2)(3); // 6// 多参数柯里化const curry = function (fn) { retu

2021-08-13 12:54:29 63

原创 JS纯函数

纯函数：对于给定的输入返回相同的输出，即不依赖于参数以外的任何变量并且没有任何副作用。// add函数的返回值只和参数num有关// 而且不会产生副作用// 所以是纯函数const add = (num) => { return num + 1}let a = 0;// add2函数的返回值在参数num不变的情况下// 如果改变了a的值，那么返回值也会改变// 所以不是纯函数const add2 = (num) => { return num + a;}

2021-08-12 23:35:57 62

原创防抖与节流

防抖与节流都是为了限制函数的执行频次，是一种性能优化的方案。

2021-08-12 14:46:21 51

原创跨域资源共享CORS

CORS：跨域资源共享（Cross-Origin Resource Sharing），是一个浏览器技术的规范，用来解决浏览器的跨域请求。// 允许所有非同源请求ctx.set("Access-Control-Allow-Origin", "*");头部作用Access-Control-Allow-Origin指示请求的资源能共享给哪些域Access-Control-Allow-Credentials指示当请求的凭证标记为TRUE时，是否响应该请求Access-C

2021-08-12 13:38:51 104

原创客户端缓存的两种方式

1、强缓存服务器通知浏览器一个缓存时间，在缓存时间内，下次请求直接使用缓存，不在时间内，执行比较缓存策略。主要包括 Expires 和 Cache-control。// Expires let nowTime = new Date();nowTime.setTime(new Date().getTime() + 3600*1000);ctx.set("Expires", nowTime.toUTCString());// Cache-controlctx.set("Cache-control

2021-08-11 18:12:00 981

原创 Token的存储方式

Token: 访问资源的凭证。一般用户通过用户名密码登录后，服务端会将登录凭证做数字签名，加密之后的字符串作为Token。并在客户端后面的向服务端的请求中携带，作为凭证。Token在客户端的存储主要有：1、localStroage、sessionStroage，二者主要区别在于，关闭浏览器sessionStroage会被清除，但localStroage不会。将Token存于Web Stroage会导致容易受到XSS攻击，因为Web Stroage作为一种存储机制，在传输过程中不会执行任何安全标准，所以要

2021-08-11 16:34:40 3839

Spring4+Struts2+Hibernate4相关包

空空如也