【自用】vue常用方法、原生方法记录

VUE群号：115658205

一、原生方法获取url链接地址

1. window.location.href （当前url）—— http://www.baidu.com:8080/test?id=123

2. window.location.protocol（协议）—— http:

3. window.location.host（域名 + 端口）—— www.baidu.com:8080

4. window.location.hostname（域名）—— www.baidu.com

5. window.location.port（端口）—— 8080

6. window.location.pathname（路径）—— /test

7. window.location.search （请求的参数）—— ?id=123

8. window.location.origin（路径前面的url）—— http://www.baidu.com:8080

二、本地缓存

关闭页面不清除缓存

localStorage.setItem('threeLoginType', '1')
localStorage.getItem("threeLoginType")

关闭页面同时清除缓存
sessionStorage.setItem('info', '')
sessionStorage.getItem('info')

三、数组方法

arr = [1, 2, 3]

删除第一个元素

arr.shift()        ——        arr = [2, 3]

删除最后个元素

arr.pop()       ——        arr = [1, 2]

在数组第一个元素前添加元素

arr.unshift(0)        ——        arr = [0, 1, 2, 3]

splice的数组多面使用方法

1. 删除某个指定元素

arr.splice(index, 1)        ——        arr = [1, 3]

2. 替换某个指定元素

arr.splice(index, 1, 'data.info')       ——        arr = [1, data.info, 3]

3. 新增指定元素在什么地方

arr.splice(index, 1, ['data.info'])       ——        arr = [1, data.info, 2, 3]

四、截取某个字符串

截取最后一位

string.charAt(string.length - 1)

五、css雪碧图动画

首先拥有一个雪碧图

比如这样的

然后html文件生成一个div

<div class="imageSrc"></div>

.imageSrc {
  position: absolute;
  left: 200px;
  width: 45px;
  height: 45px;
  background-image: url("../../../../assets/view.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  animation: 1s move infinite steps(12, end);
  transform: scale(1.5);
}

@-webkit-keyframes move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -576px 0;
  }
}

注意事项

1.  注意雪碧图的张数（帧数）填入

2.  因为雪碧图播放的结果是从右往左滚动的效果，所以动画结束就是图片长度