原生js获取浏览器窗口及元素宽高常用方法集合

13 二月,2018

窗口可视区域宽度: document.documentElement.clientWidth || document.body.clientWidth;

窗口可视区域高度: document.documentElement.clientHeight || document.body.clientHeight;

窗口可视区域宽度+边线和滚动条: document.body.offsetWidth ;

窗口可视区域高度+边线和滚动条: document.body.offsetHeight ;

实际内容的宽度: document.body.scrollWidth;

实际内容的高度: document.body.scrollHeight;

滚动条下拉被卷起来的距离:document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

滚动条侧拉被卷起来的距离:document.body.scrollLeft || document.documentElement.scrollLeft ;

网页正文部分上:window.screenTop;

网页正文部分左:window.screenLeft;

元素的宽度:obj.offsetWidth;

元素的高度:obj.offsetHeight;

相对于父元素的上位移:obj.offsetTop;(在元素的包含元素不含滚动条的情况下)

相对于父元素的左位移:obj.offsetLeft;(在元素的包含元素不含滚动条的情况下)

Vue 生命周期

13 二月,2018

Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。

 

在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。

Vue 非父子组件传值(基于 Vue-cli)

13 二月,2018

组件之前的通信其实和子组件向父组件传值有些类似,其实他们的通信原理都是相同的,例如子向父传值也是 $emit 和 $on 的形式,只是没有 eventBus,但若我们仔细想想,此时父组件其实就充当了 bus 这个事件总线的角色。

 

用一个 Vue 实例来作为中央事件总线来管理组件通信的方法只适用于通信需求简单一点的项目,对于更复杂的情况,Vue 也有提供更复杂的状态管理模式 Vuex 来进行处理

移动端日期选择器 – mobiscroll.js

31 一月,2018

mobiscroll.js 官网:https://www.mobiscroll.com/

2018年前端到底该学什么?

31 一月,2018

来自:2017年-JavaScript-明星项目 – https://risingstars.js.org/2017/zh/ 网页截图

1 2 3 40