2.1 事件处理

2.1 事件处理

2.1.1 事件处理的核心语法

(1) 指令的语法格式：<标签 v-指令名:参数=”表达式”></标签>
(2) 事件绑定的语法格式：v-on:事件名。例如鼠标单击事件的绑定使用v-on:click。
(3) 绑定的回调函数需要在Vue实例中使用methods进行注册。methods可以配置多个回调函数，采用逗号隔开。
(4) 绑定回调函数时，如果回调函数没有参数，( )可以省略。
(5) 每一个回调函数都可以接收一个事件对象event。
(6) 如果回调函数有参数，并且还需要获取事件对象，可以使用$event进行占位。
(7) v-on:click可以简写为@click。简写的语法格式：@事件名
(8) 回调函数中的this是vm。如果回调函数是箭头函数的话，this是window对象，因为箭头函数没有自己的this，它的this是继承过来的，默认这个this是箭头函数所在的宿主对象。这个宿主对象其实就是它的父级作用域。而对象又不能构成单独的作用域，所以这个父级作用域是全局作用域，也就是window。
(9) 回调函数并没有在vm对象上，为什么通过vm可以直接调用函数呢？尝试手写Vue框架。
(10) 可以在函数中改变data中的数据，例如：this.counter++，这样会联动页面上产生动态效果。

2.1.2 事件修饰符

(1) .stop - 调用 event.stopPropagation()。

<div @click="san">  
  <div @click.stop="er">  
    <button @click="yi">{{name}}</button>  
  </div>  
</div>

(2) .prevent - 调用 event.preventDefault()。

<a href="http://www.bjpowernode.com" @click.prevent="yi">
     {{name}}
</a>

(3) .capture - 添加事件侦听器时使用 capture 模式。

<div @click.capture="san">
  <div @click.capture="er">
     <button @click="yi">{{name}}</button>
  </div>
</div>

注意：只有添加了 capture 修饰符的元素才会采用捕获模式。（或者说带有 capture 修饰符的优先触发）
(4) .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

<div @click="san">
  <div @click.self="er">
    <button @click="yi">{{name}}</button>
  </div>
</div>

(5) .once - 只触发一次回调。

<button @click.once="yi">
    {{name}}
</button>

(6) .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
①无需等待，直接继续（立即）执行事件默认行为。（对 wheel 事件有效果）
② .passive 和 .prevent 修饰符不能共存。

2.1.3 按键修饰符

1. 常用的按键修饰符包括：
   (1) .enter
   (2) .tab （只能配合 keydown 使用）
   (3) .delete (捕获“删除”和“退格”键)
   (4) .esc
   (5) .space
   (6) .up
   (7) .down
   (8) .left
   (9) .right
   2. 可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
   
   3. 可以通过全局 config.keyCodes 对象自定义按键修饰符别名
   Vue.config.keyCodes.huiche = 13

2.1.4 系统修饰键

1. 系统修饰键包括 4 个
   (1) .ctrl
   (2) .alt
   (3) .shift
   (4) .meta
   2. 系统修饰键在使用时应注意：
   (1) 只有当系统修饰键和其他键组合使用，并且组合键释放时，才会触发 keyup 事件。
   (2) 只要按下系统修饰键，就会触发 keydown 事件。
   3. 小技巧
   (1)