vue 事件处理器

事件处理器

　　1.监听事件

　　可以用v-on指令监听DOM事件来触发一些js代码。

　　2.方法事件处理器

　　许多事件处理的逻辑都很复杂，所以直接把js代码写在v-on指令中是不可行的。因此v-on可以接受一个定义的方法来调用

　　3.内联处理器方法

　　除了直接绑定到一个方法，也可以用内联js语句

　　有时也需要在内联语句处理器中访问原生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)

}

}

4.事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在methods中轻松实现这点，但更好的方式是：methods只有纯粹的数据逻辑，而不是去处理DOM事件细节。

为了解决这个问题，vue.js为v-on提供了事件修饰符。通过由点（.）表示的指令后缀来调用修饰符。

• .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>
• <!-- 点击事件将只会触发一次 -->
  <a v-on:click.once="doThis"></a>
• 不想其它只能对原生的DOM事件起作用的修饰符，.once修饰符还能被用到自定义的组件事件中

5.键值修饰符

在监听键盘事件时，我们经常需要监测常见的键值。Vue允许为v-on在监听键盘事件时添加关键修饰符。

为什么在HTML中监听事件？

你可能已经注意到这种监听事件的方式违背了关注点分离(separation of concern)传统理念。

不必担心，因为所有的vue.js事件处理方法和表达式都严格绑定在当前视图的viewModel上，它不会导致任何维护上的困难。实际上，使用v-on有几个好处

1，扫一眼HTML便能轻松定位在js代码里对应的方法。

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

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