Vue.js 鼠标移动事件监听 - 实时改变背景色

这段代码使用 Vue.js 监听鼠标移动事件，并根据鼠标坐标实时改变页面背景色。

计算过程:

1. 创建 Vue 实例: 代码首先创建了一个 Vue 实例，并将其绑定到 HTML 页面中 id 为 'app' 的 div 元素上。
2. 定义数据: Vue 实例包含一个 data 属性，用于存储鼠标的 x 和 y 坐标，初始值都为 0。
3. 定义方法: 代码定义了一个名为 mouseMove 的方法，该方法在监听到鼠标移动事件时会被调用。在方法中，更新 data 属性中存储的 x 和 y 坐标，以记录鼠标的当前位置。
4. 计算属性: 代码定义了一个名为 backgroundColor 的计算属性，该属性根据 data 中的 x 和 y 坐标值计算出当前的页面背景色，并返回该值。
5. 绑定事件: 在 HTML 中，使用 v-on 指令监听鼠标移动事件，并调用 mouseMove 方法。
6. 绑定样式: 使用 v-bind 指令将 backgroundColor 计算属性绑定到 div 元素的 style 属性上，从而实时更新 div 元素的背景色。
7. 显示坐标: 使用双括号语法 {{x}} 和 {{y}} 将 data 中存储的 x 和 y 坐标值显示在页面上。

流程图:

代码解释:

let vm = new Vue({
  el: '#app',
  data: { x: 0, y: 0 },
  methods: {
    mouseMove(event) {
      this.x = event.offsetX;
      this.y = event.offsetY;
    }
  },
  computed: {
    backgroundColor() {
      const c = (this.x + this.y).toString(16);
      return c.length === 2
        ? `#${c}${c}${c}`
        : `#0${c}0${c}0${c}`;
    }
  }
});

这段代码演示了如何利用 Vue.js 的响应式数据绑定和计算属性来实现动态更新页面元素的样式。当鼠标移动时，mouseMove 方法会更新 data 中的 x 和 y 坐标，进而触发 backgroundColor 计算属性的重新计算，最终更新 div 元素的背景色，实现实时改变页面背景色的效果。