随手小记
文章平均质量分 86
此专栏用来记录学习过程中的一些零碎的内容
一碗周.
这个作者很懒,什么都没留下…
展开
-
10分钟快速上手Vue3过渡动画
大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~写在前面在实际开发中,为了增加用户体验,经常会使用到过渡动画,而过渡动画在CSS中是通过transition和animation实现的。而在Vue中,Vue本身中内置了一些组件和API可以帮助我们方便的实现过渡动画效果;接下来我们就学习一下。Vue的transition组件Vue中中提供了transition组件,该组件可以在下列情况之一的情况下,为元素自动添加进入/离开的过渡效果:使用v-if条件渲.原创 2022-02-16 21:20:03 · 808 阅读 · 0 评论 -
10分钟快速上手Composition API(setup 语法糖写法)
大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~写在前面我们在写Vue2的时候,编写组件的方式是使用Options API,这种方式的特点就是在对应的属性编写对应的功能模块,例如在data中定义数据、methods定义方法等;这种方法的弊端就是同一功能的代码逻辑被拆分到各个属性中,影响代码的阅读。Vue3中提供的Composition API可以帮助我们优雅的组织我们的代码,让相关功能的代码更加有序的组织在一起,可以参考『做了一夜动画,就为让大家更好的理.原创 2022-02-14 19:24:10 · 864 阅读 · 0 评论 -
总结了Vue3的七种组件通信方式,别再说不会组件通信了
大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~写在前面本篇文章是全部采用的<script setup>这种组合式API写法,相对于选项式来说,组合式API这种写法更加自由,具体可以参考Vue文档对两种方式的描述。本篇文章将介绍如下七种组件通信方式:propsemitv-modelrefsprovide/injecteventBusvuex/pinia(状态管理工具)开始搞事情~举一个栗子俗话说的好,学习不写demo,.原创 2022-02-10 09:08:43 · 2364 阅读 · 0 评论 -
从:key的角度,来看Vue3中diff算法的实现原理(多图详解)
大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~写在前面在我们使用v-for指令的时候,尤大大建议我们为每一项都添加一个唯一的属性key,在Vue文档中是这么说的:为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的*key*attribute,除非遍历输出的 DOM 内容非常简单。看到这,是不是会有以下疑问:为什么要添加一个唯一的key?为什么不建议用索引作为唯一的key?为什么不能使用.原创 2022-01-18 16:42:27 · 703 阅读 · 0 评论 -
我用Vue3+TS实现了一个新年倒计时组件,适用于各种场景
大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~写在前面最近在写一个考试系统,有一个倒计时自动交卷的需求,正好也马上春节,就有了编写一个倒计时组件的想法。对于这个倒计时组件,它应该具有这样的功能:字体、颜色等样式可以由使用者自定义;结束时间也可以由使用者自定义;倒计时结束以后,倒计时组件emit一个事件,以便进行后续操作。现在我们根据这样的需求,去编写这个组件。组件属性和事件首先我们创建一个Vue3+TS+setup的基础组件,代码如下:.原创 2022-01-11 16:54:34 · 2280 阅读 · 3 评论 -
过年了~我用CSS画了个灯笼,看着真喜庆
大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~写在前面过年了~ 过年了~ 过年了~辞旧迎新过年啦 张灯结彩春节啦~金鸡起舞送福啦 新的一年福来啦~文章开头几句歌词,顿时显得喜庆了不,我们的灯笼是下面这个样子的。animation属性画灯笼我们肯定不能画一个静态的灯笼,我们先来复习一下CSS中的animation属性,该是是一个简写属性,由animation-name,animation-duration, animation-timing-f.原创 2022-01-10 08:47:06 · 341 阅读 · 0 评论 -
给VSCode定义代码片段,让coding速度快到飞起~
大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~写在前面代码片段可以理解为模板,当我们输入指定时,按下【tab】或者【enter】即可出现对应的模板。只要代码片段写的好,升职加薪少不了~代码片段的好处与坏处coder对代码片段的评价褒贬不一,下面这张图解释了代码片段的好处与坏处:何时使用代码片段关于什么时候使用代码片段,我的建议是:当你对一个东西足够熟练,例如console.log(),这个时候可以为其设置代码片段。有些东西特别繁琐,每次.原创 2022-01-05 12:16:15 · 492 阅读 · 1 评论 -
面试官:前端布局了解嘛?我一下说了接近五十种布局方案,给面试官整不会了。
大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~CSS布局已经成为面试必问的话题的,这篇文章总结了常见的布局以及其多种实现方式,目录如下:文章目录水平居中1. 使用text-align属性2. 定宽块级元素水平居中(方法一)3. 定宽块级元素水平居中(方法二)4. 定宽块级元素水平居中(方法三)5. 定宽块级元素水平居中(方法四)6. Flex方案7. Grid方案垂直居中1. 行内块级元素垂直居中2. 定位方式实现(方法一)3. 定位方式实现(方法二)4.原创 2021-12-29 14:58:10 · 3614 阅读 · 0 评论 -
面试官:[‘1‘, ‘2‘, ‘3‘].map(parseInt)的结果是什么?为甚?我:[1, 2, 3]。面试官:你不用来了。
面试官:['1', '2', '3'].map(parseInt)的结果是什么?为甚?我:[1, 2, 3]。面试官:你不用来了。原创 2021-12-27 21:54:32 · 4664 阅读 · 4 评论 -
掌握这34个知识点,助你快速入门TS
TypeScript现在几乎已经是所有前端程序员必备的技能了,现在的各大框架已经全部采用TS进行开发。本篇文章总结了TS中常用的知识点,希望能对你有所帮助。原创 2021-12-18 11:00:49 · 1304 阅读 · 0 评论 -
Yarn 的安装与使用
大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~写在前面Yarn 是一款 JavaScript 的包管理工具(npm 的代替方案),在 Yarn 的官网有着一句话:Safe, stable, reproducible projects 。正如 Yarn 官网的介绍,Yarn 的具有速度快 、安全 、可靠 的优点,在功能上相比于 npm 优化了许多功能等,例如网络性能优化,安装依赖的方式相同等功能。具体可以参考Yarn 中文网。Yarn 的安装Yarn.原创 2021-12-07 11:18:18 · 996 阅读 · 0 评论 -
location.href与window.open()的用法与区别,你都知道吗?
通常在Web开发中,打开一个页面有两种方式,一种是使用location的href属性来打开一个页面;还有一种就是使用window对象下的open()方法。原创 2021-12-07 11:13:02 · 4121 阅读 · 0 评论 -
Vs Code 自动格式化 Vue 代码
{ //每行最多多少个字符换行 "printWidth": 100, // tab缩进大小,默认为2 "tabWidth": 4, // 使用tab缩进,默认false "useTabs": false, // 使用分号, 默认true "semi": false, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号) "singleQuote": false, // 行尾逗号,默认none,可选 none|原创 2021-04-19 09:04:50 · 1918 阅读 · 0 评论 -
【必备软件】PicGo 配合七牛云打造完美图床
【必备软件】PicGo 配合七牛云打造完美笔记软件古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼写在前面本专栏是用于记录 Windows 上面的一些好用的软件,开此专栏主要有两个目的。将好东西拿出来大家一起分享避免时间长了以后找不到某也好用的软件了。Markdown 是现在程序猿最常用的写技术文档的方式,而 Typora 是在 Windows 上最美观最好用的一款写 Markdown 的工具。但是 Typora 并不像 Word 可以在文档内存储图片,它仅仅存放的图片的路径,原创 2021-04-06 17:34:09 · 960 阅读 · 1 评论 -
通过 Remote-SSH 在 VS Code 中进行远程开发
通过 Remote-SSH 在 VS Code 中进行远程开发古之立大事者,不惟有超世之才,亦必有坚韧不拔之志——苏轼写在前面对目前的开发环境来说,在 Linux 中开发已经是必不可少的一项技能了,但是由于 Linux 的学习成本高,使很多初学者望而止步。自从 VS Code 1.35.0的发布,Remote 相关插件已经正式上线,我们可以通过 Remote-SSH 插件来在本地的 VS Code 中来编写服务端中的代码,从而减少的大量的服务器端的操作。正文开始。文章目录通过 Remote-原创 2021-04-01 14:02:08 · 406 阅读 · 0 评论 -
从0开始打造一个完美的 Windows 终端(PowerShell + Windows Terminal)
古之立大事者,不惟有超世之才,亦必有坚忍——苏轼写在前面众所周知,Windows 的命令行已经多少年没有更新多了,颜值还存留在90年代呢。已经远远的跟不上时代的潮流了。Windows 10 自带的 powershell 虽然比 传统的 cmd 稍微强上这么一丢丢,但是也不尽人意。对于一个程序员来说,没有一个好的命令行工具就是相当于吃饭没有好的碗筷是一样的道理,这篇博客,就从 0 开始打造一个完美的终端工具。上效果图软件介绍与安装这里我们用到了两个软件,分别是 PowerShell 和 W.原创 2021-02-04 03:26:33 · 2588 阅读 · 0 评论 -
CSS Hack 的使用
写在前面虽然 IE 浏览器已经被微软放弃了,但是避免不了某些项目的 CSS 还是要兼容 IE 浏览器,CSS Hack 还是有必要看一眼的,于是就出现了这篇博文,这篇博客主要介绍 CSS Hack 是什么。文章目录写在前面CSS Hack是什么CSS Hack的分类CSS属性前缀法选择器前缀法IE条件注释法使用 CSS 库完成浏览器兼容性问题CSS Hack是什么CSS Hack 由于不同厂商的浏览器,比如 Internet Explorer、Safari、 Moilla Firefox、Chrom原创 2021-01-09 17:33:06 · 155082 阅读 · 0 评论 -
浅谈跨域资源共享(CORS)
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼CORS 是什么CORS 是一个 W3C 标准,全称是 Cross-origin resource sharing 译为 跨域资源共享,新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。跨域资源共享标准规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求,从..原创 2020-12-23 21:08:34 · 254 阅读 · 0 评论 -
浏览器的缓存机制(HTTP 缓存) 详解
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼先说概念我们所说的浏览器的缓存机制,也可以称为是 HTTP 缓存机制,其机制是根据 HTTP 报文的缓存标识进行的。缓存是什么缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。当 Web 缓存发现请求的资源已经被存储,它会拦截请求,返回该资源的拷贝,而不会去源服务器重新下载。缓存需要合理配置,因为并不是所有资源都是永久不变的。重要的是对一个资源的缓存应截止到其下一次发生改变(即不能缓存过期的资源)。缓存的优势缓存服务器端的数据.原创 2020-12-20 23:48:15 · 331 阅读 · 0 评论 -
轻松搞懂 HTTP 原理
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼文章目录HTTP 概述HTTP 是什么HTTP 协议的历史与标准HTTP 请求与响应消息HTTP 的基本原理基于 HTTP 的组件系统概述客户端Web 服务器代理(Proxies)HTTP 的基本特性HTTP 能控制什么HTTP 流HTTP 消息HTTP 消息是什么HTTP/1.x 消息的缺点HTTP 消息结构请求消息与响应消息HTTP 请求方法和状态码HTTP 请求方法HTTP 状态码HTTP状态码列表HTTP 的请求头和响应头HTTP 请求头.原创 2020-12-20 00:25:49 · 877 阅读 · 1 评论 -
一篇博客让你搞懂 Git 的简单用法
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 —— 苏轼先说概念Git 是目前最火的版本控制软件,在我们学习 Git 之前我们先来了解一下 软件版本控制的概念。软件版本控制是什么版本控制软件提供了完备的版本管理功能,用于存储、追踪目录(文件夹)和文件的修改历史,是软件开发者必备工具,是软件公司的基础设施。版本控制软件的最高目标,是支持软件公司的配置管理活动,追踪多个版本的开发和维护活动,及时发布软件。其主要功能有:集中管理档案,安全授权机制:档案集中地存放在服务器上,经系统管理员授权给各.原创 2020-12-19 00:03:41 · 189 阅读 · 1 评论 -
小白建站——宝塔Linux配合阿里云服务器搭建属于自己的网站
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼写在前面由于现在大部分服务器都是 Linux 系统,全球最快的10台超级计算机也是 Linux 系统,由于 Linux 本身有一些难度,上手的成本比较高,这就导致我们建站时耗费的成本是相当大的,这时我们我们今天的主角 宝塔Linux 就可以大显神通了。引入一段官方的介绍:宝塔Linux面板是提升运维效率的服务器管理软件,支持一键LAMP/LNMP/集群/监控/网站/FTP/数据库/JAVA等100多项服务器管理功能。安装宝塔面板在安装宝塔.原创 2020-11-19 21:45:24 · 426 阅读 · 4 评论 -
Git 中的 .gitignore 文件配置规范(过滤文件推送)
古之立大事者,不为此超世之才,亦必有坚忍不拔之志——苏轼写在前面由于我联系的代码和笔记一直都是使用 Git 推送到某平台管理的,有的时候会出现一些配置文件什么之类的文件,我们不需要将其推送到某平台的。这个时候 .gitignore 文件的作用就发挥了,这个文件可以告诉 Git 哪些文件或目录不需要推送。下面就来介绍一下这个文件的使用规则。常用的忽略规则常用的忽略规则如下所示:# #号表示注释 如果需要#号在前面加斜杠 /#/directory/ # 过滤整个文件夹*.zip ..原创 2020-11-19 02:04:45 · 568 阅读 · 0 评论 -
陪你3小时入门PHP
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼写在前面今天做项目的时候,做服务端时候用到了 PHP 的知识,今天下午就拿出来点时间对比这 JavaScript 学习了一下。此篇博客主要是对学习过程的一些重要的记录文章目录写在前面PHP的基本语法PHP 的标记必须的分隔符PHP 的注释PHP中的类型PHP 的数据类型分类布尔类型整型浮点型字符串数组NULL 类型类型强制转换变量与常量变量引用常量运算符算数运算符赋值运算符位运算符比较运算符递增/递减运算符逻辑运算符字符串运算符流程控制语句.原创 2020-11-17 21:44:43 · 94 阅读 · 0 评论 -
精选!18个 VS Code 高效插件,献给需要的前端程序猿/媛
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼先写前面俗话说 欲先善其事必先利器,作为一个21新世纪的打工人,怎么可以没有一个趁手的编辑器工具呢。今天的主角就是 VS Code ,一个炒鸡强大的编辑器,我们先来介绍一下这个编辑器。VS Code 全称 Visual Studio Code 是由微软开发的一款免费、跨平台的轻量级代码编辑器。以功能强大、提示友好、不错的性能和颜值俘获了大量开发者的青睐,对 JavaScript 和 NodeJS 的支持非常好,自带很多功能,例如代码格式化,代.原创 2020-11-16 23:23:37 · 1149 阅读 · 0 评论 -
简单 20 行 python 代码实现爬取表情包,麻麻再也不用担心我聊天图慌了!!
古之立大事者,不为超世之才,亦必有坚忍不拔之志——苏轼写在前面今天弄了一个简易的爬表情包的脚本,这个脚本是 python 的,下面就将我的思路分享给大家。网站分析我们爬取的是 斗图啦 这个网站最新表情页,我们先来分析一下其 <img> 中的属性都有些什么。我们在 懒加载 这篇博客介绍过原 src 属性的值指向占位图片, data-original 属性设置图片的才是真实路径,所以这个链接是有用的;alt 属性貌似是图片名称,先记下。还有 class 属性,也记下来(要考的),用于.原创 2020-11-11 21:46:22 · 1468 阅读 · 0 评论 -
如何快速优雅通过的pip和pycharm安装Python的第三库
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志。——苏轼文章目录写在前面使用pip安装使用pycharm安装总结写在前面在学习Python的过程中,下载Python的第三方库的速度真的是慢的很啊。为了满足我强烈的好奇心,查找了一下资料,终于知道了这是为什么;Python使用pip方法安装第三方包时,需要从https://pypi.org/资源库中搜索下载;由于这个网站是外国的服务器,不能科学上网的话访问速度自然不会很快。如果将这个资源库给换成国内的,那速度肯定就上来了。下面是国内比较常用.原创 2020-11-10 20:49:47 · 1060 阅读 · 0 评论