<html lang="en">
<head>
<meta charset="UTF-8">
<title>修饰符title>
<script src="vue.min.js">script>
head>
<body>
<div id="app">
div>
body>
<script>
Vue.config.keyCodes.f2 = 113
var vm = new Vue({
el:'#app',
data:{
},
methods:{
}
})
script>
html>
Vue.js 为 v-on 提供了事件修饰符:这里只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
div>
当没有加上.stop阻止事件冒泡,点击按钮,div1Handler和btnHandler函数都会触发,加上后阻止事件冒泡,只触发btnHandler函数
2. .self修饰符的使用
<div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
div>
div>
此时点击button按钮,btnHandler触发,div1Handler不会触发,但是div2Handler会触发,.self只会阻止自己身上的冒泡行为
3. .passive
这个 .passive 修饰符尤其能够提升移动端的性能。
<div v-on:scroll.passive="onScroll">...div>
keyCode对照表
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
<input type="text" @keyup.enter='handle($event)'>
<input type="text" @keyup.f2='handle1($event)'>
methods:{
handle(e){
console.log('你按了enter键')
console.log(e.keyCode)//13
},
handle1(e){
console.log('你按了f2键')
console.log(e.keyCode)//13
}
}
用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器:
.crtl .alt .shift .meta
#app容器(html):
<input @keyup.alt.67="clear">
#methods方法(vm实例里面)
clear(){
console.log('alt+c')
}
在#app容器里面使用,methods写下方法
<button @click.ctrl="fn">没有.excat修饰符button>
fn(){
console.log('只要有按下ctrl就会触发,即使按下其它按键')
},
点击鼠标左键和ctrl时,就会触发fn,同时按下其它键盘键也会触发
<button @click.ctrl.exact="onCtrlClick">Abutton>
onCtrlClick(){
console.log('当只按下ctrl时触发')
},
当按下鼠标和ctrl,触发onCtrlClick函数,但是如果只按下其它键,比如同时按下shift,则不触发
<button @click.exact="onClick">Abutton>
限制处理函数仅响应特定的鼠标按钮。
.left 鼠标左键;.middle 鼠标中键;.right 鼠标右键
<input type="text" v-bind:value.sync='parrent'>
export default{
props:['parrent'],
};