7. 事件处理

Vue用v-on来绑定事件

<div id="root">
   <button v-on:click="fn">点击</button>
</div>

const vm = new Vue({
 el: '#root',
 methods: {
   fn() {
     console.log('hello world !')
  }
 }
})

传参与event对象

• 当只有一个参数时，可以不需要写()；执行的方法默认参数就是event对象；
• Vue提供了事件对象$event供我们使用

<button v-on:click="fn('hello', $event)">点击</button>

• 事件修饰符
• .stop
• .prevent
• .capture
• .self
• .once
• .passive
• 按键修饰符
• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right
• 自定义按键修饰符 Vue.config.keyCodes.f1 = 112