前端
文章平均质量分 73
无
码的世界_
前酒吧舞驻唱 代码艺术家 终身学习
morningstar1001@163.com
展开
-
【教程】Hexo 部署到 Github Page 后,自定义域名失效的问题
近期给 Github Page 上托管的静态网站映射了自定义域名(),之后发现每次更新并部署 hexo 到 Github Page (hexo d)后就会出现自定义域名失效的问题。原因也非常简单,当你在 Github Page 上映射了域名后,Github Page 会在你的仓库下自动生成一个 CNAME 文件(如果你的 Github Page 是在其他分支,则是在其他分支下生成 CNAME 文件)。原创 2024-07-10 17:07:24 · 595 阅读 · 0 评论 -
【教程】Github Page 添加自定义域名
Github Page 是 Github 提供的一个可以从 Github 仓库上托管静态网站的功能服务。默认当你建立起一个仓库后,在对应会有一个可供浏览的静态网站,例如,其中,是我的 Github 账户名字,是我的某个仓库名字。然而很多时候我们希望能够使用自己的域名来替代默认的域名,以体现出自身网站的风格,而 Github Page 也提供了这种域名映射的能力,可以将自定义域名更换为自己的域名。虽然 Github Doc 提供了指导文档,但该文档书写的不够友好,不适合新人阅读。原创 2024-07-09 18:29:42 · 811 阅读 · 0 评论 -
【教程】hexo 更换主题后,部署在 Github Page 无 CSS 样式
最近更换了 hexo 的主题后,重新部署到 Github Page 上发现不显示 CSS 样式,但在本地启动时又是正常的效果。此外,检查资源请求,发现多个 .css 文件请求 404,判断可能部署后路径除了问题。本文先讲一下如何更换主题,然后讲一下如何修改路径,让样式能够被正确请求。原创 2024-06-17 19:16:08 · 783 阅读 · 0 评论 -
【教程】油猴脚本开发入门教程
右击顶部工具栏中的油猴插件图标,在弹出的操作框中选择添加新脚本。之后你将进入一个编辑页面,我们来看看在这个编辑页面中一些基本的知识点。这里重要的点有两个,一个是设置匹配的网站,默认的初始生成的代码中,没有对 https 的网址进行匹配,仅对 http 网址进行了匹配,所以要自己添加。第二个就是通过 标签来添加你本地的文件地址,这样当你在本地进行开发的代码,就可以直接在对应的网站上执行了。当用户使用 请求远程数据的时候,需要使用 connect 指定允许访问的域名,支持域名、子域名、IP地址以及原创 2022-06-14 16:26:48 · 34723 阅读 · 12 评论 -
【学习笔记】在 Github Page 上托管基于 Vue 的项目
环境vscode前言本篇博文仅仅提供如何将 vue 项目部署在 github page 的基本操作,至于项目的内容由读者自己决定。同时这是最基本的操作,所以在复杂的项目部署中,请根据具体情况,采取解决措施。1. 新建仓库首先新建一个仓库,这里我新建了一个 test 的仓库。然后,我们将这个仓库 clone 到本地。git clone git@github.com:yourname/reponame.git,这里的用户名和仓库名都要替换成你的。2. 打包 vue 项目并上传首先,原创 2022-04-20 20:48:55 · 1758 阅读 · 3 评论 -
JavaScript 的最佳实践
这里写目录标题可维护性基本的编码规范松散耦合编码惯例性能语句最少化优化 dom 交互参考可维护性基本的编码规范变量名应该是名词,如 person,car 等函数名以动词开头,如,getName()。返回布尔类型函数应该以 is 开头,如,isPerson()变量名和函数名都应该使用符合逻辑的名称,且尽量不要使用单词缩写,除非是达成共识的缩写,如,有些开发者在开发中,将 project 写成 proj 这是不必要的变量,函数和方法应该以小写字母开头,多个单词组合应该按照驼峰大小写。类名首字母大写原创 2021-08-19 17:48:55 · 144 阅读 · 0 评论 -
作用域插槽(插槽 Prop)
是什么从名字上来说“作用域插槽,插槽 Prop”可以分开来讲。首先为什么叫作用域插槽呢,我们知道 slot 本身是有作用域的,即父作用域和子作用域,它们是各自渲染的,也就是说,父作用域无法拿到子作用域中的数据(slot 的基础知识),但是有时候我们希望在父作用域拿到子作用域的数据怎么办呢,那就用作用域插槽。而插槽 Prop 这个名字我认为是一个类比,因为我们知道 Prop 是父组件数据传递给子组件数据的通信方式,而插槽 Prop 也是一种通信方式,只不过是在 slot 情况下子组件传递给父组件,并且并不原创 2021-07-18 12:03:08 · 4616 阅读 · 0 评论 -
人话 JS 之原始值包装类型
原始类型有哪些首先以上是 JS 中的原始类型,什么是原始类型呢?就是变量存放的那些简单而固定的值,比如 let num = 1;这个 num 就是原始值。与之相对的是引用类型,引用类型通常存放的是对象。关于这两点我在前面的文章中有叙述,就不展开,或者大家可以去看看相关的内容。原始值包装类型所谓原始包装类型,其实应该是原始引用类型,我们知道原始值,就是那些简单的值,像 1,“text”,true 等等,而引用类型就是对对象的引用。因为原始值简单,所以你无法对它进行额外的操作,也就是它本身没有任何原创 2021-07-01 11:37:31 · 197 阅读 · 0 评论 -
人话 JS 之引用值
参考《JS 高级程序设计》原始值与引用值所谓原始值,就是 Undefined、Null、Boolean、Number、String 和 Symbol。对于原始值的操作,也是操作的实际的值。所谓引用值,就是保存在内存中的对象。因为 JS 不能直接操作对象的内存地址,所以实际操作的是对象的引用。区别动态属性引用值可以添加,修改和删除其属性和方法。但原始值不可以// 引用值可以操作它的属性let person = new Object(); person.name = "Nichola原创 2021-06-30 16:44:03 · 191 阅读 · 0 评论 -
人话 JS 之 var,let 和 const
参考《JS 高级程序设计》在 JS 中有三种声明变量的关键字,分别是 var,let 和 const,其中 let 和 const 都是在 ES6 中新增的关键字。var作用域var 在全局声明的变量或称为 window 对象的属性var name = 'Matt'; console.log(window.name); // 'Matt'var 的作用域范围被限制在一个函数中,也就是说,任何包裹 var 的情况中,只有函数才会限制 var 的作用域function test()原创 2021-06-29 17:44:06 · 118 阅读 · 0 评论 -
element ui 中表格嵌套输入框失效
使用 element ui 中表格嵌套输入框,下拉框等,会出现无法获取数据的情况,原因是嵌套的太深了,element ui 本身给出了这种自定义复合组件的获取数据的使用方式,即通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据。实例<el-table :data="tableData" style="width: 100%"> <el-table-column labe原创 2021-05-21 11:29:50 · 1582 阅读 · 0 评论 -
js dom中如何插入一个节点
参考MDN《JS DOM 编程艺术》语法var insertedNode = parentNode.insertBefore(newNode, referenceNode);参数解析:parentNode:将要新的子节点属于哪个父节点,也就是说,这个新的子节点要插到哪个父节点下面newNode:这个要被插入的新子节点referenceNode:它同样是这个父节点下的一个子节点,用于给新子节点插入定位用的,因为如果一个父节点下面有很多子节点,新子节点具体插入的位置需要这个参考子节点来做定位原创 2021-02-14 10:46:13 · 4197 阅读 · 0 评论 -
vue-cli 实现反向代理获取猫眼数据
这里不具体讲反向代理的原理和作用,就是记录一下如何用反向代理获取猫眼数据(因为在项目中,前端直接获取猫眼api数据会被同源策略杀死)分析猫眼的请求比如这里,我想获取猫眼在搜索一部电影时,自动返回匹配搜索字段的数据,通过分析,右侧蓝色为请求的部分,其中 search?kw… 开头的字段都是我在测试是否为实时请求数据的响应,可以看到 kw= 为你的输入值,cityId= 为你的城市值双击这个请求可以打开具体的链接,这里我是用了 FE 这个插件来便于我们讲 json 数据解析,可以看到搜索栏就是我们要的答原创 2021-02-01 15:54:56 · 646 阅读 · 2 评论 -
vue.js 通过 v-for 获取多层对象与数组
关键在于 v-for 的嵌套中,下一层嵌套中的 in 的对象,需要是外层嵌套中遍历的对象比如,此处,内层的 itemList 就是在 item 中进行遍历的,而 item 恰是外层嵌套的对象 item嵌套循环中,内层循环用 itemList in listL.list 是不行的实例JSON 数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m.原创 2021-02-01 09:52:21 · 4617 阅读 · 0 评论 -
windows下使用nvm-windows管理nodejs版本
因为使用 gulp 3 开发项目的原因,结果 gulp 3 不支持 nodejs 12 以上的版本,而 gulp 4 语法又有很多变化,于是打算使用 nvm-windows 来进行版本管理,这样可以在本机上操纵多个 nodejs 版本了。特别的是,n 和 nvm 都是 mac 或者 linux 下的版本管理器,在 windows 下会不能使用,而 nvm-windows 并不是 nvm 的简单移植,具体可以看开发者本人的说法。卸载原有的 nodejs要安装 nvm 必须卸载已有的 nodejs ,如原创 2021-01-19 11:04:01 · 328 阅读 · 0 评论 -
理解 margin 垂直重叠的原因和解决方案
// 本文参考多篇文章,视频,官方文档而成,具体链接均在文中给出从 BFC 开始margin 垂直方向重叠并不是一个 BUG 而是一种官方规定的规则,这个规则就叫做 BFC(block formating contexts),如果你还不了解 BFC,可以观看这个视频快速学习。如果你想看 w3c 关于 BFC 的 margin 垂直方向重叠的规定,点击这里在这个规定里,规定了 BFC 的其中一个特性,这个特性就是块级元素上下排列时,margin 重叠,且重叠的 margin 值为最大的那个值综上,m原创 2021-01-11 10:12:59 · 1574 阅读 · 0 评论 -
width 为 100% 和 auto 的区别
<style> *{ margin: 0; padding: 0; } .div1 { width: 100%; height: 100px; ...原创 2020-01-13 19:38:10 · 476 阅读 · 0 评论 -
关于 Javascript 中的 Node.contains() 方法
方法总述Node.contains() 用于检测 () 内给的节点是不是 Node 节点的子节点。这样的好处是程序员不需要在遍历 Dom 结构就可以知道节点之间的存在关系。语法总结node.contains( otherNode ) //返回 Boolean 类型实例这段代码用于检测 < ul > 下是否存在 < li ><!...原创 2018-07-04 14:46:14 · 3577 阅读 · 0 评论 -
CSS属性分类扫描-关于列的属性
目的本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。综合参考MDN–CSS参考手册W3Cschool–CSS参考手册属性一览 属性 定义 属性值 column-co原创 2018-02-04 21:21:12 · 228 阅读 · 0 评论 -
执行环境和作用域
参考《JavaScript 高级程序设计-执行环境和作用域》前言执行环境和作用域是理解 闭包 这个概念的前提因素,所以先学习这块内容是为后面理解 闭包 打下基础。正文执行环境:定义了变量或函数有权访问其他数据。每个执行环境都有一个与之相关的变量对象,这个变量对象就是用来装载该环境中所有的变量和函数的。(我们的代码无法访问这个对象,但是解析器会)。 举个例子,比...原创 2018-08-08 10:50:44 · 354 阅读 · 0 评论 -
CSS属性分类扫描-关于列表属性
目的本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。综合参考MDN–CSS参考手册W3Cschool–CSS参考手册属性一览list-style-image 定义...原创 2018-02-19 10:02:48 · 199 阅读 · 0 评论 -
CSS属性分类扫描-表格属性
目的本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。综合参考MDN–CSS参考手册W3Cschool–CSS参考手册属性一览caption-side 属性 定义 属性值 caption-side 规原创 2018-01-30 10:05:34 · 315 阅读 · 0 评论 -
CSS属性分类扫描-关于展示的属性
目的本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。综合参考MDN–CSS参考手册W3Cschool–CSS参考手册属性一览display 属性值 定义 说明...原创 2018-02-10 21:26:01 · 234 阅读 · 0 评论 -
CSS属性分类扫描-盒子相关属性
目的本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。综合参考MDN–CSS参考手册W3Cschool–CSS参考手册属性一览box 相关属性盒子模型谈 CSS 的时候我们总是绕不过盒子滴,因为盒子模型是 HTML 元原创 2018-01-29 10:59:47 · 281 阅读 · 0 评论 -
CSS属性分类扫描-字体属性
目的本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。综合参考MDN–CSS参考手册W3Cschool–CSS参考手册属性一览direction 属性 定义 参数原创 2018-02-03 21:14:04 · 259 阅读 · 0 评论 -
CSS属性分类扫描-flex布局的属性
目的 本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。 本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。综合参考MDN–CSS参考手册W3Cschool–CSS参考手册属性一览1. flex布局的属性参考:Flex 布局教程:语法篇 - 阮一峰的网络日志简介:原创 2018-01-20 10:32:06 · 323 阅读 · 0 评论 -
CSS属性分类扫描-边框属性
目的本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。综合参考MDN–CSS参考手册W3Cschool–CSS参考手册属性一览border 属性 属性 定义 备注原创 2018-01-28 11:29:29 · 441 阅读 · 0 评论 -
CSS属性分类扫描-背景属性
目的本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。综合参考MDN–CSS参考手册W3Cschool–CSS参考手册属性一览background 属性 属性原创 2018-01-27 11:26:52 · 288 阅读 · 0 评论 -
CSS属性分类扫描-关于文本属性
目的本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。综合参考1.MDN–CSS参考手册 2. W3Cschool–CSS参考手册属性一览text-align 定义 属性...原创 2018-02-21 11:31:28 · 236 阅读 · 0 评论 -
CSS属性分类扫描-关于其他属性(完结篇)
目的本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。综合参考1.MDN–CSS参考手册 2. W3Cschool–CSS参考手册属性一览backface - visibilitybac...原创 2018-02-22 11:02:52 · 211 阅读 · 0 评论 -
Javascript 中 this 的作用
参考《JavaScript 设计模式与开发实践》前言JavaScript 的 this 总是指向一个对象,这个对象就是运行时局域函数的执行环境来动态绑定。this 指向的四种情况作为对象的方法调用作为普通函数(方法)调用构造器(构造函数)调用call 和 apply 的调用作为对象的属性方法被调用作为对象的方法被调用的时候,this 指向该对象。一个实例...原创 2018-08-07 10:58:25 · 262 阅读 · 0 评论 -
JavaScript 中的 Function 类型
参考 《JavaScript 高级程序设计》引用类型-Function函数定义的三种方式函数声明方式 function method(){ return 0; }函数表达式方式 var method = function(){ return 0; }构造函数方式 var method = new ...原创 2018-07-31 11:36:01 · 181 阅读 · 0 评论 -
图解 ECMAScript,JavaScript 和 JScript 和区别与联系
它居然说我内容为空?!原创 2018-07-24 09:38:16 · 727 阅读 · 0 评论 -
关于 canvas 的两个常见错误
在学习 canvas 中遇到的两个问题,特此总结设置的图形宽高和显示的不一样我们拿矩形来举例子HTML :&lt;canvas id="canvasRect"&gt;&lt;/canvas&gt;CSS : canvas{ width: 300px; height: 300px; bo...原创 2018-07-11 09:53:38 · 3804 阅读 · 0 评论 -
如何访问对象的属性和方法
通用代码 var person = { name:{ first:'yu', last:'zhang' } }下面通过几种方式访问对象的属性和方法。点表示法访问 first 和 lastperson.name.first; // yup...原创 2018-07-03 08:38:18 · 2571 阅读 · 0 评论 -
用 js 实现帧动画
今天在完成百度前端技术学院的时候有一个题目是,用 js 操作 css 的雪碧图实现帧动画。我们知道实现帧动画的方式有 gif,css 动画和 js 操纵的方式。 在网上看了很多的教程,都写得特别的复杂,而在下一直是秉承大道至简的原则,写那么多代码自然是难以请愿的(主要是大神们写的太详细了)。话不多说,下面展示我的实现方式。核心思想设置 background-image...原创 2018-06-30 19:41:16 · 5390 阅读 · 1 评论 -
CSS属性选择器大总结
id选择器作用通过设置 id 值来选取元素。语法实例 #idName{ margin:0px; }类选择器作用通过设置类名来选取元素。语法实例 .className{ margin:0px; }标签选择器作用通过选取标签名来选取元素。语法实例 div{ ......原创 2018-06-21 19:42:34 · 3485 阅读 · 0 评论 -
CSS属性分类扫描-动画类属性
目的本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。综合参考MDN–CSS参考手册W3Cschool–CSS参考手册属性一览动画类属性@keyframes定义:原创 2018-01-24 11:15:19 · 306 阅读 · 0 评论