Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter） Vue

1、绑定监听@click:（以监听click为例，其他如keyup，用法类似）
v-on:click="fun"
@click="fun"
@click="fun(参数)"

methods: { test1(eve) {//test1函数没有参数，默认传递 $event alert(eve.target.innerHTML)//test1 }, test2 (msg) { //test1函数有参数，传递该参数 alert(msg)// abc }, test3 (msg, event) { //有参数，如果想获取到enevt，则函数中需要写 $event alert(msg+'---'+event.target.textContent)// abcd---test3 } }

2、@click.stop与@click.prevent
@click.stop 阻止事件冒泡
@click.prevent 阻止事件的默认行为，
百度一下//阻止a标签跳转，仅执行函数test4
//阻止表单提交，仅执行函数test5

3、按键修饰符
@keyup.enter
//按下enter时，执行方法test7

methods: {
test7 (event) {
console.log(event.keyCode)
alert(event.target.value)
}
【Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter）】}