- 博客(114)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 监听移动设备的旋转/orientationchange
window.addEventListener('orientationchange', orientationChangeHandler);orientationChangeHandler(){ // Returns the orientation in degrees (in 90-degree increments) of the viewport relative to the device's natural orientation const orientation = w.
2021-07-06 21:11:53
228
原创 transform对定位的影响/fixed失效
场景：元素fixed定位，始终位于视口某一个位置，但是并没有按照预想实现固定定位，最后查到问题是transform引起的；根据w3c的解释是transform会创建新的包含块，fixed以及absolute都会以改元素定位；position:fixed在遇到有transform祖先元素时，定位的相对对象变为该元素/最近的有定位的父级,表现为相对于该元素绝对定位position:absolute在遇到transform祖先元素时，定位的相对对象变为该元素/最近的有定位的父级fixed定位失
2021-07-06 20:57:30
1516
原创 webpack4.0中使用“extract-text-webpack-plugin”报错
报错内容：Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead可以使用npm install extract-text-webpack-plugin@next 解决
2020-04-11 20:36:04
320
原创 No PostCSS Config found in XXXXXX
引入了common.less之后cnpm run serve 报错 No PostCSS Config found in XXXXXXX解决办法：在src同级目录下创建postcss.config.js,并添加下面代码module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} ...
2020-04-07 11:21:43
1934
原创 计算属性
计算属性 computed计算属性怎么用<template> <div>{{ getMsg }}</div></template><script> export default { data() { return { msg: 'I am ' }; }, computed: { getM...
2019-11-20 18:00:06
160
原创 元素始终置于页面底部
本文实例： 按钮始终在距离页面底部16px的位置，注意是页面底部，不是屏幕底部如果放置在屏幕底部，只需要给元素设置以下内容.element { position: fixed; bottom: 16px;}如果需要放在页面底部，需要完成下面几步1、给父元素设置position: relative;2、保证父元素是包裹所有内容区，并且设置最小高度为100%；...
2019-11-15 18:46:15
5697
原创 小程序之生命周期汇总
小程序的生命周期App({ onLaunch (options) { // Do something initial when launch. console.log('初始化，全局只触发一次'); }, onShow (options) { // Do something when show. console.log('小程序启动，或从后台进入前...
2019-11-12 17:56:57
163
原创 Vuex中的Module
什么是Module？Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块{ moduleA: { state: {}, mutation: {}, action: {}, getters: {} }, ...
2019-11-05 17:51:33
222
原创 flex布局
先说flex中经常用在容器中的属性/* 在主轴的对齐方式 */justify-content: flex-start | flex-end | center | space-between | space-around;/* flex-start 左对齐 *//* flex-end 右对齐 *//* center 居中 *//* space-between 两端对齐，项目之间...
2019-10-25 17:33:55
115
原创 浏览器缓存
本文主要讲浏览器的强缓存与协商缓存以及缓存过程浏览器发出请求强缓存就发生在前两步，强缓存有两个规则，expries和max-ageexpries： 指定资源在一个时间点之前都可以使用缓存max-age： 表示在上一次有效请求之后的一个事件段内请求资源都可以使用缓存，max-age是cache-control的值cache-control:max-age=1000;区别：...
2019-10-24 17:55:22
155
原创 vs code 启动之后卡顿问题 （rg.exe）
启动vscode之后发现电脑卡成……，打开任务管理器，可以看到占用cpu最高的是rg.exe，rg.exe是维护符号连接的工具程序，造成卡顿问题就是它，可以直接右键结束任务，但是每次开始vscode都要重复操纵；下面提供解决办法打开’设置‘，快捷键<ctrl + ,>，搜索symlinks 或者search.followSymlinks去掉勾选，ok，重新打开v...
2019-10-24 10:07:49
2433
1
原创 Vue 中 ref='msg' $refs 是什么
如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。var sonNode = { template: `<div>{{msg}}</div...
2019-10-17 16:52:16
446
原创 Vue组件通信props, $emit
父组件向子组件传递 场景：爸爸说：乖儿子；儿子显示父亲说的话在父组件使用v-bind绑定属性，在子组件使用props接收var sonNode = { props: ['fatherWords'], template: `<div>{{ fatherWords }}</div>`};var fatherNode = { ...
2019-10-17 16:25:45
131
原创 display:box兼容写法
/* display:box; */.box{ /* display */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box; /* box-orient */ /** * vert...
2019-10-17 15:11:36
148
原创 文本超出打点处理（单行，多行）
单行文本超出打点：{ overflow:hidden; /* 超出部分隐藏 */ white-space: nowrap; /* 文本不换行 */ text-overflow：ellipsis；/* 省略的文本用省略号表示 */}多行文本超出打点：不考虑兼容性的情况下：{ -webkit-line-clamp: 3; /*用来限制在一个...
2019-09-11 15:56:54
1873
原创 节流和防抖
防抖：当持续触发事件时，在一段时间内不再触发才执行，若再这段时间内触发则延时重新开始；///函数防抖 func执行触发函数 timer 等待时间 flag true为先执行后等 false 先等后执行function debounce(func, time, flag) { var timer = null; //this指向window var debounced ...
2019-08-30 17:36:49
92
原创 display:inline-block造成的元素间隔以及高度错位
当设置display：inline-block的时候，可能会出现或者，这是因为此时的元素具有文本属性，只要标签与标签之间有间隔都会被当作以一个字体大小的空格，那么自然就会出现间隙，而垂直方向上，文本的基线不同就会造成错位；解决方法：添加以下代码#parent{ font-size: 0; letter-spacing:-4px; /* font-size:0; 在sa...
2019-08-28 15:36:32
713
原创 Vue-router
什么是路由？后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路...
2019-08-12 15:57:01
175
原创 浅谈Vuex
什么是Vuex？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以理解为Vue 配套的 公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，方便 整个程序中的任何组件直接获取或修改我们的公共数据；var store = new Vuex.Store({ state:{ count: 0 }, // 使用this.$s...
2019-08-12 14:48:28
105
原创 Vue自定义指令
<div id="app"> <input type="text" v-focus> <div v-demo:foo.a.b='message'></div> <p v-pin:left='300'>远离direction 300px</p> <p v-abbreviation="...
2019-08-12 14:20:52
230
原创 Vue过滤器
过滤器可以用在两个地方：双花括号插值和v-bind表达式以下代码是Vue官方文档中的例子，将输入到input框中的字符串首字母大写输出<div id="app"> <input type="text" v-model="msg"> <!-- msg 作为 唯一的参数传递给 capitalize --> <p>{{...
2019-08-12 14:06:11
79
原创 求数组的差集，交集，并集
//差集var difference = array1.concat(array2).filter(value => (array1.includes(value) && !array2.includes(value)) || (array2.includes(value) && !array1.includes(value)))；//交集funct...
2019-06-29 11:12:53
1218
原创 JavaScript 对象深度克隆
function deepClone(target, origin) { var target1 = (origin instanceof Array) ? [] : {}; //origin是对象还是数组 var target = target || target1; var toStr = Object....
2019-06-19 15:46:14
227
原创 TCP为什么不两次握手三次挥手？
为什么不是两次握手的原因：假定出现一种异常情况，即发送方A发出的第一个连接请求报文段并没有丢失，而是在某些网络结点长时间滞留，以致延误到连接释放以后的某个时间才到接收端B，本来这是一个早已失效的报文段，但接收方B接收到后误认为是发送方A又发出了一次新的连接请求，于是就向A发出确认报文段，同意建立连接。假定不采用报文握手，那么只要B发出确认，新的连接就建立了。由于A并没有发出建立连接的请求，因此...
2019-06-16 20:15:28
1933
原创 关于https的理解
http和https：关于http的内容https：是安全的http，是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。SSL是网景公司开发的安全协议，作用在端系统应用层的HTTP和运输层之间，在TCP之上建立起一个安全通道，为通过TCP传输的应用层数据提供安全保障。SSL增强了TCP服务，因...
2019-06-16 17:21:52
582
原创 用git搭建个人博客
1.安装 Node.js2.安装 Git3.全局安装Hexo 在命令框中输入 npm install -g hexo-cli4. hexo init <folder> cd <folder> npm install这里是在E:/myBlog5. hexo server 可以启动服务器，默认是 http://localh...
2019-06-09 18:03:34
3085
原创 git创建仓库
1.初始化本地仓库 新建一个文件夹，在文件夹内右键选择Git Bash Here ，在命令框内输入 git init , 这时新建的文件内会有一个隐藏文件夹.git2.在GitHub上新建一个仓库3.本地仓库与远程仓库建立联系 在命令框中输入 git remote add origin 远程仓库地址建立连接之后可以使用 git remote -v 查看远程仓库4....
2019-06-09 15:33:57
158
原创 prototype和__proto__
当创建一个新函数时，就会为该函数创建一个prototype属性，指向函数的原型对象，所有的原型对象都会自动获取一个constructor（构造函数）属性，这个属性是一个指向prototype所在函数的指针function A() {}当调用构造函数创建一个实例时，该实例的内部将包含一个指针[[prototype]](内部属性),并且指向构造函数的原型对象，可以用__prot...
2019-06-08 11:49:32
108
原创 css-loader问题
安装css-loader时出现npm ERR! code ETARGETnpm ERR! notarget No matching version found for css-loader@^8.0.6npm ERR! notarget In most cases you or one of your dependencies are requestingnpm ERR! notarge...
2019-06-04 18:28:29
531
原创 webpack4.x CommonsChunkPlugin 问题
plugins:[ new webpack.optimize.CommonsChunkPlugins({ name:'commons', filename:'commons.js', minChunks:2 })]显示错误信息Error: webpack.optimize.CommonsChunkPlugin has be...
2019-06-04 17:03:07
1334
转载 监听浏览器窗口改变
$(window).resize(function () { //当浏览器大小变化时 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(document.body).height()...
2019-05-17 15:11:02
349
原创 判断鼠标从哪个方向进入盒子
var x = e.offsetX - elem.spec.x/2;//鼠标进入的X坐标-盒子宽度的一半var y = e.offsetY - elem.spec.y/2;//鼠标进入的y坐标-盒子宽度的一半var direction = (Math.round((Math.atan2(y, x) * (180/Math.PI) + 180)/90) + 3)%4;direction=0...
2019-05-16 11:09:15
383
1
原创 e.clientX,e.clientY,e.pageX,e.pageY,e.offsetX,e.offsetY,e.screenX,e.screenY
e.clientX ，e.clientY鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。e.pageX,e.pageY鼠标相对于文档的坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。e.offsetX,e.offsetY鼠标相对于事件源的元素的X，Y坐标。event.screenX、event.screenY鼠标相对于用户...
2019-05-04 10:11:04
227
原创 JavaScript模拟重力场
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
2019-04-26 20:31:50
754
1
原创 超文本传送协议HTTP
1.什么是HTTP？HTTP是面向事务的应用层协议，是万维网上能够可靠地交换文件（包括文本，声音，图像等各种多媒体文件）的重要基础；2.HTTP报文种类以及结构请求报文-------从客户向服务器发送请求报文 请求行包括方法，URL，协议版本，方法就是对所请求的对象进行的操作，实际上是一些命令，请求报文的类型是由它所 采用的方法决定的。...
2019-04-21 15:22:02
349
原创 垃圾收集
Javascript具有自动垃圾收集机制，即执行环境会负责管理代码执行过程中使用的内存。垃圾回收机制的原理：找出那些不再继续使用的变量，然后释放其占用的内存。垃圾回收机制的两种策略：1.标记清除 1)垃圾收集器在运行的时候给存储在内存中的所有变量都加上标记 2)去掉环境中的变量以及被环境中的变量引用的变量的标记。 ...
2019-04-01 21:39:57
124
原创 Ajax基本用法总结
Ajax的核心：XMLHttpRequest对象1.首先需要创建XMLHttpRequest对象； var xhr=new XMLHttpRequest();注意：IE7之前的版本不支持 如果需要支持IE7之前的版本，可以自己封装函数function createXHR() { if (typeof (XMLHttpRequest) != "undefined") { ...
2019-04-01 16:47:26
292
原创 制作的天气预报(JSONP跨域)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="weather.css"> <link rel="stylesheet" href="https://cdn.static...
2019-03-31 18:03:12
518
原创 JSON
1.语法：（1）简单值：string，number，boolean，null （2）对象 必须要给属性加上引号，与js中的对象字面量相比，json中的对象没有声明变量，末尾没有分号{ "name":"xiaoming", "age":18} （3）数组 JSON数组也没有变量和分号[18,"xiaomi...
2019-03-30 11:14:37
103
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人