3 莫亓

尚未进行身份认证

我要认证

力氵口 口由巴 . https://github.com/censek

等级
TA的排名 3w+

Webpack(二):核心特性

上一篇的最后提出了对模块化打包方案或工具的诉求:能够将散落的模块打包到一起;能够编译代码中的新特性;能够支持不同种类的前端资源模块。目前,前端领域有一些工具能够很好的满足以上这 3 个需求,其中最为主流的就是 Webpack、Parcel 和 Rollup。如何使用 Webpack 实现模块化打包?如何通过 Loader 实现特殊资源加载?如何利用插件机制横向扩展 Web...

2020-06-01 15:42:23

Webpack:开发一个可以加载 markdown 文件的 Loader

开发一个可以加载 markdown 文件的加载器,以便可以在代码中直接导入 md 文件。markdown 一般是需要转换为 html 之后再呈现到页面上的,所以我们希望导入 md 文件后,直接得到 markdown 转换后的 html 字符串,如下图所示:└─ webpack-loader ······················· sample root dir ├── src ································· source dir │ ├─

2020-05-29 17:17:17

Javascript:补0(填充字符串到目标长度)

当给定数字位数不足8位时,则在左边补充0以补足8位数。let num = 900;let nStr = num.toString().padStart(8,'0');console.log(nStr); //00000900padStart()用另一个字符串填充当前字符串(重复,如果需要的话),以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。语法str.padStart(targetLength [, padString])参数targetLength当前字符

2020-05-29 09:32:44

Vue 动画:CSS 动画原理 & animate.css 库的使用 & 同时使用过渡和动画 & Js 动画与 Velocity.js 的结合 & 多个元素或组件的过渡 & 动画封装

