Only bind one click event
<button @click="greet">单个点击事件</button>
methods:{
greet(){
console.log('单个点击事件')
}
}
Bind multiple click event methods in one tag
<button @click="one($event), two($event)">多个点击事件</button>
methods:{
one(e){
console.log(e)
},
two(e){
console.log(e)
}
}
event modifier
.stop prevents click events from bubbling up (applicable when nested click events occur)
<div @click="box('我是大box')" style="width:500px; background:red">
<button @click.stop="doThis('我是内嵌点击事件按')">单个点击事件</button>
</div>
methods:{
doThis(val){
console.log(val)
},
box(val){
console.log(val)
}
}
.prevent prevents the default event
<form action="">
<!-- 默认提交事件 -->
<!-- <input type="submit" value="提交"> -->
<!-- 阻止默认事件 -->
<input type="submit" value="提交" @click.prevent="submitCLICK('prevent阻止默认事件')">
</form>
methods:{
submitCLICK(val){
console.log(val)
}
}
.capture means that events triggered by internal elements are processed here first, and then handed over to the internal elements for processing.
<form action="">
<input type="submit" value="提交" @click.capture="submitCLICK('capture先在此处理')">
</form>
methods:{
submitCLICK(val){
console.log(val)
}
}
.once click event will only be triggered once
<button @click.once="ononce('点击事件将只会触发一次')">点击事件将只会触发一次</button>
methods:{
ononce(val){
console.log(val)
}
}
.passive is used in scroll events on the mobile side to improve browser response speed and user experience.
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发， -->
<div @scroll.passive="onScroll">...</div>
Modifiers are used in series (executed in order)
// 按循序执行先执行阻止冒泡事件在执行阻止默认事件
<a @click.stop.prevent="doThat"></a>
TIP
不要把 .passive 和 .prevent（阻止默认事件） 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
Key modifier
Vue provides aliases for the most commonly used keys:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` 按enter键执行 -->
<input @keyup.enter="submit" />
<!-- 按delete 键执行 -->
<input @keyup.delete="submit" />
System modifier keys
.ctrl
.alt
.shift
.meta
<!-- Alt + Enter 时触发-->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + Click 按住加点击时触发-->
<div @click.ctrl="doSomething">Do something</div>