SOURCE

 var app= new Vue({
        el:"#app",
        data:{
            link:"https://www.google.com",
            counter:0,
            x:0,
            y:0,

        },
        methods:{
            increase:function(step){
                this.counter+=step;
                return this.counter;
            },
            getMouseXY:function(event){
                this.x=event.x;
                this.y=event.y;
            },
            
            stopPoint:function(event){
                event.stopPropagation();
            }
            

            }

            
        
    })

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <!-- v-bind 链接 -->
    <a v-bind:href="link"> Google </a>

    <!-- v-on 按钮增加2 -->
    <button @click="increase(2,$event)">按钮增加2</button>
    <!-- 可以在写methods的地方加表达式，但是不能有选择语句 -->
    <button @click="counter++">按钮增加1</button>
    <p>{{counter}}</p>

    <!-- 鼠标坐标 -->
    <!-- <p @mousemove='getMouseXY'>坐标:{{x}},{{y}}</p> -->
    <!-- 用JS event.stopPropagation() -->
    <p @mousemove='getMouseXY'>坐标:{{x}}   {{y}}
        -------<span @mousemove='stopPoint'>Stop Point</span>
    </p>
    <!-- 用VUE修饰符 -->
     <p @mousemove='getMouseXY'>坐标:{{x}}   {{y}}
        -------<span @mousemove.stop>Stop Point</span>
    </p>
    
    


</div>