版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chencl1986/article/details/84915701
示例代码请访问我的GitHub:
https://github.com/chencl1986/vue-tutorial
事件修饰符
代码示例:/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>