阿哈哈哈大前端
莫亓
力氵口 口由巴 .
https://github.com/censek
展开
-
【Vuetify】v-pagination 怎样输入页码跳转
Vuetify 中提供了 v-pagination 分页的功能,如下图:这样只能两个两个的往下获取页码,如果页码很多的话,查找起来极其不便,所以能不能加个输入页码跳转的功能呢?????️<v-row> <v-col cols="8"> <v-pagination v-model="pageNumber" :length="itemLength" total-visible="10" circle color="#c34450"></v-pagin原创 2021-01-29 09:41:43 · 1722 阅读 · 0 评论 -
vuetify 表格:表头合并单元格
我想用 vuetify 的 v-data-table 实现下面这个表格:(表头有2行,且需要单元格合并)直接上代码:<v-data-table :items="standardDesserts" hide-default-footer> <template v-slot:body="{ items }"> <thead> <tr> <template v-for="(headerItem1, idx1) in原创 2020-12-16 10:10:54 · 2175 阅读 · 0 评论 -
CSS:div 水平垂直居中
flex<div class="parent"> <div class="child"></div></div>.parent { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100wh;}.child { width: 100px; height: 100px; background-co原创 2020-09-10 16:54:50 · 143 阅读 · 0 评论 -
Markdown 如何设置图片的宽度?
线上使用 <img> 添加图片,会显示路径不对。解决方案:一、把图片挪到 static 目录下。.├── blog/ ├── images ├── male.svg └── female.svg └── test.md├── src/└── static/ └── avators/ ├── male.svg └── female.svg……<img src="/avators/m原创 2020-09-03 09:28:21 · 1629 阅读 · 0 评论 -
HTTP 缓存机制及原理
https://mp.weixin.qq.com/s/M8Ew7xKStiGEnhGgCq5YPA为什么会有缓存?单纯的从计算机角度去说,比较抽象,咱们看一个实际的例子。比如,我们通常喜欢把没看完的书放在书架上,而看完以及没有看的书放在箱子中保存。如果我们把所有的书保存在箱子中,每次看书都要去箱子中找,所以非常麻烦和耗时(这里的箱子,可以想象成服务器)。当我们开始看新书时,第一次从箱子中取出,看了一半,然后我们直接放到书架上,当下次再看书的时候,直接从书架中取出,这里的书架,就是我们下边要讲到的.转载 2020-08-10 11:31:44 · 199 阅读 · 0 评论 -
解析从 Vue 初始化到首次渲染生成 DOM 以及从 Vue 数据修改到页面更新 DOM 的流程
https://mp.weixin.qq.com/s/G5nwszLRk0W51Ui_IykJxQVue 初始化从最简单的一段 Vue 代码开始:<template> <div> {{ message }} </div></template><script>new Vue({ data() { return { message: "hello world", }; },});&.转载 2020-08-10 10:55:33 · 2550 阅读 · 0 评论 -
CSS:固定外框尺寸,里面的图片尺寸不固定,让图像自适应外框
object-fit该属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。fill | contain | cover | none | scale-downfill被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配,那么该对象将被拉伸以适应内容框。contain被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。cover被替换的原创 2020-08-06 08:53:51 · 1762 阅读 · 0 评论 -
CSS:滚动 (scroll-behavior & scroll-snap-align)
scroll-behavior - 设置是立即滚动还是平滑的滚动值:auto:滚动框立即滚动。smooth:滚动框通过一个用户代理预定义的时长、使用预定义的时间函数,来实现平稳的滚动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal原创 2020-07-16 09:52:33 · 871 阅读 · 0 评论 -
CSS:选择高亮(设置高亮状态的样式 / 禁止文本选择高亮)
设置处于高亮状态的样式 - ::selection::selection CSS伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。只有一小部分CSS属性可以用于 ::selection 选择器。禁止文本选择高亮 - user-select: none;CSS 属性 user-select 控制用户能否选中文本。<!DOCTYPE html><html lang="en"><head> <meta charset=原创 2020-07-14 09:33:00 · 6682 阅读 · 0 评论 -
Markdown 文档中文内锚点链接跳转(中文)
[](#)内容详情请见[附录](#appendix)## appendix我是附录内容啦啦啦啦啦……() 里的 # 只有一个,下面的 ##为二级标题(标题写几个#都行,一级到六级)但是,如果#后面写的是中文就会出现问题。DOMException: Failed to execute ‘querySelector’ on ‘Document’: … is not a valid selector.如果链接中含有中文,会出现中英文转换问题,默认转换成的链接里会含有大写字母,进而报错。可原创 2020-07-13 16:25:19 · 15097 阅读 · 4 评论 -
CSS:实现文字环绕在图片周围的效果
要想让文字环绕在图片的周围,让图片 float 就可以了;如果还想要实现文字圆形环绕图片的效果,可以使用 shape-outside: circle(); 属性。<p>《程序员修炼之道(从小工到专家)》 <img class="left" src="https://img-blog.csdnimg.cn/20200512093847525.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_1原创 2020-05-18 09:37:19 · 4850 阅读 · 0 评论 -
关于前端安全的几个提示
作为前端开发人员,我们最关心的是性能、SEO 和 UI/UX——安全性却经常被忽略。我们应该记住,就安全性而言,前端现在与后端或 DevOps 承担着同样的责任。前端可能会发生几千种恶意攻击。常见攻击不受限制的文件上传这是一种将恶意文件上传到服务器然后对系统执行的攻击方式。攻击可能包括:使文件系统或数据库超载,接管完整的系统,客户端攻击,将攻击转发到后端系统或进行简单的破坏。点击劫持这是一种恶意用户诱骗正常用户点击网页或不属于该站点的元素的攻击方式。这种攻击可能会导致用户在不经意间提供凭转载 2020-05-12 13:24:17 · 620 阅读 · 0 评论 -
CSS:实现倒影效果 (box-reflect)
box-reflect 设置倒影语法box-reflect:none | <direction> <offset> <mask-box-image>▪︎ <direction>: ▫︎ above 指定倒影在对象的上边 ▫︎ below 指定倒影在对象的下边 ▫︎ left 指定倒影在对象的左边 ▫︎ righ...原创 2020-04-21 16:59:29 · 5218 阅读 · 0 评论 -
CSS:画锯齿形边的圆
锯齿形边的圆可以由十二个正三角形构成。.circle { width: 80vh; height: 80vh; position: relative; background-color: #CCCCCC;}.triangle { position: absolute; left: 6.7%; top: 0; width: 86.6%; height: ...原创 2020-04-20 08:53:35 · 831 阅读 · 0 评论 -
Vue(七):vue-devtools
vue-devtools???? 检视组件结构我们可以使用 vue-devtools 很方便地检验页面的组件结构,包括组件的列表、嵌套关系,以及每个组件的内部数据成员的值。为此,我们做一个简单的布局结构,界面如下:其中嵌套了一个 header 和一个 content 组件,content 组件内还有 c1,c2 两个组件嵌套其中。嵌套结构为:->ROOT ->header ...原创 2020-04-10 11:08:59 · 412 阅读 · 0 评论 -
CSS:画五角星
#star-five { margin: 60px 0; position: absolute; display: block; color: red; width: 0; height: 0; border-right: 100px solid transparent; border-bottom: 70px solid red...转载 2020-04-07 09:32:56 · 1361 阅读 · 0 评论 -
CSS:多种方法画圆
<div class="myDiv circle"></div> .myDiv { width: 100px; height: 100px; }方法一:border-radius.circle { background-color: seagreen; border-radius: 50%;}方法二:clip-path.circle...原创 2020-03-31 14:33:54 · 1394 阅读 · 0 评论 -
CSS:硬币旋转效果
利用 transform 的 rotateY 进行垂直方向旋转,利用 transform 的 translateZ 进行视觉差部署。<div class="coin" style="transform: translateZ(1px);"></div>.coin { width: 100px; height: 100px; margin: 100px; ...原创 2020-03-31 09:29:26 · 1839 阅读 · 0 评论 -
Gridsome(五):UI框架 Buefy 的使用
官方文档:https://buefy.org/documentation/customization/1. 安装cnpm install buefy2. 配置// 在 main.js 中添加:import Buefy from 'buefy'import 'buefy/dist/buefy.css'Vue.use(Buefy)3. 使用????:顶部导航栏<temp...原创 2020-03-30 17:17:58 · 1884 阅读 · 0 评论 -
Vue(六):插件
插件Vue.js 可以通过插件扩展自己的能力。因为插件的功能会使用 Vue 全局对象或者实例来调用,或者被修改从而在 Vue 的钩子函数内起作用。????比如用于 http 调用的插件v ue-resource 被插入到 vue 后,可以使用: Vue.http.get(url) 的方式使用此插件提供的服务。创建插件路由插件vue-router 是一个 vue 官方提供的路由框架,使用它让完成...原创 2020-03-29 10:13:34 · 271 阅读 · 0 评论 -
CSS:加载中转圈动画效果
<div class="donut"></div>@Keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}.donut { display: inline-block; borde...原创 2020-03-27 09:03:46 · 3051 阅读 · 3 评论 -
CSS:给元素加边框
<span class="rim">需要加边框的元素</span>◎ 方法一:border.rim { border: 1px solid black;}◎ 方法二:box-shadow.rim { box-shadow: 0 0 0 1px black; /*不影响布局,无限叠加*/}◎ 方法三:outline.rim { outline...原创 2020-03-24 09:45:11 · 2412 阅读 · 0 评论 -
Gridsome(四):完善简易博客网站 (内有 footer 不满一屏时在最底部,超出一屏时在页面最底部 解决方案)
footer 置于页面的底部利用绝对定位/* 文件目录:src/layouts/Defaults.vue */.footer { color: #c5c5c5; bottom: 20px; position: absolute; bottom: 0;}优化博客列表显示<!-- 文件目录:src/pages/Index.vue --><temp...原创 2020-03-20 13:42:27 · 801 阅读 · 5 评论 -
Prisma(三):检索,Prisma CLI 及 配置
哈哈,上次说到了查询所有数据和查询指定数据。查询指定数据当时是指定 id 来查询的。那还有没有别的查询方式呢?我们先来添加几条数据。除了上次说在 http://localhost:4466/_admin 通过鼠标点击添加外,我们还可以利用 mutation 来进行添加:mutation { createUser(data: { name: "css" }) { i...原创 2020-03-18 16:59:14 · 1326 阅读 · 0 评论 -
CSS:改变 icon 图片的颜色
利用 CSS 的 background-blend-mode: lighten 就可以轻松改变图片的颜色。⚠️ 使用前提条件:图片内容为黑色纯色,图片背景为白色。利用 background-blend-mode ,我们可以在图片下叠加多一层其他颜色。通过 background-blend-mode: lighten 这个混合模式实现改变图片主体颜色黑色为其它颜色的目的。参考:htt...原创 2020-03-16 15:35:16 · 7970 阅读 · 0 评论 -
Prisma(二):基本概念及使用
上次分享说到 prisma init 项目名 就可以自动搭建。在 http://localhost:4466/_admin 中编辑 data 数据;在 http://localhost:4466 中进行 query 和 mutation 操作测试。我们来操作一下:这里选择的是创建新的数据库。⚠️ 第一次进行 prisma init 项目名 的时候,可能会有网络的影响,会进行的...原创 2020-03-15 11:01:42 · 2332 阅读 · 0 评论 -
Prisma(一):初识
Prisma 介绍:What,Why,HowPrisma 是什么?原创 2020-03-08 17:05:17 · 2530 阅读 · 1 评论 -
JavaScript 数据结构与算法(四):图
图人与人之间的关系非常复杂。比如你认识的朋友,可能他们之间也互相认识。这就不是简单的一对一、一对多,而是多对多的关系,这便是图。图(Graph)是由顶点的有穷非空集合和顶点之间边的集合组成, 通常表示为:G(V,E),其中,G 表示一个图,V 是图 G 中顶点的集合,E 是图 G 中边的集合。关于图的定义,需要注意的是:线性表中我们把数据元素叫元素,树中将数据元素叫结点,在图中数据...原创 2020-03-01 17:54:02 · 264 阅读 · 0 评论 -
JavaScript 数据结构与算法(三):树
树之前我们一直在谈的是一对一的线性结构,可现实中,还有很多一对多的情况需要处理,这种一对多的数据结构就是 —— 树。树(Tree)是 n(n≥0)个结点的有限集。n=0 时称为空树。在任意一棵非空树中:(1) 有且仅有一个特定的称为根(Root)的结点;(2) 当 n>1 时,其余结点可分为 m(m>0)个互不相交的有限集 T1、T2、……、Tm,其中每一个集合本身又是一棵树,...原创 2020-02-23 23:14:39 · 299 阅读 · 0 评论 -
JavaScript 正则表达式
JS正则表达式完整教程正则表达式字符匹配攻略正则表达式是匹配模式,要么匹配字符,要么匹配位置。1. 横向模糊匹配和纵向模糊匹配???? 横向模糊 指的是,一个正则可匹配的字符串的长度不是固定的,可以是多种情况的。其实现的方式是 使用量词。譬如 {m,n},表示连续出现最少 m 次,最多 n 次。比如 /ab{2,5}c/ 表示匹配这样一个字符串:第一个字符是“a”,接下来是2到5个字符“...转载 2020-02-21 22:34:07 · 512 阅读 · 0 评论 -
JavaScript:页面打印
参考链接:https://www.jb51.net/article/121506.htm整体打印window.print()<div> <p>这里是需要打印的内容</p> <p>.....</p> </div> <button onclick="doAllPrint()">整体打印<...原创 2020-02-19 20:42:34 · 291 阅读 · 0 评论 -
雅虎前端35条军规
原文链接:https://www.cnblogs.com/xianyulaodi/p/5755079.html雅虎前端优化的35条军规。内容部分1. 尽量减少HTTP请求数80% 的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。 这是让页面更快的关键。合并文件 是通过把所有脚...转载 2020-02-14 22:06:20 · 332 阅读 · 0 评论 -
JavaScript 数据结构与算法(一):概述
数据结构与算法程序设计 = 数据结构 + 算法什么是数据结构和算法?我们先来看 几个术语:数据:是描述客观事物的符号,是计算机中可以操作的对象,是能被计算机识别,并输入给计算机处理的符号集合。可以比作图书馆中所有的书。数据元素:是组成数据的、有一定意义的基本单位,在计算机中通常作为整体处理。也被称为记录。就是书。数据项:一个数据元素可以由若干个数据项组成。...原创 2020-02-09 20:01:25 · 296 阅读 · 0 评论 -
HTML:分区响应图
参考:https://www.jianshu.com/p/f877cbe7cfd9分区响应图含义当超链接按钮是图片时,将图片进行划分,使得点击图片不同区域时,会有不同的反馈。比如,点击图片的不同区域,跳转至不同的页面。使用<map> 、<area> 标签 <img src="./1.png" usemap="#myMap" /> &l...原创 2020-01-22 13:04:16 · 682 阅读 · 0 评论 -
CSS:画扇形
来自:https://github.com/haizlin/fe-interview/issues/527四个半圆叠加,过半调整 z-indexhtml<div class="container"> <div class="fan-1"></div> <div class="fan-2"></div> <di...转载 2020-01-21 16:39:37 · 667 阅读 · 0 评论 -
Vue(五):脚手架
脚手架单文件组件vue-cli 脚手架工具应用单文件组件热加载测试回归日常查看 Vue 文件????:Vue.js 小书上一篇:Vue.js(四):组件下一篇:Vue.js(五):脚手架https://blog.csdn.net/Bule_daze/article/details/103814726...原创 2020-01-16 13:52:50 · 219 阅读 · 0 评论 -
Vue.js(四):组件
组件注册和引用动态挂接引用组件组件协作使用属性使用事件内容分发使用事件总线综合案例组件编码风格集中模板模式分离模板模式函数式????:Vue.js 小书上一篇:Vue.js(三):指令下一篇:Vue.js(五):...原创 2020-01-09 16:24:05 · 179 阅读 · 0 评论 -
关于 CSS 的英文单词换行 (word-break 和 word-wrap 的区别)
转载自 AlloyTeam:http://www.alloyteam.com/2016/05/css-word-for-word-breaker-do-you-really-understand/????♀️ 问:如何强制(自动)中、英文换行与不换行????????? 答:word-break:break-all; 只对英文起作用,以字母作为换行依据。word-wrap:break-word; 只对英...原创 2020-01-04 21:14:00 · 8933 阅读 · 2 评论 -
Vue 路由传参及接收参数
???? 方法一:params 传参this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id}}) //这个组件对应的路由配置{ //组件路径 path: '/admin', //组件别名 n...原创 2020-01-03 15:44:53 · 11787 阅读 · 1 评论 -
Vue.js(三):指令
指令概述简写自定义指令????:Vue.js 小书上一篇:Vue.js(二):绑定下一篇:Vue.js(四):原创 2020-01-03 09:21:21 · 337 阅读 · 0 评论