Vue 常用修饰符

定义

事件修饰符 v-on（缩写@）

鼠标按键修饰符

v-bind 修饰符（缩写:）

键值修饰符

表单修饰符

定义

修饰符是用于限定类型以及类型成员的声明的一种符号，vue 中修饰符分为以下五种：事件修饰符、鼠标按键修饰符、v-bind 修饰符、键值修饰符、表单修饰符

事件修饰符 v-on（缩写@）

.stop：阻止事件冒泡，相当于调用 event.stopPropagation() 方法
.prevent：阻止事件的默认行为，相当于调用 event.preventDefault() 方法

.capture：使事件触发从包含这个元素的顶层开始往下触发

<div @click.capture="shout(1)">
    obj1
    <div @click.capture="shout(2)">
        obj2
        <div @click="shout(3)">
            obj3
            <div @click="shout(4)">
                obj4
            </div>
        </div>
    </div>
</div>
// 输出结构：1 2 4 3

.self：只当在 event.target 是当前元素自身时触发处理函数
.native：让组件变成像 html 内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件
.once：绑定了事件以后只能触发一次，第二次就不会触发
.passive：在移动端，当我们在监听元素滚动事件的时候，会一直触发 onscroll 事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给 onscroll 事件整了一个 .lazy 修饰符
```



<div v-on:scroll.passive="onScroll">...</div>
```

❗️❗️ 注意：

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

鼠标按键修饰符

.left：只当点击鼠标左键时触发
.right：只当点击鼠标右键时触发

.middle：只当点击鼠标中键时触发

v-bind 修饰符（缩写:）

.prop：设置自定义标签属性，避免暴露数据，防止污染HTML结构
.camel：将命名变为驼峰命名法，如将 view-Box属性名转换为 viewBox
.sync：语法糖，能对 props 进行一个双向绑定

键值修饰符

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

@keyup：按键抬起

@keydown：按键按下

.enter：只有在 `key` 是 `Enter` 时调用
```
<input v-on:keyup.enter="submit">
```

.tab：捕获 tab 键
.delete：捕获 delete 删除键和 backspace 退格键
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift

.exact： 修饰符允许你控制由精确的系统修饰符组合触发的事件

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

.meta

❗️❗️ 注意：

在 Mac 系统键盘上，meta 对应 command 键 (⌘)。

在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。

在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。

在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。

在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

使用 keyCode attribute 也是允许的：

<!-- 回车键 -->
<input v-on:keyup.13="submit">

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

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

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

表单修饰符

.lazy：在表单输入时不会马上显示在页面，而是等输入完成失去焦点时才会显示，也就是在change 事件之后再进行信息同步
```
<input type="text" v-model.lazy="value">
<p>{{value}}</p>
```
.trim：过滤表单输入时两边的空格，而中间的空格不会过滤
```
<input type="text" v-model.trim="value"></input>
```
.number：自动将用户的输入值转为数值类型，但如果这个值无法被 parseFloat 解析，则会返回原来的值
```
<input type="number" v-model.number="age"></input>
```

秒客网

Vue 常用修饰符

定义

事件修饰符 v-on（缩写@）

鼠标按键修饰符

v-bind 修饰符（缩写:）

键值修饰符

表单修饰符

相关文章