画布 1
事件处理
  监听事件
    1. 可以使用 v-on 指令来监听事件
    2. 触发事件时执行一些JS代码
    3. 用法
      1. v-on:click="xxx"
      2. @click="xxx"
      注意：xxx可以是一个js表达式，也可以是一个事件处理函数
      一般使用第二种方式@
  事件处理函数
    1. 简介
      通常事件处理逻辑比较复杂，所以我们会写成一个函数，这个函数就被称为事件处理函数，也叫事件处理器
    2. 形式
      @click="methodName"
      注：methodName就是事件处理函数，它会自动去组件实例身上找对应的函数
    3. 注意
      事件处理函数默认会传递原生event对象
  处理函数可传递参数
    1. 可以像正常函数调用一样，给事件处理函数传递参数
    2. 如果需要访问原始的DOM事件，需手动传递$event，表示原生event
  多个处理函数
    1. 支持一个事件多个处理函数
    2. 多个函数通过逗号分隔
  事件修饰符
    1. 简介
      Vue.js 为 v-on 提供了事件修饰符
    2. 形式
      以点开头
    3. 几个常见修饰符
    4. 修饰符可以连续出现多个
      形式
        如：v-on:click.prevent.self
      注意
        注意：多个修饰符顺序不同，效果会不一样
    5. 按键修饰符
    6. 系统修饰键
      系统修饰符其实就是按下ctrl或alt或.shift或meta，同时按下某个键时，才触发事件
      例如
        <!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
      需要注意修饰符的顺序
    7. .exact 修饰符
      用于更精准的控制修饰符
      <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
      <!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
    8. 鼠标按钮修饰符
      .left
        左键
      .right
        右键
      .middle
        中间滚轮
  使用v-on的好处
    1. 扫一眼模板便能轻松定位在js中对应的方法
    2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试
    3. 无须担心如何清理它们
      当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除
  3. 几个常见修饰符
    .stop
      表示停止冒泡
    .prevent
      表示阻止默认事件
    .capture
      表示使用事件捕获模式
    .self
      表示当在event.target 是当前元素自身时触发处理函数
    .once
      表示事件只会触发一次
    .passive
      表示处理事件函数中不会调用preventDefault函数
  5. 按键修饰符
    .enter
      当按下键盘的Enter键时触发
    .tab
      按下Tab键时
    .delete
      按下删除或退格键时
    .esc
      按下Esc时
    .space
      按下空格时
    .up
      按向上箭头时
    .down
      按向下箭头时
    .left
      按向左箭头时
    .right
      按向右箭头时
    除此以外，还可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符，比如<input @keyup.page-down="onPageDown" />