小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
1. v-on 参数传递
当通过在 methods 中定义方法，以供 @事件 调用时，需要注意参数问题：
- 如果定义的方法不需要传参数，那么调用方法时后面的
()可以不添加； - 如果定义的方法需要传一个参数，而调用方法时后面没有添加
()，那么默认会将事件对象传递给这个参数； - 如果调用方法时想要传事件对象以及其它参数（此时使用了内联语句），那么事件对象可以通过
$event访问到；
此外，在定义的方法中，默认是可以通过 event 获取到事件对象的。
<template id="my-app">
<!-- 1. 方法处理器 -->
<!-- 调用时最后不添加 ()，则默认会把事件对象（event）传入 -->
<button @click="btnClick1">按钮1</button>
<button @click="btnClick11">按钮11</button>
<!-- 2. 内联语句 -->
<button @click="btnClick2('哈哈哈')">按钮2</button>
<!-- 可以通过 $event 属性访问到事件发生时的事件对象 -->
<button @click="btnClick3('哈哈哈', $event)">按钮3</button>
</template>
<body> 中的完整代码：
<div id="app"></div>
<template id="my-app">
<!-- 1. 方法处理器 -->
<!-- 调用时最后不添加 ()，则默认会把事件对象（event）传入 -->
<button @click="btnClick1">按钮1</button>
<button @click="btnClick11">按钮11</button>
<!-- 2. 内联语句 -->
<button @click="btnClick2('哈哈哈')">按钮2</button>
<!-- 可以通过 $event 属性访问到事件发生时的事件对象 -->
<button @click="btnClick3('哈哈哈', $event)">按钮3</button>
</template>
<script src="./js/vue.js"></script>
<script>
const App = {
methods: {
btnClick1() {
console.log('按钮被点击啦', event);
},
btnClick11(e) {
console.log('按钮被点击啦', e);
},
btnClick2(msg) {
console.log(msg, event);
},
btnClick3(msg, e) {
console.log(event, msg, e);
}
},
template: '#my-app'
};
Vue.createApp(App).mount('#app');
</script>
2. v-on 的修饰符
<template id="my-app">
<!-- 1. .stop 使用示例 -->
<!-- 默认情况下，事件会发生冒泡：子元素的点击事件发生后，父元素的点击事件随后也会被触发 -->
<!-- 可以使用 v-on 的 .stop 修饰符阻止事件冒泡 -->
<!-- .stop 修饰符内部调用的其实是 event.stopPropagation() -->
<div @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
<!-- 2. .{keyAlias} 之 .enter 使用示例 -->
<!-- 仅当 keyup 事件（当一个键被释放时触发的事件）是从 enter 键触发时才触发回调 -->
<input type="text" @keyup.enter="keyup">
</template>
<body> 中的完整代码：
<div id="app"></div>
<template id="my-app">
<!-- 1. .stop 使用示例 -->
<!-- 默认情况下，事件会发生冒泡：子元素的点击事件发生后，父元素的点击事件随后也会被触发 -->
<!-- 可以使用 v-on 的 .stop 修饰符阻止事件冒泡 -->
<!-- .stop 修饰符内部调用的其实是 event.stopPropagation() -->
<div @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
<!-- 2. .{keyAlias} 之 .enter 使用示例 -->
<!-- 仅当 keyup 事件（当一个键被释放时触发的事件）是从 enter 键触发时才触发回调 -->
<input type="text" @keyup.enter="keyup">
</template>
<script src="./js/vue.js"></script>
<script>
const App = {
methods: {
btnClick() {
console.log('按钮被点击啦');
},
divClick() {
console.log('div 被点击啦');
},
keyup() {
// 可以通过 event.target.value 拿到当前输入的内容
console.log('keyup', event.target.value);
}
},
template: '#my-app'
};
Vue.createApp(App).mount('#app');
</script>
