Introduction to optimization methods for resource merging and compression

This article brings you an introduction to the optimization methods of resource merging and compression. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Requirements

Assume that there is a route /news, /login listens for keyboard events, and is only allowed to be valid within the /news page, no matter which page it jumps to later, it will not Triggering the corresponding keyboard event can only be triggered in /news

Problem

Before entering /news, pressing the keys on the keyboard will not trigger the event. After entering /news, regardless of whether you press the keys on the keyboard or not, if you jump to another page and press the keys on the keyboard, the event will be triggered

Code

srcviewsnews.vue

<template>
  <div>
    news
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true, //底部图片列表显示隐藏
      name: "aa"
    };
  },
  methods: {
    keyLeft() {
      alert(this.name);
    },
    keyUp() {
      alert("向上方向键");
    },
    keyRight() {
      alert("向右方向键");
    },
    keyDown() {
      alert("向下方向键");
    },
    keys() {
      var that = this;
      document.onkeydown = function(e) {
        let key = window.event.keyCode;
        if (key == 37) {
          that.keyLeft();
        } else if (key == 38) {
          that.keyUp();
          return false; //有上下滚动条的时候，不向上滚动
        } else if (key == 39) {
          that.keyRight();
        } else if (key == 40) {
          that.keyDown();
          return false; //有上下滚动条的时候，不向上滚动
        }
      };
    }
  },
  created() {
    if (this.flag == true && this.$route.path == "/news") {
      this.keys();
    }
  },
  mounted() {}
};
</script>

The above is the detailed content of Introduction to optimization methods for resource merging and compression. For more information, please follow other related articles on the PHP Chinese website!