-----', event);
},
btn3Click(abc, event) {
console.log('++++++++', abc, event);
}
}
})

// 如果函数需要参数,但是没有传入, 那么函数的形参为undefined
// function abc(name) {
// console.log(name);
// }
//
// abc()

```

三、v-on修饰符

3.1.阻止冒泡事件 .stop

事件冒泡：在结构上存在嵌套的元素，有事件冒泡的功能，自子元素传递（冒泡）到父元素，所以触发了绑定在button上的点击事件，在事件冒泡的作用下，绑定在div上的事件也会被触发。

        <div id="app">
                <div @click="divClick">
                    <button @click="btnClick">btn</button>
                </div>
        </div>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    counter: 0
                },
                methods: {
                    btnClick(){
                        console.log('btnClick');
                    },
                    divClick(){
                        console.log('divClick');
                    }
                }
            })
        </script>

divClick事件也被触发

增加.stop修饰符就可以阻止冒泡事件

原生js中阻止冒泡事件是利用事件对象调用stopPropagation()， event.stopPropagation()

3.2.阻止默认事件 .prevent

正常情况下，点击右键会出现菜单，但是特定时候需要取消这个事件，就用.prevent修饰符阻止默认事件

原生js中使用event.preventDefault()阻止默认事件

3.3.当事件是从特定键触发时才触发回调 .enter(回车键)

3.4.要求事件只触发一次 .once

相关完整代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!--1. .stop修饰符的使用-->
  <div @click="divClick">
    aaaaaaa
    <button @click.stop="btnClick">按钮</button>
  </div>

  <!--2. .prevent修饰符的使用-->
  <br>
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

  <!--3. .监听某个键盘的键帽-->
  <input type="text" @keyup.enter="keyUp">

  <!--4. .once修饰符的使用-->
  <button @click.once="btn2Click">按钮2</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      btnClick() {
        console.log("btnClick");
      },
      divClick() {
        console.log("divClick");
      },
      submitClick() {
        console.log('submitClick');
      },
      keyUp() {
        console.log('keyUp');
      },
      btn2Click() {
        console.log('btn2Click');
      }
    }
  })
</script>

</body>
</html>