事件修饰符、按键修饰符

事件修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

这里举2个典型例子简单说一下

.stop

     点击

上面代码，父元素跟子元素各自绑定相应的事件触发不同的方法，子元素采用事件修饰符阻止了父元素事件的处罚

点击

// 等同于
methods: {
    sayHi(e) {
        e.stopPropagation();
    }
}

.prevent

百度

// 相当于
methods: {
    toSay(e) {
        e.preventDefault();
    }
}

 示例：

按键修饰符

。   // 回车键提交

.   // 一键清除内容

下面一个简单的例子

// html

        

            

                用户名：
                
            
            

                密码：
                @keyup.enter="success()">
            
            

                
            
        


// vue
 methods: {
    success(e) {
        alert('提交成功了');
    }
}

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112