VUE3-常用的修饰符

五大类

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

表单修饰符

• 填写表单用的最多的是input标签，指令用的最多的是v-model

lazy

• <input type="text" v-model.lazy="value"> <p>{{value}}</p></input>
• 填完信息后，光标离开标签后，才将值赋给value，也就是change事件之后在进行信息同步

trim

• 自动过滤输入的首空格字符，而中间的空格不会过滤

number

• 自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值

事件修饰符

stop

• 阻止事件冒泡,相当于调用event.stopPropagation方法

prevent

• 阻止事件的默认行为，相当于调用了event.preventDefault方法

self

• 只当在 event.target 是当前元素自身时触发处理函数,将事件绑定在自身身上，相当于阻止事件冒泡

once

• 绑定了事件以后只能触发一次，第二次就不会触发

capture

• 使事件触发从包含这个元素的顶层开始往下触发

passive

• <div v-on:scroll.passive="onScroll">...</div>
• 不要把.passive 和 .prevent 一起使用，因为.prevent将会被忽略
• 移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符

native

• 让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件
• 使用.native修饰符来操作普通HTML标签是会令事件失效

鼠标按钮修饰符

left: 左键点击

right: 右键点击

middle: 中键点击

键盘修饰符

• 用来修饰键盘事件(onkeyup, onkeydown)
• .keyCode：监听特定键盘按下
• 普通键：enter、tab、delete、space、esc、up…
• 系统修饰符：ctrl、alt、meta、shift…
• 示例：<input type="text" @keyup.keyCode="shout()">
• 自定义一些全局键盘码别名：Vue.config.keyCodes.f2 = 113

v-bind修饰符

sync

• 能对props进行一个双向绑定
• 注意：
• 子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致
• 带有.sync修饰符的v-bind不能和表达式一起使用
• 将v-bind。sync用在一个字面量的对象上，例如v-bind.sync=”{title: doc.title}”,是无法正常工作的
• 示例：

  // 父组件
  <comp :myMessage.sync="bar"></comp>
  // 子组件
  this.$emit('update:myMessage',params)

prop

• 设置自定义标签属性，避免暴露数据，防止污染HTML结构
• 示例：<input id="uid" title="title1" value="1" :index.prop="index">

camel

• 将命名变为驼峰命名法(viewBox)