vue阻止事件冒泡@click.stop、默认行为@click.prevent、按键修饰符@keyup.enter

1、@click用法

 @click="fun"
 @click="fun(参数)"
 v-on:click="fun"//完整写法

2、@click.stop 阻止事件冒泡

//点击child区域时只会执行函数sayChild，不会执行函数sayFather
<div class="father" @click="sayFather">
  <div class="child" @click.stop="sayChild">
  </div>
</div>

3、@click.prevent 阻止事件默认行为

<a href="http://www.baidu.com" @click.prevent="f1">百度一下</a>   //阻止a标签跳转，仅执行函数f1

<form  action="/xxx"   @submit.prevent="f2">   //阻止表单提交，仅执行函数tf2
<input type="submit" value="注册">
</form>

4、@keyup.enter 按键修饰符

//按下enter时，执行方法f4

<input type="text" @keyup.enter="f4">

methods: {

      f4 (event) {
        console.log(event.keyCode)
        alert(event.target.value)
      }

}