关于vue.js:Vue修饰符

事件修饰符

.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修饰符进行转换

注：passive和prevent抵触，不能同时绑定在一个监听器上