Vue 事件处理器与修饰符

前面的话

在前面的一篇“Vue模板语法”文章中，已经引入了Vue事件处理的概念v-on与修饰符。在事件绑定上， 类似原生js的onclick等写法，也是在HTML上进行监听的。这篇文章讲介绍v-on指令与修饰符

v-on

监听一个按钮的点击事件，设置一个计数器，每次点击都加一：

<div id="app">
        <!-- 等价于 v-on:click="count++" -->
        {{count}}
        <button @click="count++">点击加一</button>
</div>
<script>
	new Vue({
        el: '#app',
        data: {
            count: 0
        }
    })
</script>

@click的表达式可以直接使用Js语句，也可以在一个Vue实例中methods选项内的函数名，比如对上例进行扩展 再增加一个按钮，点击一次加10

<div id="app1">
        点击次数：{{count}}
        <button @click="handleAdd()"></button>
        <button @click="handleAdd(10)"></button>
    </div>
  <script>
  new Vue({
        el: "#app1",
        data: {
            count:0
        },
       methods:  {
            handleAdd: function(num) {
                num = num || 1;
                this.count += count;
            }
        }
    })
</script> 

@click调用的方法名后可以不跟括号.此时，如果该方法有参数，默认会将原生事件对象event传入。

这种在HTML元素上监听事件的设计看似将DOM与Js紧耦合，违背分离的原理，是刚好相反。因为通过HTML就可以知道调用的是哪个方法，将逻辑与DOM解耦，便于维护。最重要的是，当模板销毁时，所有事件处理器都会自动删除，无需自己清理。

Vue提供了一个特殊的变量$event，用于访问原生DOM事件。
例如：

<div id="app2>
 	<a href="http://www.baidu.com" @click="handleClick('禁止打开',$event)">打开链接</a>
</div>
<script>
new Vue({
        el: '#app2',
        methods: {
            handleClick: function (message, event) {
                event.preventDefault();
                window.alert(massage);
            }
        }
    })
</script>

修饰符

在上例使用的event.preventDefault()也可以用Vue事件的修饰符来实现，在@绑定的事件后加小圆点“.”在跟一个后缀来使用修饰符。Vue支持一下修饰符。

    .stop
    .prevent
    .capture
    .self
    .once

具体用法：

    <!-- 阻止点击事件冒泡： -->
    <a @click.stop="handle"></a>
    <!-- 提交事件不再重载页面 -->
    <form @submit.prevent="handle"></form>
    <!-- 修饰符可以串联 -->
    <a @click.stop.event="handle"></a>
    <!-- 只有修饰符 -->
    <form @submit.prevent></form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div @click.capture="handle">...</div>
    <!-- 只当事件在该元素本身触发时触发回调 -->
    <div @click.self="handle">...</div>
    <!-- 只触发一次，组件同样适用 -->
    <div @click.once="handle">...</div>

在表单元素上监听键盘事件式，还可以使用按键修饰符
比如： 按下具体某个键时才调用方法

<!-- 只有在keyCode是13时调用submit() -->
 <input type="text" @keyup.13='submit'>

除了某个keyCode外，Vue还提供了一些快捷名称，以下是全部的别名：
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
.alt
.shift
.meta

实例：

   <p><!-- Alt + c--></p>
     <input type="text" @keyup.alt.67="clear">
     
   <p><!-- Ctrl + click --></p>
   <div @click.ctl='doSomething'> Do something</div>