Vue修饰符

2021-07-02 本文已影响0人 mcgee0731

事件修饰符

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

Vue修饰符

欢迎赞赏和关注！！

猜你喜欢

热点阅读