Vue 鼠标事件

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

<div id="canvas" v-on:mousemove="updateXY">
    {{ x }},{{ y }}
</div>

编写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文件：

<script src="app6.js"></script>

编写css文件:

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

在html中引入css文件:

<link rel="stylesheet" href="style.css ">

效果图如下：

image.png