Vue.js 鼠标移动事件 - 动态改变背景颜色

这段代码使用 Vue.js 框架实现了一个简单的网页，能够实时显示鼠标移动的位置，并根据鼠标位置动态改变一个 div 元素的背景颜色。

步骤：

1. 定义 HTML 文档结构和样式： 创建 HTML 文档，并添加必要的 CSS 样式来设置 div 元素的大小。
2. 引入 Vue.js 框架： 在 HTML 中引入 Vue.js 库文件。
3. 定义 Vue 实例的容器： 创建一个 div 元素作为 Vue 实例的容器，并设置需要显示的数据和样式，例如鼠标位置和背景颜色。
4. 定义 Vue 实例数据和方法： 在 Vue 实例中定义用于存储鼠标位置的 x 和 y 变量，并定义 mouseMove 方法来处理鼠标移动事件，更新 x 和 y 的值。
5. 定义计算属性： 使用计算属性 backgroundColor 根据 x 和 y 的值计算出背景颜色，并将其绑定到 div 元素的 style 属性。
6. 绑定 Vue 实例： 将 Vue 实例绑定到 HTML 中定义的容器 div 元素上。
7. 处理鼠标移动事件： 在 Vue 实例中监听 mousemove 事件，并调用 mouseMove 方法更新数据。
8. 展示效果： 在浏览器中打开 HTML 文件，鼠标移动时，页面上会显示鼠标位置，同时 div 元素的背景颜色也会根据鼠标位置动态变化。

这段代码展示了 Vue.js 的数据绑定、方法和计算属性等功能，以及如何使用事件监听器来响应用户交互。通过学习这个示例，你将能够更好地理解 Vue.js 的基本使用，并将其应用于更加复杂的项目中。