一、修饰符的作用
vue中的修饰符可以帮助我们处理很多DOM事件的细节,节省更多事件去关注业务逻辑的部分
二、分类
我了解的修饰符大概有以下几种:
1.事件修饰符
2.鼠标按键修饰符
3.表单修饰符
4.v-bind修饰符
5.键盘修饰符
事件修饰符:
(1)stop 是用来阻止事件冒泡的,相当于调用了原生Js中的event.stopPropagation方法
(2)prevent 是阻止事件的默认行为,这个就是相当于调用了event.preventDefault方法
(3)once 是事件只能触发一次,
(4)self 是只有当在 event.target 是当前元素自身时才触发处理函数
注意:使用的顺序不同会有不同的效果,@click.prevent.self会阻止所有的点击事件,@click.self.prevent,只会阻止对元素自身的点击
(5)native 是把组件上的事件变成html便签上的原生事件
(6)passive 的作用相当于给onscroll事件加了一个.lazy修饰符做懒加载,因为在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件让网页变卡
(7)capture 是当事件触发的时候,从包含这个事件的顶层开始往下触发
鼠标按键修饰符:
(1)left 左键点击
(2)right 右键点击
(3)middle 中间点击
表单修饰符:
(1)lazy 相当于是懒加载,当v-model绑定了数据,value会实时变化,lazy的作用就是等光标离开,change事件之后再同步数据
(2)trim 清空首部空格,中间的空格不会被清除
(3)number 自动将输入的值转为数字类型
v-bind的修饰符:
(1)sync 也是双向绑定数据
具体使用如下：
//父组件
<父组件 :info.sync="1"></父组件>
//子组件
this.$emit('update:info',1);
和下面写法一致:
//父亲组件
<父组件 :info="infromation" @update:info="1"></父组件>
//子组件
function1() {
this.$emit('update:info',1);
}
注意:
-
使用
sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致 -
.sync修饰符的v-bind不能和表达式一起使用
(2)prop 设置自定义标签属性，避免暴露数据，防止污染 HTML 结构
<input id="uid" title="title1" value="1" :index.prop="index">
(3)camel 将命名变为驼峰命名法，
如将my-Box属性名转换为 myBox
键盘修饰符:
键盘修饰符是用来修饰键盘事件（onkeyup，onkeydown）的
-
普通键（enter、tab、delete、space、esc、up...）
-
系统修饰键（ctrl、alt、meta、shift...）
// 只有按键为keyCode的时候才触发
<input type="text" @keyup.enter="">
还可以通过以下方式自定义一些全局的键盘码别名
Vue.config.keyCodes.f2 = 113