暂无个人介绍
前端生成二维码 import QRCode from 'qrcodejs2'; 生成二维码是,代码里写 128,然后再用css控制 img的实际大小,达到高清的目的
在window平台下 electron打包的exe安装后,在没卸载的情况下,重新点击exe安装,会执行卸载,再点一次才是安装; 针对这个问题,我注释了打包里的一个配置,就好了,如下
打包app后,在生成环境中按F12无法打开开发者工具,此时可以根据需要定制快捷键,调用debug工具
如何快速屏蔽eslint检查 调试代码时,不想eslint来进行语法检查,可在.eslinttc文件里屏蔽掉, 如下图,启动时,因为eslint检查报的错,就在 rules里头关闭掉,设置成 0 或者 off 都可以
wordpress自定义主题 找到 themes文件夹,位置app\public\wp-content\themes 新建一个目录存放主题文件,目录结构如下: 这里我们的目录名是:fictional-university-theme 目录结构就是这样的: fictional-university-theme index.php style.css screenshot.png (放入一张自己的图,命名为screenshot.png) 在style.css中定义主题相关信息,如下
通过yarn快速安装 electron
electron-vue 升级electron到最新的版本后启动不起来,窗口一闪而过。 排查后原因: electron-vue中的集成了很多库 单方面升级了 electron版本,导致了其他库的版本的不匹配 解决: 升级配套库的版本
vue如何将父组件所有的props一次性传递给子组件 <Child v-bind='$props'></Child> demo如下:
scrollTop详测
参照:链接 注意:安装了sass后,sass-laoder的版本不能太高,否则会报 Syntax Error: TypeError: this.getOptions is not a function 我的版本对应关系如下: “sass”: “^1.49.9”, “sass-loader”: “^7.1.0”,
H5页面上用了position:fixed, 在ios上滑动页面到底部,再连点几下,页面就会卡住,刚测试过
vue-element-admin中如何打断点 1、vue.config.js中加一行 devtool: ‘source-map’,
创建一个插件(组件) 目录结构:在src目录下创建一个plugins目录,写我们的button组件
element-ui框架的el-dialog弹出框被遮罩层挡住了
cesium根据id选中实体
disableDepthTestDistance:指定从相机到禁用深度测试的距离,关于深度测试我们将在后面的文章中介绍到,由于深度测试的存在,我们的对象很多时候会被地形挡住,如下:
echarts中formatter配合rich使用
在xAxis配合中加 interval: 0
4.1 Mixins 混入 1. 什么是Mixins 当多个组件内部都写了同样的方法,如何将该方法提取出来,减少代码量呢? Vue实现方式如下:
4、概述 Overview ECMAScript is an object-oriented programming language for performing computations and manipulating computational objects within a host environment. ECMAScript was originally designed to be used as a scripting language, but has become widely used as a general purpose programming languag
3.1、进入/离开 & 列表过渡 1. Overview Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. On this page, we’ll only cover **entering, leaving, **and list transitions, but you can see the next section for managing state transitions. DOM操作时的过渡效果,
2.4 插槽 1. 插槽内容 插槽可以包含任意的模板代码,包括html,甚至其他组件。 如下:<slot></slot> 在渲染时将被替换成组件<text-document> 之间的所有内容
事件的命名规范 组件上事件的命名推荐使用分隔符写法(** kebab-case **),如下面的add-size,因为html是大小写不敏感的,v-on后面跟的事件名都会转成小写的。用大写的会导致监听不到事件。
规定Prop数据类型 props的两种写法,后一种写法,可以规定数据的类型,不符合类型,vue会抛出警告
React change the way that Web apps should be build. UI -> Web apps 四步: Break The UI Into A Component Hierarchy 将UI结构拆解成组件结构 Build A Static Version in React It’s best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requi
State and Lifecycle 何谓state A component needs state when some data associated with it changes over time. For example, a Checkbox component might need isChecked in its state, 组件内部涉及的数据会根据时间条件变化 随着数据的变化,要相应的更新DOM 此时:需要使用state去接收这些不断变化的数据,然后通过setState更新DOM
Basic Branching and Merging 两种合并的情况:Fast-forward,merge-commit 1. Fast-forward 快进 when you try to merge one commit with a commit that can be reached by following the first commit’s history, Git simplifies things by moving the pointer forward because there is no divergent work to merge together — thi
利用分支的两种典型工作流: master分支用来管理稳定发布版本的代码; 另外搞个平行分支 develop用于管理测试版本、不稳定代码 测试通过,将develop分支合并进master分支 topic branch:为了一个新功能、新想法,你可以临时随心所欲的开新分支。
It’s important to note that when you do a fetch that brings down new remote-tracking branches, you don’t automatically have local, editable copies of them. In other words, in this case, you don’t have a new serverfix branch — you have only an origin/serverfix pointer that you can’t modify
两种合并分支的方式:merge,rebase With the rebase command, you can take all the changes that were committed on one branch and replay them on a different branch
User Data: 是微软为IE专门在系统中开辟的一块存储空间,所以说只支持Windows+IE的组合,实际测试在2000(IE5.5)、XP(IE6、IE7),Vista(IE7)下都是可以正常使用的。在XP下,一般位于C:\Documents and Settings\用户名\UserData,有些时候会在C:\Documents and Settings\用户名\Application Data\Microsoft\Internet Explorer\UserData。
HTTP cookies,通常简称为cookies,起初是用来在客户端的会话信息。服务端的响应会在HTTP header中通过Set-Cookie加入会话信息:
Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本
1. canvas内容就是上面这些了,就好比设计师能用的颜色就那么多,但是将颜色,图形组合起来,创意真的是无限的,canvas也是如此。 2. webGL是一个 对OpenGL ES 2.0浏览器实现接口,用于3D绘画,生产阶段最好不要用,可用于实验阶段。
其中 Selectors API Level 1的核心部分定义了两个方法querySelector()、 querySelectorAll(),兼容ie8+ 用在document、Element类型元素上 Selectors API Level 2 规范中定义了 matchesSelector()方法,只能用在Element类型的元素上,判断给定的class或者id是否是当前元素上的属性,兼容ie9+,并且各个浏览器兼容的前缀都不一样,见代码中的对该功能的封装
由JSON数据的格式可以看出,每读取一个目录数据,都可以看成一个JSONObject,JSONObject有两个键值对,text代表目录的名字、children代表子目录。 一个父目录可以有多个子目录,所以children用的JSONArray去表示。
table-layout作用就是让表格布局固定,使表格的宽度不会根据内容多少而动态变化。
用JS实现跟鼠标的互动效果,图片向着鼠标移动的相反方向转动。可以想象一下,Z轴上从远到近,有三张背景透明的图(从屏幕正方看,三张图重叠,看上去就是一张图)然后,让他们在 X轴 或者 Y轴转动,就形成了视差效果。
前两个Options、Methods,就是我们写的简单组件里的参数配置和加在原型里的方法,我们已经很熟悉了,那么Events是什么呢? 这个Events事件跟我们平时用的事件不一样,我们平时用的事件都是系统提供的。而组件开发的事件是自定义事件。
如上code中,创建了p1、p2对象,比较p1中的showName函数和p2中的showName函数,结果为false; 虽然两个对象中的函数的形式、实现的功能都是一样的,但由于p1、p2是对象的引用,分别指向的是不同的两块内存区域,所以比较的结果为false; 假设有1000个对象,就要在内存中开辟1000个内存区域,并且每个对象中都有showName函数,这就极大的浪费了内存空间,怎么办呢?我们想最好把这个showName函数给提出去,作为一个公共函数,这时原型就横空出世了,就是为了解决上述问题。 原型用来提取对象下面公用的方法或者属性,让公用的方法、属性在内存中只存在一份,以提高性能。
通常,我们这样写没问题,但是,当我们需要页面加载后直接就弹出layer时,最常见应用场景就是注册页面加载后直接触发layer,弹出注册协议。 这时候问题来了,我们会发现 弹出的iframe的高度一直是150px,高度并不自适应。 经分析:原因就是layer计算ifram的时候,页面还没加载完全,而ifram本身就是通过页面的高度的进行计算的(因为我高度设置的80%)
jquery实时监控input值的变化、兼容ie9
视图的概念 VIEW ( 视 图 ) 是 一 个 或 多 个 表 的 部 分 数 据 , 它 可 以 像 表 一 样 进 行 CRUD 操 作 , 但 没 有 具 体 的 存 储 数 据 结 构 , 它 以 一 个 SELECTiä 句 的 形 式 存 在 数 据 库 中 。 本 质 : 一 条 有 名 字 的 SELECT 语 句 表 现 : 一 到 多 张 表 的 部 分 内 容
项目中遇到微交互、增加页面用户体验的需求,运用CSS3的transform变化的3D属性就可以达到效果。
W3C 的解释:CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. 即:在改变元素css属性值时,transition可以让这个改变在自己指定时间里平滑的进行。
实际前端开发不再仅仅是静态页面的开发了,丰富的前端技术让前端的代码逻辑越来越复杂, 模块化开发和各类框架也增加了在生产环境中部署开发环境代码的难度,这种情况下,前端自动化构建在前端开发中尤为重要。 我们会遇到下面的问题: a. 每次修改了HTML、JS、CSS等文件,都需要手动刷新浏览器,能不能修改了让浏览器自动刷新呢 ? b. 在发布项目的时候,需要将前端资源进行合并、压缩,尽量减少http请求,手动去完成合并压缩不仅繁琐,还容易出错,有什么技术可以自动地执行这些操作,解放我们的双手呢?
1.实现过程中的注意事项: 鼠标滚轮事件的兼容性问题: W3C并没有对鼠标滚轮事件进行规范,各浏览器厂商封装了不同的实现方法,事件属性也不一样,FireFox用了一个私有实现DOMMouseScroll。其他浏览器都是用mousewheel实现,所以需要做一下兼容处理(详见下面的js关键代码的截图)
原理 定位一个 初始width为0的em元素,hover的时候再将 width设置为容器的width. 再利用transiton对width变化的过程设置过度效果
propertyIsEnumerable用法 语法和功能 obj.propertyIsEnumerable(prop): 判断prop属性是否是obj的可枚举属性
一段js实现复制文本内容到剪切板 该方法兼容所有浏览器~