PhantomBuIlet-优快云博客

原创 Vue3 Composition API，setup初接触

以官方的说法看，Composition API是用来解决功能较多，代码结构较长，开发需要不断地从data methods等与template三者频繁地切换而产生的麻烦，以及方法与变量引用时不断地this而产生的问题而设计的，这与Hooks也异曲同工。后，所有与其相关的操作都可以放在紧跟其后，或是其他与之相近的位置，代码的可读性将大大提高。最近心血来潮，研究了一下Vue3，之前有了解过Vue3的Composition API相较于2.x的Option API变化很大，所以就来学习一下。......

2022-08-15 17:19:17 307

原创简易环形进度条实现，三种方案对比

公司最近新项目有一个展现数据操作进度的需求，由于公司内使用的UI库只有线性进度条而没有环形进度条，所以只得手写一个封装组件，尝试了多种方案后比较一下优劣。

2022-08-10 11:51:23 1174

原创 HTML5Canvas实现简易画图工具（铅笔，直线，矩形，圆，文本框，橡皮擦等）

初学Canvas，用canvas做了简单的画图工具体会并熟悉了一下大致的实现方案。

2022-08-03 14:56:04 2551 3

转载前端HTTP和HTTPS的基础知识

原文作者：Lam来源：知乎https://zhuanlan.zhihu.com/p/108819904（仅做学习之用，侵联删。）前端和网络协议可以说是天天打交道，那么我们必须基本一些网络的基本知识，最近在看一些面试题，发现有不少网络知识我们是很容易忽略，但是却是很基本的东西，那么就在这里写一遍关于前端接触到的网络知识做一个总结和记录。目录HTTP协议介绍 HTTP各版本的差别 HTTP协议三次握手四次挥手 HTTPS握手过程 HTTP状态码HTTP协议介绍HTTP是hyp.

2021-08-30 16:08:08 477

原创 CSS实现Switch开关功能

原理：利用css的伪元素生成一个按钮，根据表单checkbox的checked属性来控制开关的状态和样式的切换。代码：html部分： <input type="checkbox" class="switch-button" id="switch-button" onclick="handleClick(this)"> <label for="switch-button"></label>一个checkbox与其绑定的label，主要样式

2021-08-20 14:11:50 2645 1

原创 JS向LocalStorage/SessionStorage存储对象数组

在日常开发中，我们拿到一些从后台传过来的数据想把它存在localStorage方便我们随时取用；但是会发生以下情况：比如下面这样的数据当我们用window.localStorage.setItem('localdata',this.state.listdata);这样去存它的时候，发现localstorage是这样的：如何解决？使用下面的方式 let local = JSON.stringify(this.state.listdata); ..

2021-08-18 16:42:07 1233

原创原生JS简易轮播图+轮播动画

已知BUG：切换到最后一张图时点击previous按钮，会导致切换到倒数第二张后触发切换到第一张的函数，进而造成多向左移动一张图片的距离。轮播图原理：以下面的html代码为例：外面先写一个“窗口”作为显示当前轮播图片的地方，设置overflow使其他的轮播图隐藏；然后写一个装轮播图的容器，使它绝对定位到“窗口中”，里面的轮播图设置左浮动使它们显示在同一行；随后轮播图改变时，只需要改变容器的left改变其位置，便能实现轮播切换的效果。先贴代码：html部分：<div class="sh

2021-08-16 17:37:49 507

原创解决前端CORS跨域请求问题

问题：补充：Edge浏览器，试过改配置文件但不管用解决：在edge插件市场中搜索：Allow CORS: Access-Control-Allow-Origin下载激活随后右上角会出现点击c那个图标然后会变成彩色，问题解决...

2021-08-04 17:27:33 1265

原创仿简书/知乎Header组件

找资料的时候看到简书header的效果不错，于是就仿写了一个非常简单的。无自适应，没有与其他项目产生牵连，复制粘贴直接用。vue项目就把state里的数据搬到data里，方法写在methods里，componentDidMount改成mounted，render()中return的内容写在template里（注意className改class）代码：（底下content盒子里以及list-block是edge浏览器的新标签页（Bing）的效果）import React from 'react'

2021-08-04 16:57:48 339 2

原创简单的网页分页实现

写在前面：首先，这个简单例子是由React开发的，但这并不能代表什么，我会在必要的地方加上说明，以便于只了解vue的朋友也能看懂原理或者写法，毕竟两个框架有许多共通的地方。（PS：我个人看好vue，react写起来程序结构较于vue非常混乱。。。）首先上代码：这是文章列表的组件，其中又渲染了一个PageNavigator的子组件。import React from 'react';import './article.css';import axios from 'axios';imp

2021-08-04 15:21:19 946

原创 React.js学习随笔二:组件数据的重新渲染

接下来公司给实习生出了几道练习题，使用开发框架不限。在用react做的时候遇到了几个问题，给大家分享下。其中一道题是写一个简易的聊天框，实现可以发送消息以及将两者发送消息分开的功能。下面是代码：import "./test1.css"import React from 'react'class Test1 extends React.Component { state = { select: "A", content: "",

2021-07-09 16:29:30 1615

原创 React.js学习随笔一：列表渲染

在学校学习过Vue，现在所在公司使用react开发，现在还在学习中。。。实习生小白一枚，请大家指教。React的特色就是使用JSX代替了原生的html+js的方式，将html结构放入js中一块开发。react大量使用了ES6语法，所以学习时最好先熟悉es6。在列表渲染中，vue使用它自定义的指令v-for对数据进行遍历和操作，react的区别在于，以为它和JQuery一样是js库，所以它直接调用js方法进行操作，常用的是map方法。import "./list.css"import Re

2021-07-07 11:35:32 158

m0_60014407的博客