Vue 事件处理器

事件处理器

• 为什么在 HTML 中监听事件?
  所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。
  使用 v-on 有几个好处：
  

  1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

  2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

  3. 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

• 监听事件
  事件处理的逻辑都很复杂，v-on 可以接收一个定义的方法来调用。
  
  
• 方法事件处理器
  
  
• 内联处理器方法
  <button v-on:click="say('hi')">Say hi</button>
  

  需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：
  <button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
  
  

  // ...

  methods: {

  warn: function (message, event) {

  // 现在我们可以访问原生事件对象

  if (event) event.preventDefault()

  alert(message)

  }

  }

   

• 事件修饰符
  更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节
  在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
  

  通过由点(.)表示的指令后缀来调用修饰符。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once

  <!-- 阻止单击事件冒泡 -->
  <a v-on:click.stop="doThis"></a>
  <!-- 提交事件不再重载页面 -->
  <form v-on:submit.prevent="onSubmit"></form>
  <!-- 修饰符可以串联  -->
  <a v-on:click.stop.prevent="doThat"></a>
  <!-- 只有修饰符 -->
  <form v-on:submit.prevent></form>
  <!-- 添加事件侦听器时使用事件捕获模式 -->
  <div v-on:click.capture="doThis">...</div>
  <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
  <div v-on:click.self="doThat">...</div>
  
  

  <!-- the click event will be triggered at most once -->

  <a v-on:click.once="doThis"></a>

   

按键修饰符在监听键盘事件时，我们经常需

要监测常见的键值。

Vue 允许为 

v-on

 在监听键盘事件时添加按键修饰符： Vue 为最常用的按键提供了别名

<!-- 缩写语法 -->
<input @keyup.enter="submit">

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

 config.keyCodes 

对象

自定义按键修饰符别名：

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  mediaPlayPause: 179,
  up: [38, 87]
}

 

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->

 

<input v-on:keyup.13="submit">

 

 

按键修饰符如下修饰符

开启鼠标或键盘事件监听

，使在

按键按下

时发生响应。
• .ctrl
• .alt
• .shift
• .meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>