事件修饰符
- .prevent修饰符
- .stop修饰符
- .once修饰符
prevent修饰符
- 用于阻止默认事件行为,相当于event.preventDefault()，例如a标签默认跳转
<div id="app">
<a @click.prevent="fn" href="https://kaiwu.lagou.com/">链接</a> // 可以添加fn方法也可以不加
<a @click.prevent href="https://kaiwu.lagou.com/">链接</a>
</div>
stop修饰符
- 用于阻止事件传播，相当于event.stopPropagation()。
- 元素在事件触发后默认会产生事件冒泡，事件冒泡会导致，当前元素触发后向上传递给父元素，并依次向外传递，如果外部某元素也存在相同事件时也会被触发
点击按钮时，div的点击事件也会触发
正确写法
<div @click="fn1">
<button @click.stop="fn2">按钮</button>
</div>
修饰符的结合使用
<div @click="fn1">
<a @click.prevent.stop="fn2" href="xxx">链接</a>
</div>
once修饰符
- 用于设置事件只会触发一次
<div id="app">
<button @click.once="fn2">按钮</button>
</div>
passive修饰符
- passive这个修饰符会执行默认方法。你们可能会问，明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了
- 【浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。】
- 通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作
- 一般用在滚动监听，@scoll，@touchmove，因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度
- 注：passive和prevent冲突，不能同时绑定在一个监听器上
self修饰符
- 只当在 event.target 是当前元素自身时触发处理函数
<div v-on:click.self="doThat">...</div>
按键修饰符
- 按键码：按键码指的是将 按键的按键码 作为修饰符使用，以标识按键的操作方式。
<div id="app">
<input type="text" @keyup="fn"> // 指定按键松开会触发
</div>
var vm = new Vue({
data:{
},
methods:{
fn(event){
console.log(event) // 内有code，key，keycode(被废弃)
}
}
}).$mount("#app")
添加按键码修饰符
<div id="app">
<input type="text" @keyup.49="fn"> // 只有keycode49可以触发
</div>
如果按键是字母,可以修改为字母修饰符
<div id="app">
<input type="text" @keyup.a="fn"> // 只有a字母可以触发
</div>
- 特殊按键：指的是键盘中类似
esc、enter、delete等功能按键，为了更好的兼容性,应首选内置别名。 - 不同设备keycode可能不一致，特殊按键用别名
<div id="app">
<input type="text" @keyup.esc="fn"> // 只有 esc 可以触发
</div>
- 按键码的修饰符组合
<div id="app">
<input type="text" @keyup.a.b.c="fn"> // a 或者 b 或者 c 都可以触发
</div>
系统修饰符
- 系统按键指的是ctrl、alt 、shift、meta（windows键）等按键。
- 系统按键不单独使用
- 系统按键通常与其他按键组合使用，例如配合ctrl+c 来使用
<div id="app">
<input type="text" @keyup.ctrl="fn"> // 点击 ctrl+c
</div>
<div id="app">
<input type="text" @keyup.ctrl.q ="fn"> // 只有 ctrl+q 才能触发
</div>
鼠标按键修饰符
- 用于设置点击事件由鼠标哪个按键来完成。
- .left修饰符
- .right修饰符
- .middle修饰符（滚轮）
<div id="app">
<input type="text" @keyup.left ="fn"> // 左键 才能触发
</div>
v-model修饰符
- .trim修饰符
- .lazy修饰符
- .number修饰符
trim修饰符
- 用于自动过滤用户输入内容首尾两端的空格。（input，textarea）
<div id="app">
<input type="text" v-model.trim="inputVal"> // input中首尾空格会被trim移除
<p>{{ inputVal }}</p>
</div>
lazy修饰符
- 用于将v-model的触发方式由 input事件 触发更改为 change事件 触发。
- 每次输入完毕失去交点时才进行检测，触发
<div id="app">
<input type="text" v-model.lazy="inputVal"> // input只有失去焦点才会更新
<p>{{ inputVal }}</p>
</div>
number修饰符
- 用于自动将用户输入的值转换为数值类型，如无法被parseFloat()转换，则返回原始内容。
- input标签输入123，实际获取的
vm.inputVal = "123",可以使用 .number修饰符进行转换
