index.html

<!-- 单击加1 -->
<button @click="age++">add a year</button>
<!-- 单击减1 -->
<button @click="age--">subtract a year</button>
<!-- 双击加10 -->
<button @dblclick="add(10)">add 10 year</button>
<!-- 双击减10 -->
<button @dblclick="del(10)">subtract 10 year</button>
<p>{{age}}</p>
<!-- 鼠标事件 mousemove-->
<div id="mouse" v-on:mousemove="moveXY">
{{x}} , {{y}}
</div>
<!-- 事件修饰符 -->
<button @dblclick.once="add(10)">双击加10，仅触发一次</button>
<!-- 阻止默认事件 -->
<p><a @click.prevent="tis()" href="http://baidu.com">百度</a></p>

style

<style>
    #mouse {
        width: 400px;
        padding: 200px 20px;
        text-align: center;
        border: 1px solid #000;
    }
</style>

app.js

//实例化一个Vue对象
new Vue({
    el: '#vue-app',
    data() {
        return {
            age: 20,//初始年龄
            x: 0,
            y: 0
        }
    },
    methods: {
        add(num) {//增加十年方法
            this.age += num;
        },
        del(num) {//减少十年方法
            this.age -= num;
        },
        moveXY(event) {//鼠标移动坐标方法
            //console.log(event);
            this.y = event.screenY;
            this.x = event.clientX;
        },
        tis() {//提示方法
            alert('VUE');
        }
    }

})