事件处理

绑定监听

• 绑定事件使用： v-on:xxx=‘func’ ，可以简写为 @xxx=‘func’ 或者 @xxx=‘func($event)’ ， xxx 是事件名；

  • 默认事件形参： event ；

  • 隐含属性对象： $event ；

• 事件的回调需要配置在 methods 对象中，最终会在 vm 实例对象中（配置在 data 中会被错误地进行数据代理，浪费性能）；

  • 在 methods 中配置函数不能使用箭头函数（如前所述， this 不再是 vm 而是 window ）;

  • 在 method 中配置的函数，都是被 Vue 管理的函数， this 指向 vm 或者组件实例对象；

• 关于事件的传参：

  • @click=“demo” 和 @click=“demo($event)” 的效果一致，但是后者可以传参。

事件修饰符

⭐️ .prevent 阻止事件的默认行为（ event.preventDefault() ）；

🌰 例子：

<a href="https://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

⭐️ .stop 停止事件冒泡（ event.stopPropagation() ）；

🌰 例子：

<div class="demo1" @click="showInfo">
  <button @click.stop="showInfo">点我提示信息</button>
</div>

⭐️ .once 事件只能触发一次：

🌰 例子：

<button @click.once="showInfo">点我提示信息</button>

.capture 事件的捕获模式：（不管事件的冒泡，只遵循设置的事件捕获的顺序）

🌰 例子：

<div class="box1" @click.capture="showMsg(1)">
  div1
  <div class="box2" @click="showMsg(2)">
    div2
  </div>
</div>

.passive 鼠标滚动滚轮 -> 触发 demo 事件 -> 完成后才进行下一步滚轮滚动：事件的默认行为立即执行，无需等待事件回调执行完毕；（多用于移动端）

🌰 例子：

<ul @wheel.passive="demo" class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

⚠️ 事件修饰符可以连续写：（顺序不产生影响）

🌰 例子：

<a href="https://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a>

键盘事件

使用 @keyup=“xxx” 或者 @keydown=“xxx” 监听键盘事件；

使用按键别名监听特定的键盘按键，例如： @keyup.enter='xxx' ；

Vue 中提供的常用的按键别名：回车 enter 、 删除 delete (捕获「删除」和「退格」键)、 退出 esc 、空格 space 、 换行 tab (特殊，必须配合 keydown 去使用)、上 up 、下 down 、 左 left 、 右 right ；（正确的按键名是大写开头，小写开头是按键别名）

Vue 未提供别名的按键，可以使用按键原始的 key 值去绑定，但注意要转为 kebab-case （短横线命名）（例如：对于切换大小写按键 Caps Lock 的别名为 caps-lock （极少使用））；

• 系统修饰键（用法特殊）： ctrl 、 alt 、 shift 、 meta / cmd ：

• 配合 keyup 使用时：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

• 配合 keydown 使用时：正常触发事件。

• 也可以使用 keyCode 去指定具体的按键（因不统一不推荐）： Vue.config.keyCodes.自定义键名 = 键码 ，可以去定制按键别名；

按键修饰符

• keycode ：操作的是某个 keycode 值的键；
• keyName ：操作的某个按键名的键（少）；