Vue常用修饰符，深入解析

绝地灬酷狼 2022-09-15 12:40 112阅读 0赞

v-on指令的修饰符  
事件修饰符  
.stop

调用 event.stop，阻止事件冒泡

<div id="app">
      <div @click="alert('div')">
        <button @click.stop="alert('button')">点击</button>
      </div>
    </div>
    复制代码

const vm = new Vue({ 
      el: '#app',
      methods: { 
        alert(str) {  alert(str); }
      }
    })
    复制代码

.prevent

调用 event.preventDefault()，阻止默认事件

<div id="app">
      <form v-on:submit.prevent="onSubmit">
        <input type="submit">
      </form>
        
      <form v-on:submit.prevent>
        <input type="submit">
      </form>
    </div>
    复制代码

const vm = new Vue({ 
      el: '#app',
      methods: { 
        onSubmit() {  console.log('submit'); }
      }
    })
    复制代码

.capture

事件捕获模式

<div id="app">
      <div @click.capture="alert('div')">
        <button @click="alert('button')">点击</button>
      </div>
    </div>
    复制代码

const vm = new Vue({ 
      el: '#app',
      methods: { 
        alert(str) {  alert(str) }
      }
    })  
    复制代码

.self

只当事件是从侦听器绑定的元素本身触发时才触发回调

<div id="app">
      <div id="app">
        <div :style="{ backgroundColor: 'red' }" 
        @click.self="alert('div')">
          <button @click="alert('button')">点击</button>
        </div>
      </div>
    </div>
    复制代码

const vm = new Vue({ 
      el: '#app',
      methods: { 
        alert(str) {  alert(str) }
      }
    })
    复制代码

.once

只触发一次回调

2.1.4新增  
点击两次button按钮，只弹出一次button

<div id="app">
      <button @click.once="alert('button')">点击</button>
    </div>
    复制代码

const vm = new Vue({ 
      el: '#app',
      methods: { 
        alert(str) {  alert(str) }
      }
    })
    复制代码

.passive

设置 addEventListener 中的 passive 选项  
能够提升移动端的性能  
2.3.0新增

why passive？

即使在触发触摸事件时，执行了一个空的函数，也会让页面卡顿。因为浏览器不知道监听器到底会不会阻止默认事件，所以浏览器要等到执行完整个函数后，才能决定是否要滚动页面。passive事件监听器，允许开发者告诉浏览器，监听器不会阻止默认行为，从而浏览器可以放心大胆的滚动页面，这样可以大幅度提升移动端页面的性能，因为据统计只有20%的触摸事件会阻止默认事件。  
.passive 会告诉浏览器你不想阻止事件的默认行为

注意

使用修饰符时，顺序很重要。相应的代码会以同样的顺序产生。因此， v-on:click.prevent.self 会阻止所有的点击的默认事件 v-on:click.self.prevent 只会阻止对元素自身点击的默认事件  
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。

按键修饰符  
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

<input v-on:keyup.enter="submit">
    复制代码

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

.enter（回车键）  
.tab  
.delete (捕获“删除”和“退格”键)  
.esc  
.space （空格键）  
.up （箭头上键）  
.down （箭头下键）  
.left（箭头左键）  
.right（箭头右键）

除了使用Vue提供的按键别名之外，还可以自定义按键别名：

// 全局配置
     // 可以使用 `v-on:keyup.f1` 
    Vue.config.keyCodes.f1 = 112
    复制代码

Vue.config.keyCodes = { 
      v: 86,
      f1: 112,
       // 小驼峰 不可用
      mediaPlayPause: 179,
       // 取而代之的是 短横线分隔 且用双引号括起来
      "media-play-pause": 179,
      up: [38, 87]
    }
    复制代码

<input type="text" @keyup.media-play-pause="method">
    复制代码

系统修饰键  
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态，换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

.ctrl  
.alt  
.shift  
.meta  
在 Mac 系统键盘上，meta 对应 command 键 (⌘)。  
在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。  
在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。  
在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。  
在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”

<input @keyup.alt.67="clear">
    
      
    <div @click.ctrl="doSomething">Do something</div>
    复制代码

exact 修饰符

允许你控制由精确的系统修饰符组合触发的事件。  
2.5.0 +

<button @click.ctrl="onClick">A</button>
    
      
    <button @click.ctrl.exact="onCtrlClick">A</button>
    
      
    <button @click.exact="onClick">A</button>
    复制代码

鼠标按钮修饰符

仅当点击特定的鼠标按钮时会处理执行函数  
2.2.0 +  
.left  
.right  
.middle

最后  
如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: [http://github.crmeb.net/u/defu][http_github.crmeb.net_u_defu] 不胜感激 ！

[http_github.crmeb.net_u_defu]: http://github.crmeb.net/u/defu