将这段js代码转换为vue中的js代码template div class=hz div class=shell div class=img div div divtemplatescriptexport default mounted const img = this$refsimg imgaddEventListenermouseenter

<template>
  <div class="hz">
    <div class="shell">
      <div class="img" ref="img">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    const img = this.$refs.img
    img.addEventListener('mouseenter', (e) => {
      this.x = e.clientX
      this.y = e.clientY
    })
    img.addEventListener('mousemove', (e) => {
      this._x = e.clientX
      this._y = e.clientY
      const disx = this._x - this.x
      const disy = this._y - this.y
      const movex = disx * 2
      const movey = -600 + disy / 1.6
      img.style.backgroundPosition = `${movex}px ${movey}px`
    })
  }
}
</script>
<style scoped>
.hz {
  padding: 0;
  margin: 0;
}
.shell{
  width: 100%;
  height: 100vh;
}
.img{
  width: 100%;
  height: 100%;
  /* 是只按照x轴重复 */
  background-repeat:repeat-x;
  background-image: url("@/assets/img.jpg");
  /* 是指图片的偏移，第一个值是x轴的偏移，第二个值是代表y轴的偏移，
  我们先将y轴向下偏移600个像素，使图片达到上下居中 */
  background-position: 0 -600px;
}
</style>