当前位置: 首页 > Web前端 > vue.js

vue修饰符

时间:2023-04-01 01:15:08 vue.js

事件修饰符.prevent修饰符.stop修饰符.once修饰符prevent修饰符用于阻止默认的事件行为,相当于event.preventDefault(),比如一个标签默认为链接//可否添加fn方法链接

stop修饰符用于阻止事件传播,相当于event.stopPropagation()。元素触发事件后默认会产生事件冒泡。事件冒泡会导致当前元素被触发并向上传递给父元素,然后依次向外传递。如果外部元素存在同样的事件,点击按钮时也会触发,div的点击事件也会触发组合正确写法按钮
修饰符链接
once修饰符用于设置事件只会被触发一次默认方法。您可能会问为什么默认设置这样的修饰符。这就是说说这个修饰符的初衷【浏览器只能知道在内核线程执行事件监听器对应的JavaScript代码时,是否会在内部调用preventDefault函数来阻止事件的默认行为,所以浏览器本身没有办法优化这个场景。在这种场景下,用户的手势事件无法快速产生,会导致页面无法快速执行滑动逻辑,从而让用户感觉页面卡住了。】说白了就是每次事件发生时,浏览器都会检查是否有preventDefault来阻止事件的默认动作。我们加上passive就是告诉浏览器不用查询了。我们不使用preventDefault来阻止默认操作。一般用在滚动监控,@scoll,@touchmove,因为在滚动监控过程中,每移动一个像素点都会产生一个事件,每次都使用内核线程查询防止,会导致滑动卡顿。我们通过passive跳过内核线程查询,可以大大提高滑动的流畅度。注意:被动和防止冲突,不能同时绑定一个监听器。self修饰符仅在event.target为当前元素本身时触发处理函数。...
更多事件修饰符来自官网。标识键的操作模式。//指定按键松开时触发varvm=newVue({data:{},methods:{fn(event){console.log(event)//containscode,key,keycode(deprecated)}}}).$mount("#app")添加键码修饰符//只能触发keycode49如果key是字母,可以修改为字母修饰符//只有一个字母才能触发特殊键:指键盘上的esc、enter、delete等功能键。为了更好的兼容性,应该首选内置别名。不同设备的键码可能不一致,特殊键使用别名//只有esc可以触发键码的修饰符组合//a或b或c均可触发更多按键修饰符来自官网systemmodifier系统键指ctrl、alt、shift、meta(windows键)等键。系统键不单独使用系统键通常与其他键结合使用,比如使用ctrl+c//点击ctrl+c//只能触发ctrl+q鼠标键修饰符是用于设置点击事件是由鼠标的哪个按钮完成的。.leftmodifier.rightmodifier.middlemodifier(scrollwheel)//左键触发v-modelmodifier.trimmodifier.lazymodifier.numbermodifiertrim修饰符用于自动过滤用户输入内容开头和结尾的空格。(input,textarea)//输入中的前导和尾随空格将被trim移除

{{inputVal}}/p>lazy修饰符用于将v-model的触发方式从input事件触发改为change事件触发。每次input失去交点时进行检测,触发//input失去焦点时才会更新

{{inputVal}}

数字修饰符用于将用户输入的值自动转换为数字类型。如果无法通过parseFloat()转换,则返回原始内容。input标签输入123,实际得到的vm.inputVal="123",可以使用.number修饰符进行转换