03. 事件

v-on

缩写：v-on:event="doSomething" ⇒ @event="doSomething"

// 1.如果调用的方法不需要传入参数，则括号可以省略
<button @click = "increase">+</button>
methods: {
    increase: function() {
        this.counter++;
    }
}
 
// 2.省略括号，而且不传参，方法会默认有一个DOM Event对象
<button @click = "increase">+</button>
methods: {
    increase: function(value) {
        console.log(value); // 打印 MouseEvent(...)
    }
}
 
// 3.不省略括号，而且不传参，那么形参为undefined
<button @click = "increase()">+</button>
methods: {
    increase: function(value) {
        console.log(value); // 打印 undefined
    }
}
 
// 4.同时需要传入参数和event
<button @click = "increase('abc', $event)">+</button>
methods: {
    increase: function(value1, value2) {
        console.log(value1, value2); // 打印 abc 和 MouseEvent(...)
    }
}

事件修饰符：

• .stop（阻止事件冒泡）
• .prevent（阻止默认行为）
• .capture（使用事件捕获模式）
• .self（只当事件是从侦听器绑定的元素本身触发时才触发）
• .once（只会触发一次）
• .passive（不阻止默认行为，改善移动端设备的滚屏性能）
• .native（监听组件根元素的原生事件）

按键修饰符：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统修饰符：

• .ctrl
• .alt
• .shift
• .meta