事件修饰符
代码示例:/lesson07/01.事件修饰符.html
通过事件修饰符可以实现为事件添加event.preventDefault()、event.stopPropagation()等操作。 事件修饰符介绍如下:
事件修饰符 | 作用 |
---|---|
.stop | 阻止冒泡 |
.prevent | 阻止默认事件 |
.capture | 使用事件捕获 |
.self | 只监听直接触发该元素的事件 |
.once | 事件只触发一次 |
.passive | 该修饰符会忽略event.preventDefault() |
.native | 监听组件内部根元素的原生事件,而不是自定义事件 |
.left | 鼠标左键点击事件 |
.right | 鼠标右键点击事件 |
.middle | 鼠标中键点击事件 |
.{keyCode | keyAlias} |
普通修饰符的例子: JavaScript:
let vm = new Vue({
el: '#app', // 根元素或挂载点。
data: {},
methods: {
fn1() {
alert('fn1')
},
fn2() {
alert('fn2')
},
submit() {
alert('submit')
},
}
})
复制代码
HTML:
<div id="app">
<div v-on:click="fn1()">
<form action="" v-on:submit.prevent="submit()">
<input type="submit" value="按钮" v-on:click.prevent.stop.once="fn2()">
</form>
</div>
复制代码
按键修饰符
代码示例:/lesson07/02.按键修饰符.html
JavaScript:
let vm = new Vue({
el: '#app',
data: {},
methods: {
fn1() {
alert('回车')
},
fn2() {
alert('ctrl+回车')
},
}
})
复制代码
<div>
<!-- 按下回车键时弹窗,也可以写成v-on:keydown.13 -->
<input type="text" v-on:keydown.enter="fn1()">
<!-- 按键修饰符也支持组合 -->
<input type="text" v-on:keydown.ctrl.enter="fn2()">
</div>
复制代码