Vue 中 CSS 动画原理<div id="app"> <div v-if="show">hello world</div> <button @click="handleClick">切换</button></div><script> var vm = new Vue({ el: '#app', data: { show: true }, methods: {

2020-05-22 10:00:08

通过监听当前路由的变化,动态更新面包屑的内容

引入 vuetify 的 Breadcrumbs 组件来实现面包屑功能。发现路由变了之后,面包屑内容没有更新。需要刷新才会变化。此时,就需要:监听当前路由的变化,动态更新面包屑的内容watch: { $route() { this.getBreadCrumbs(); }},created() { this.getBreadCrumbs();},...

2020-05-21 13:40:07

git pull 本地有未提交的改动而报错的解决办法

在远端设置无误的情况下,git pull 出错一般是由于本地有未提交的改动造成的。第一步: git stash 将本地的改动暂存第二步: git pull 获取最新更新第三步: git stash pop 将改动还原

2020-05-19 08:44:49

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

关于前端安全的几个提示

作为前端开发人员,我们最关心的是性能、SEO 和 UI/UX——安全性却经常被忽略。我们应该记住,就安全性而言,前端现在与后端或 DevOps 承担着同样的责任。前端可能会发生几千种恶意攻击。常见攻击不受限制的文件上传这是一种将恶意文件上传到服务器然后对系统执行的攻击方式。攻击可能包括:使文件系统或数据库超载,接管完整的系统,客户端攻击,将攻击转发到后端系统或进行简单的破坏。点击劫持这是一种恶意用户诱骗正常用户点击网页或不属于该站点的元素的攻击方式。这种攻击可能会导致用户在不经意间提供凭

2020-05-12 13:24:17

CSS:背景图片的使用(将背景图片完美适合窗口 & 创建三角背景图片 & 在背景图片上添加渐变叠加 & 制作网格背景图片 & 文字镂空背景图片效果)

1. 如何将背景图片完美的适合浏览器窗口?background-position: center;background-attachment: fixed;background-size: cover;2. 如何在CSS中使用多个背景图片?用 , 分隔。background-image: url(图片1路径), url(图片2路径);background-position: 图片1position, 图片2position;……3. 如何创建三角背景图片?效果图:通过创建两个

2020-05-12 11:07:01

Vue 组件:$ref & 父子组件的数据传递 & 组件参数校验与非 props 特性 & 给组件绑定原生事件 & 非父子组件间的传值 & 在 Vue 中使用插槽 & 作用域插槽 & 动态组件

使用组件的细节点<table> <tbody> <row></row> <row></row> <row></row> </tbody></table><script>Vue.component('row', { template: '<tr><td>This is a row</td></tr>

2020-05-11 17:32:43

CSS:悬浮提示文本

https://github.com/haizlin/fe-interview/issues/2008Way 1⃣️<div class="wrap"> 我是一个元素 <div class="tips"> 这是悬浮提示文字 </div></div>.wrap { position: relative; display: inline-block; margin: 4em;}.tips { position.

2020-05-11 10:25:55

CSS:实现一个斑马线效果 (条纹背景)

斑马线效果<div class="zebra-crossing"></div>.zebra-crossing { width: 180px; height: 100px; margin: 1em; background: linear-gradient(to right, #fff 50%, #bbbbbb 0); background-size: 30px 100%;}几种条纹背景的实现1. 基础渐变<div class="demo1"&g

2020-05-11 09:35:39

JavaScript:将 arguments 对象转换为数组;对数组中所有的值求和;条件短路;对条件使用逻辑或;逗号运算符;用 length 调整数组大小;通过数组解构对值进行交换;动态属性名……

https://mp.weixin.qq.com/s/q36K4uPcLWdZq_wQvPflIQ1. 将 arguments 对象转换为数组arguments 对象是函数内部可访问的类似数组的对象,其中包含传递给该函数的参数的值。但它与其他数组不同,我们可以访问其元素值并获得长度,但是不能在其上使用其他的数组方法。不过,我们可以将其转换为常规数组:var argArray = Array.prototype.slice.call(arguments);2. 对数组中所有的值求和var .

2020-05-09 09:29:55

Vue 基础:Vue 实例生命周期 & 模版语法 & 计算属性、方法与侦听器 & 样式绑定 & 条件渲染 & 列表渲染 & set

♻️ Vue 实例生命周期生命周期函数就是Vue实例在某一个时间点会自动执行的函数。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...

2020-05-08 16:52:10

Vue 入门:el: '#app' 是什么意思 & component 组件 & 实现 ToDoList

????‍♀️ 用原生 js 实现基本页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...

2020-05-06 15:53:26

Webpack(一):背景介绍

Webpack 本质是一个模块化打包工具,通过“万物皆模块”这种设计思想,巧妙地实现了整个前端项目的模块化。Webpack 解决的问题如何在前端项目中更高效地管理和维护项目中的每一个资源。模块化的演进过程Stage 1 - 文件划分方式Stage 2 - 命名空间方式Stage 3 - IIFEStage 4 - IIFE 依赖参数模块加载的问题更为理想的方式应该是在...

2020-04-28 16:20:42

如何在 Vue 中使用 Font Awesome 字体图标

安装???? 参考链接:https://blog.csdn.net/zyj362633491/article/details/86422353

2020-04-26 16:20:03

GitHub 中如何进行文件模糊查找

在任何存储库中按 t 键进行访问,然后就可以输入要查找的文件的名称。

2020-04-26 09:21:36

CSS:实现倒影效果 (box-reflect)

box-reflect 设置倒影语法box-reflect:none | <direction> <offset> <mask-box-image>▪︎ <direction>: ▫︎ above 指定倒影在对象的上边 ▫︎ below 指定倒影在对象的下边 ▫︎ left 指定倒影在对象的左边 ▫︎ righ...

2020-04-21 16:59:29

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

查看更多

勋章 我的勋章
  • 签到新秀
    签到新秀
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 1024勋章
    1024勋章
    #1024程序员节#活动勋章,当日发布原创博客即可获得
  • 勤写标兵Lv3
    勤写标兵Lv3
    授予每个自然周发布7篇到8篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。