vue的一些用法

动态设置html的title

使用vue前端框架做，竟然丢弃了很多javascript和html的东西了。。 动态设置title的方法：

1.使用vue的自定义指令

<div v-title>{{htmltitle}}</div>
...
directives: {
  title: {
      inserted: function (el, binding) {
          document.title = el.innerText
          el.remove()
      }
  }
}

2.很简单

// 设置html title
document.title = sessionStorage.getItem('title')

3.router路由不同的title

...
routes: [
        {
            path: '/index',
            name: 'index',
            component: index,
            meta:{
                title:'首页'
            }
        },
        {
            path: '/user',
            name: 'user',
            component: user,
            meta:{
                title:'个人中心'
            }
        }
    ]
...
router.beforeEach((to, from, next) => {
    if (to.meta.title) {
        document.title = to.meta.title
    }
    next()
})

防抖和节流

防抖是好老师，只要有学生捣乱，一个知识点老师就要重新讲

节流是坏老师，管你有没有学生捣乱，45分钟到点下课就走人。

防抖

在vue中使用

使用element-ui的select下拉异步组件，查询接口（限制操作后3s内查询，

<template>
  <el-select
    v-model="value"
    filterable
    remote
    placeholder="请输入公司名称"
    :remote-method="remoteMethod"
    :loading="loading"
    @change="changeHandle"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.name"
    >
    </el-option>
  </el-select>
</template>

<script>
// 防抖：在事件被触发n秒之后执行，如果在此期间再次触发事件，则重新开始计时。
// 自执行函数
const delay = (function() {
  let timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();

export default {
    data() {
        return {
          options: [],
          value: "",
          loading: false,
        };
    },
    methods: {
    remoteMethod(query) {
      let that = this;
      that.options = [];
      that.loading = true;
      if (query !== "") {
        // console.log(
        //   `当前输入:${query}===:${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`
        // );
        delay(() => {
          console.log(
            `联想搜索:${query}===:${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`
          );
          // 查询接口
          fetchCompanyNameList(query).then(res => {
            that.loading = false;
            that.options = res.data || [];
          });
        }, 3000);
      } else {
        that.options = [];
      }
    }
  }
}
</script>

另一种实现方式

...
function delayXYSZ(fn, delay) {
  let timer;
  // 使用闭包 保证每次使用的定时器是同一个
  return d => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn(d);
      clearTimeout(timer);
    }, delay);
  };
}
export default {
    data() {
    return {
      options: [],
      value: "",
      loading: false,
      xiaoyu: delayXYSZ(query => {
        console.log(
          `联想输入:${query}===:${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`
        );
        // 查询接口
      }, 3000)
    };
  },
  methods: {
    remoteMethod(query) {
      let that = this;
      that.options = [];
      that.loading = true;
      if (query !== "") {
        // console.log(
        //   `当前输入:${query}===:${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`
        // );
        this.xiaoyu(query);
      } else {
        that.options = [];
      }
    }
  }
}