一、前言
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>
.
