1. <html>
    2.   <body>
    3.     <div id="app">
    5.       </br>
    6.     <!-- 正常写法 -->
    7.     <p v-on:mousemove="myMouseMove"> 鼠标移动 </p>
    8.     </br>
    9.   mouseX:{{myMouseX}} </br>
    10. mouseX:{{myMouseY}} </br>
    11. </br>
    13. <!-- 缩写写法 -->
    14. <p @mousemove="myMouseStop"> 鼠标停止1 </p>
    15. </br>
    17. <!-- 事件修饰符 -->
    18. <p @mousemove.stop> 鼠标停止2 </p>
    20. </div>
    21. </body>
    23. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    24. <script>
    25.   new Vue({
    26.     //指定作用于那一个div
    27.     el:'#app',
    28.     //属性
    29.     data:{
    30.       myMouseX:0,
    31.       myMouseY:0,
    32.     },
    33.     methods:{
    34.       myMouseMove:function(event){
    35.         this.myMouseX=event.clientX;
    36.         this.myMouseY=event.clientY;
    37.       },
    38.       myMouseStop:function(event){
    39.         event.stopPropagation();
    40.       }
    41.     }
    42.   });
    43. </script>
    45. </html>