vue修饰符

75 阅读2分钟

一:修饰芙是什么?

是用于限定类型以及类型成员的声明的一种符号
vue修饰符处理了许多dom事件的细节,让我们不需要去处理,而是能有更多的精力专注于程序的逻辑处理。
修饰符分为以下5种:

  • 表单修饰符
  • 事件修饰符
  • 鼠标按键修饰符
  • 键值修饰符
  • v-bind修饰符

二:修饰符的作用

表单修饰符
最多的是v-model
lazy--》在我们填完信息,光标离开标签的时候,才会将值赋予给value,也就是在change事件之后再进行信息同步
trim--》自动过滤用户输入的首空格字符,而中间的空格不会过滤
number--》自动将用户的输入值转换为数值类型
事件修饰符
是对事件捕获以及目标进行处理
stop--》阻止事件冒泡,相当于调用了event.stopPropagation方法
prevent --> 阻止事件的默认行为,相当于调用了event.preventDefault方法
self--> 只当event.target是当前元素自身时触发处理函数
once--》绑定了事件以后,只会处理一次
capture-->事件触发从包含这个元素的顶层开始往下触发 passive-->在移动端,当监听元素滚动事件的时候,会一直触发onscroll事件会让页面变卡,这个可以解决这个问题。 native--》让组件变成像html内置标签那样监听根元素的原生事件,否则组件上使用v-on只会监听自定义事件
使用.native修饰符来操作普通html标签会令事件失效
鼠标按钮修饰符 left,right,middle 键盘修饰符 键盘事件(onkeyup,onkeydown)
keyCode

v-bind修饰符 async -> 能对props进行一个双向绑定 需要注意的点:

  • 使用sync的时候,子组件传递的事件名格式必须为update:value,其中value必须与子组件中props中声明的完全一致
  • .sync修饰符的v-bind不能和表达式一起使用
  • v-bind.sync用在一个字面量的对象上,是无法使用的

props--》设置自定义标签属性,避免暴漏数据,防止污染html结构

camel--》将命名变成驼峰命名法

参考网站:mp.weixin.qq.com/s?__biz=MzU…