vue常用修饰符?

在开发的过程中,如果我们能够熟练掌握vue的修饰符,就可以大大提高我们的开发效率

分类

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

表单修饰符

• .lazy

<div>
    <input type="text" v-model="value">
    <p>{{value}}</p>
</div>
//每次数据改变,视图都会发生改变
=======================
<div>
    <input type="text" v-model.lazy="value">
    <p>{{value}}</p>
</div>
//只有光标离开之后,数据才会发生改变

• .trim

在进行传递参数或者登陆注册的时候,经常会出现空格耽误事的问题,这个修饰符就会很好的解决这一问题

<input type="text" v-model.trim="value" />
// 当输入`   name x  ` -> `name x`

• .number

可以限制输入框是数字类型,但是有问题!!!! 不能先输入字母在输入数字,否则无效

<input type="text" v-model.number="value" />

事件修饰符

• .stop

阻止冒泡事件

<div>
    <p
        @click.stop="shunt(1)"
    ></p>
</div>
// 点击p的时候,就会阻止冒泡行为了

• .prevent

阻止默认事件

<a href="#" @click.prevent="shunt(1)"></a>
// 点击p的时候,就会默认的事件

• .once

触发一次,他的名字和他的用法一模一样

<button @click.once="shunt(1)">触发</button>

• .native

当我们写小组件的时候,,可能需要绑定一些事件,但是正常绑定可能是无效的,例如下面这样

<my-demo @click="shunt(1)"></my-demo>
===========================
<my-demo @click.native="shunt(1)"></my-demo>
//才是有效的

• .passive

当我们监听滚动事件的时候,会一直触发onscroll事件,在pc端我们是没有任何问题的,但是如果在手机端,会变得很卡,那么passive相当于是给scroll添加了一个lazy事件,

<div @scroll.passive="xxxx()">这里面内容很多</div>

• .capture

我们都知道事件的机制是: 捕获机制->目标阶段->事件冒泡,当我们设置了capture之后,我们就可以控制它的顺序,让他从顶级元素向下进行冒泡执行

<div @click.capture="xx">1
    <div @click.capture="xx">2
        <div @click="xx">3
            <div @click="xx">4
            </div>
        </div>
    </div>
</div>
// 默认顺序是-> 4 3 2 1   设置了capture之后 -> 1 2 4 3

鼠标按钮修饰符

• .left 左键
• .right 右键
• .middle 中键

<button @click.right="show(1)">点击我</button>

键值修饰符

• .keycode

里面有vue提供的常用的按键别名,比如回车还有删除等等内容信息

<input type="text" @keyup.enter="" />  // 代表回车之后执行的操作