vue事件修饰符&事件对象

事件修饰符

事件修饰符	说明
.prevent	阻止默认行为（例如：阻止a标签跳转，阻止表单提交等）
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发一次
.self	只有在event.target是当前元素自身时，触发事件处理函数

常用：

.prevent：阻止事件的默认行为

// 比如：阻止a标签跳转页面
// 只执行代码体，不跳转页面
<a href='http://www.baidu.com' @click.prevent='add'></a>
add(){
    console.log('11')
}

.stop：阻止事件冒泡

<a href='http://www.baidu.com' @click.stop='add'></a>

事件对象

事件对象：$event，vue的内置对象（就是原生Js的事件对象event）

// 不传参直接使用
add(e){
    console.log(e)
    e.target.style.backgroundColor = 'red'
}

// 如果要传参又要使用$event
<button @click= 'add(1, $event)'>按钮</button>
methods:{
    add(val, e){
        console.log(val, e)
    }
}