1.当我们对Vue进行传递参数时，我们就需要用到事件传值。还有事件修饰符是我们对一些事件的特殊修饰
1.1 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件传值及事件修饰符</title>
</head>
<body>
<div id="app">
<!-- 事件传递参数 -->
<!-- 这个时候可以把123的值传入下面的方法中 -->
<!-- $event可以把所有的数据传递给下面的方法中 -->
<h1 @click="clickH1(123,$event)">123</h1>
<h1 @click="clickH1(456)">456</h1>
<!-- 事件修饰符 -->
<hr>
<!-- 点击事件只执行一次 -->
<button @click.once="clickBtn">按钮，点击事件只能执行一次</button>
<hr>
<!-- 冒泡(下层元素可以向上层元素进行传播) -->
<div class="out" @click="clickOut" style="width: 400px;height: 400px;background:pink;">
<!-- 可以通过stop阻止其冒泡，不让其向外传播 -->
<!-- 点击橙色的方块时不会执行clickOut的点击事件 -->
<div class="box" @click.stop="clickBox" style="width: 100px;height: 100px;background: orange;">
</div>
</div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
clickH1(e,event){
console.log(e);
console.log(event)
},
clickBtn(){
alert(123)
},
clickOut(){
console.log("这是out");
},
clickBox(){
console.log("这是box")
}
}
})
</script>
</body>
</html>1.2 显示效果
