Vue 鼠标事件

鼠标事件示例：可以实时获得鼠标的x、y轴数据！

    {{ x }},{{ y }}

编写js文件（事件方法）：

new Vue({
       el: '#vue-app6',
      data() {
          return {
                  x: 0,
                  y: 0,
               };
            },
      methods: {
           updateXY(event) {
                  this.x = event.offsetX;
                  this.y = event.offsetY;
               }
            }
        });

在html中引入js文件：

编写css文件:

#canvas{
    width: 600px;
    padding: 200px 20px;
    text-align: center;
    border: 10px solid #3de3e9;
}

在html中引入css文件:

效果图如下：

image.png