vue小型travel项目遇到的知识汇总（3）

1、获取高度: https://cloud.tencent.com/developer/article/1399084

scrollHeight:获取对象的滚动高度

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对与版面或由父坐标offsetParent属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置

event.clientX相对文档的水平坐标

event.clientY相对文档的垂直坐标

event.offsetX相对容器的水平坐标

event.offsetY相对容器的垂直坐标

document.documentElement.scrollTop垂直方向滚动的值

event.clientX+documentElement.scrollTop相对文档的水平坐标+垂直方向滚动的量

2、事件对象e、移动端touch事件

https://www.cnblogs.com/WangYujie1994/p/10246100.html

https://www.cnblogs.com/cangqinglang/p/8794621.html

3、鼠标点击字母，页面跳转到对应字母开头的所有所有城市列表行；

    手指在字母上滑动，页面滚动到对应字母开头的所有所有城市列表行

首先字母列表和城市列表为兄弟子组件
字母列表的变化带动城市列表变化
实现方式：
1、字母列表通过$emit向父组件触发event事件对象也就是字母值A-Z；
2、父组件通过v-on监听到字母值变化，再将其传递给城市列表子组件；
3、城市列表子组件通过props获取到字母表变化，并通过$refs以及scroll插件实现指定页面跳转和页面滚动功能，页面跳转通过click事件进行监听并跳转，页面滚动需要获取字母的高度来并结合scroll实行滚动以及节流优化
4、同时使用的scroll插件默认会阻止touch事件。所以在配置中需要加上click: true
   第4点参照：https://mp.youkuaiyun.com/postedit/89886474

4、节流,限制函数执行频率

https://www.jianshu.com/p/c8b86b09daf0

https://www.cnblogs.com/momo798/p/9177767.html

节流和防抖——在进行窗口的resize、scroll、输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担

1、节流
减少执行次数，可能在事件触发完成期间执行了几十次，通过节流限制其执行次数，在限定的时间后执行一次

var throttle = function(func, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {                    
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        

2、防抖
触发事件后在 n 秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。
function debounce(func, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null){
             clearTimeout(timeout); 
        }//如果在wait秒内又触发了事件，再次清除并重新计算函数执行时间。   
        timeout = setTimeout(func, wait);    
    }
}

5、vuex实现数据共享

state、action、mutations
state相当于一个存储公用数据的仓库
在根组件上注册store可以在每一个子组件上使用存储在store中的公共数据
如果子组件想要更改保存在state中的公共数据（无法直接更改state内的数据），
可以调用store.commit('callback名',payload/对象)方法触发mutations变更数据
但是mutation只能进行同步操作
如果想进行异步操作，可以调用store.dispatch()方法触发actions

6、vue-devtools

1、下载地址https://github.com/vuejs/vue-devtools
2、终端命令：
sudo npm install
npm run build
3、打开浏览器设置内的扩展程序选项，将文件夹内的shell->chrome加载项添加进浏览器