目录
定义
事件修饰符 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 修饰符
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <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>
