事件监听

点击事件

v-on

<button id="app"
    v-on:click="add">
    点击
</button

<script>
    let app = new Vue({
    el: '#app',
    methods: {
        add() {
            console.log('add+');
        }
    }
})
</script>

语法糖

替换 v-on 为 @ 即可

<button id="app"
    @click="add">
    点击
</button

参数（$event）

下列两种写法相等

<button id="app"
    @click="add($event)">
    点击
</button>

<button id="app"
    @click="add">
    点击
</button>

修饰符

.stop 阻止冒泡，点击 btnClick 的时候，阻止上级按钮点击事件

<div @click="divClick">
    <div @click.stop="btnClick">
    </div>
</div

.prevent 阻止默认事件，例如 submit

.enter、.space 等具体键位

<input type="text" @keyup.enter="keyUp" />

<input type="text" @keydown.enter="keyDown" />

.once 只触发一次