一、前言

vue的事件绑定通过v-on指令进行绑定，事件触发时，可以使用$event访问事件对象。

二、使用

<div id="app">
    <p v-on:click="reverseText($event)">{{ content }}</p>
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
        content: 'Hello World'
    },
    methods: {
        reverseText: function(event){
            console.log(event.target); 
            this.content = this.content.split("").reverse().join("");
        }
    }
});
</script>

当点击p标签时，reverseText被调用，event.target在控制台的打印结果为:
<p>Hello World</p>。

提示：绑定事件时，v-on:click中可以写js表达式，有参或无参函数调用，随时
            可以使用$event作为实参传递事件对象。
补充：$refs属性也可以得到dom对象。

三、事件修饰符

在绑定事件时，可以添加修饰符进行进一步的约束，或者一些逻辑的添加。事件修饰符通过.连接

• 使用

<div id="app">
    <p v-on:click.once="reverseText($event)">{{ content }}</p>
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
        content: 'Hello World'
    },
    methods: {
        reverseText: function(event){
            console.log(event.target); 
            this.content = this.content.split("").reverse().join("");
        }
    }
});
</script>

上面代码添加了once的修饰符，约束事件只能触发一次。如果有多个修饰符可以继续使用.连接，比如：
<p v-on:click.once.prevent="reverseText($event)">{{ content }}</p>

• 常用修饰符

1. 通用
   .stop 停止事件的派发（捕获，冒泡等）
   .prevent 禁止默认行为
   .capture 捕获事件，先处理，再由内部元素处理
   .self 自身触发事件才执行
   .once 事件只执行一次
   .passive 立即触发默认行为，忽略.prevent
2. 按键
   .enter
   .tab
   .delete (捕获“删除”和“退格”键)
   .esc
   .space
   .up
   .down
   .left
   .right
   | 提示：可以通过Vue.config.keyCodes.f1 = 112的形式自定义
3. 组合
   .ctrl
   .alt
   .shift
   .meta
4. 鼠标
   .left
   .right
   .middle
5. exact 完全等于修饰约束才触发事件

exact的例子：

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

.