一、前言

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>

常用修饰符

通用
.stop 停止事件的派发（捕获，冒泡等）
.prevent 禁止默认行为
.capture 捕获事件，先处理，再由内部元素处理
.self 自身触发事件才执行
.once 事件只执行一次
.passive 立即触发默认行为，忽略.prevent

按键
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
| 提示：可以通过Vue.config.keyCodes.f1 = 112的形式自定义

组合
.ctrl
.alt
.shift
.meta

鼠标
.left
.right
.middle

exact 完全等于修饰约束才触发事件

exact的例子：

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

.