水电煤项目笔记

从后端请求回来的数据，设置过滤器处理数据（比如截取字符串）的时候，如果不做处理，会报val.slice不是一个函数方法。这是因为异步请求数据，数据在没有到位时会报错，所有过滤器里面要先判断数据是不是存在，存在再处理就不会报错了。

vue里面监听oninput事件的写法 v-on:input="getPassWord(index)"，必须这么写不然没用。其它方法监听不到最后一个密码的输入完成情况，这是一个很好的事件方法。输入框发生的事件流程依次为focus、keydown、input、keyup、change、blur

for (let i = 0; i < res.length; i++) {
     this.$set(this.cityArr, i, res[i]);
}
省市下拉框案例，通过后端二次异步获取省份列表时候，直接把结果赋值给省份列表数组，在dom上不渲染的，因为vue无法监听到数组的变动，这时候需要用到
this.$set(要改变的数组，要改变的位置，要改成的value)，例如
if (res) {
       for (let i = 0; i < res.length; i++) {
                    this.$set(this.cityArr, i, res[i]);
          }
}
经过如上处理，即可完美渲染页面

对象合并，使用Object.assign(目标对象，…源对象)

处理url的query参数，先按?号分割取后面一位
url.split("?").pop()
然后按&分割得到数组arr，然后for循环
let str = arr[i].split('=');
res[str[0]] = str[1];
最终把结果放到res对象里面
完整写法如下
let tempArr = this.message.url
          .split("?")
          .pop()
          .split("&");
        let urlRes = {};
        for (let i = 0; i < tempArr.length; i++) {
          let str = tempArr[i].split("=");
          urlRes[str[0]] = str[1];
        }

vue里面，input自动获取焦点的写法，首先给input一个ref，然后监听他的v-on:input事件
v-on:input="xxx"
this.$nextTick(x => {
          this.$refs.inputActive.focus();
        });

姓名地址加星号的封装办法

let temp = "hello world";
        function star(str,start,len){
            let left = str.substring(0,start);
            let middle = "*".replace(len);
            let right = str.substring(start+len);
            return left+middle+right
        }

解决popup出现滚动穿透问题
@touchmove.native.stop.prevent防止滚动穿透
不管是mt-popup，还是vux的popup，都可以使用这个办法
<popup v-model="show"  position="bottom"  :hide-on-blur=false  @touchmove.native.stop.prevent>
      ......
</popup>
popup外层需要包装一个div<div v-transfer-dom></div>
transfer-dom需要注册，和data同级注册directives: {TransferDom}

绑定事件的办法box.onclick=fn; 或者box.addEventListener("click",fun,false)，注意addEventListener可以绑定多个执行方法，按顺序执行。
解除事件的办法box.onclick = null，或者box.removeEventListener("click", fn, false);

btn.onclick = function(){
clearInterval(timer)
//点击之前最好先清理一下定时器，防止重复点击越来越快的问题
            let timer = setInterval(function () {
            let box = document.getElementsByClassName("box")[0];
//使用公式，对象当前位置 = 对象当前位置 + 步长
// x = x+step
            let x = box.offsetLeft;
            let step = 10;
            x<600 ? (box.style.left = x + step + "px") : clearInterval(timer)
//滑动到600结束，清理定时器
        }, 20)
自动向右滑的方法，box需要先设置绝对定位，让它相对于body的left值不断变大

mintui里面使用mt-index-list做省市二级选择，点击省份以后不滚动到顶部（城市部分不显示）的解决办法
在mt-index-list内容顶部埋一个锚点<div ref="showAnchor"></div>
点击选择省份以后，让锚点进入可视区域
let showAnchor = this.$refs.showAnchor;
showAnchor.scrollIntoView();

vue如何让代码简洁
判断根据情况使用&&，||，return等语句，比如根据一个结果计算另一个结果
let tempRes = await getUserInf()；
下面一定要判断tempRes 的结果，如果有才执行的话，不要使用if else
tempRes && 下面是继续的逻辑
也可以使用if (!tempRes) return;来结束继续往下的执行

watch监听一个值，生成一个结果，比如监听username，渲染真实姓名
如果需要深度监听一个对象里面的值，
可以加参数deep: true，
也可以使用" username.a.b " : " getRealnameByUsername "，后面跟的getRealnameByUsername 是一个methods方法
immediate：true参数，会立即触发，意思是页面渲染时根据username立即处理展示结果，不需要等待username变化，平常都是username变化后才会触发这个方法，这个参数会渲染时即可处理，有点类似计算属性

vue离开页面记录滚动高度，回来时仍然滚动到指定高度的解决办法
data() {
            return {
                topNum: 0  //定义一个变量，接收滚动高度数字
            }
        },
        methods: {
            handleScroll() {
            this.topNum = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//滚动监听事件，滚动后，把滚动高度赋值给高度数字
            }
        },
        created() {
            window.addEventListener('scroll', this.handleScroll, true);
            this.topNum = window.localStorage.topNum;
//进来前定义一个监听滚动的方法，把之前记录的数字读取出来
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                document.documentElement.scrollTop = vm.topNum;
//进入前，滚动到指定高度
            })
        },
        beforeRouteLeave(to, from, next) {
            window.localStorage.topNum = this.topNum;
//离开前，把滚动高度记录下来
            next()
        }


//jquery原生的写法，下面两个方法都要放到$的init初始化中
function scrollListenr(){
    // 监听滚动，记录高度
  $(document).scroll(function (){
    let scrollTop = $(this).scrollTop()
    setStore("scrollTop",scrollTop)
  })
}

function toTop(){
    // 回来时候,如果有高度，就滚动到指定高度
    let top = getStore("scrollTop")
    if(top!==undefined){
      $('html,body').animate({scrollTop: top},50);
    }
}

把数组的下标转换成ABCD的过滤器写法
index2Letter(val){
return "ABCDEFG"[val]
}
或者使用更为简洁的写法index2Letter:(val)=>"ABCDEFG"[val],

vue背景图引入的方法
1. data里面定义img，引入图片，img:require('../assets/imgs/600.jpg')
或者script顶部引入import img from "../assets/imgs/600.jpg"，然后img:img
2. 然后在元素上使用:style="{backgroundImage:`url(${img})`}"

momentjs格式化时间，如果一直出现格式成1970年，八成是因为字符串原因，把时间戳转数字再格式化就正常了。
{{parseInt(item.createTime)|datetime}}

created里面，可以拿到this.slots.default"><slot></slot></span>
意思是只有传了默认slot插槽，这个span才显示，不然就不显示。

获取使用人的ip，进而获取其所在省份城市
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">
console.log(returnCitySN["cip"])
console.log(returnCitySN["cname"])
</script>